/* ========================================================================= theme-polish.css — "Aedium-grade" visual polish for the MudBlazor surfaces (Accounting / Restaurant ERP, Equipment, Placeable Items, dialogs). Aedium's professional feel comes from its design TOKENS, not its framework (Aedium is Ant Design Blazor; we're MudBlazor — markup can't be copied). We replicate the aesthetic here in Ziggi's espresso/tan/cream palette: • subtle 1px borders + soft TWO-layer shadows instead of heavy elevation • tight table density with uppercase, muted, letter-spaced headers • a consistent radius scale + refined buttons/tabs/inputs • custom thin scrollbars + Inter stylistic alternates Loaded AFTER app.css + MudBlazor.min.css so these win over the defaults. Scoped to .mud-* so the custom-HTML pages (Home, Gallery) and the 3D viewer (own CSS) are untouched. ========================================================================= */ :root { --zg-surface: #ffffff; --zg-surface-soft: #faf6ee; /* warm off-white — header rows / zebra */ --zg-border: #e8e1d3; /* subtle warm hairline */ --zg-border-strong: #d8cdb8; --zg-muted: #927f6b; /* muted label text */ --zg-radius-sm: 4px; /* controls/buttons — 4px everywhere (owner, ADR-0102) */ --zg-radius: 9px; --zg-radius-lg: 14px; --app-control-h: 36px; /* #78 (Global UX/UI): shared control height — toolbar search, buttons, toggles all align to this */ /* Soft, multi-layer elevation (the Aedium signature — barely-there depth) */ --zg-shadow-sm: 0 1px 2px rgba(58, 38, 24, 0.05); --zg-shadow: 0 1px 3px rgba(58, 38, 24, 0.07), 0 1px 2px rgba(58, 38, 24, 0.05); --zg-shadow-md: 0 6px 16px rgba(58, 38, 24, 0.08), 0 2px 5px rgba(58, 38, 24, 0.05); /* Widget content text tiers — used by .zg-wv / .zg-wl / .zg-wi / .zg-wlink classes (see below). Flip to light values in dark mode so every widget gets theme-aware text without inline styles. */ --zg-text-strong: #0f172a; --zg-text-body: #1f2937; --zg-text-muted: #6b7280; --zg-text-faint: #9ca3af; --zg-text-link: #8a5a2b; } /* Dark theme: same Ziggi's identity, inverted. Espresso is the BG, tan is the action color, cream is the text. Stamped on by App.razor (SSR cookie read) + the inline head script (OS prefers-color-scheme). The MudBlazor side flips through MudThemeProvider IsDarkMode in the same tick; the rules below cover everything else (the scoped + plain CSS that keys on the --zg-* tokens). */ :root[data-theme="dark"] { --zg-surface: #241710; /* slightly-lifted espresso for cards/panels */ --zg-surface-soft: #2D1E14; /* header rows / zebra */ --zg-border: rgba(217, 173, 109, 0.18); /* tan at low opacity */ --zg-border-strong: rgba(217, 173, 109, 0.30); --zg-muted: #A39078; /* muted tan-cream label text */ /* Shadows recede on dark — keep the structure but drop the contrast (a glowing shadow on dark looks fake). */ --zg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --zg-shadow: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.28); --zg-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), 0 2px 5px rgba(0, 0, 0, 0.30); /* Widget text tiers inverted for dark surface */ --zg-text-strong: #F5F0E6; --zg-text-body: #F5F0E6; --zg-text-muted: #A39078; --zg-text-faint: rgba(245, 240, 230, 0.50); --zg-text-link: #3BA7B4; /* teal — complements espresso/tan on dark */ } /* Body background: in dark mode the BG is the deep-espresso below the MudBlazor surface stack. */ :root[data-theme="dark"] body { background: #1A100A; color: #F5F0E6; } /* Topbar + breadcrumbs + user menu (custom HTML, NOT MudBlazor — these key off our own surface color). */ :root[data-theme="dark"] .app-topbar, :root[data-theme="dark"] .app-usermenu-panel, :root[data-theme="dark"] .app-breadcrumbs { background: var(--zg-surface) !important; color: #F5F0E6; border-color: var(--zg-border); } :root[data-theme="dark"] .app-breadcrumb-link { color: #d9ad6d; } :root[data-theme="dark"] .app-breadcrumb-current, :root[data-theme="dark"] .app-breadcrumb-sep, :root[data-theme="dark"] .app-breadcrumb-home { color: #F5F0E6; } :root[data-theme="dark"] .app-usermenu-item:hover { background: rgba(217, 173, 109, 0.12); } :root[data-theme="dark"] .app-usermenu-label { color: var(--zg-muted); } :root[data-theme="dark"] .app-usermenu-divider { border-color: var(--zg-border); } /* ---- Widget semantic text classes ---------------------------------------- Replace inline style="color:#0f172a/6b7280/9ca3af/1f2937/8a5a2b" in all widget files with these classes — one token flip in :root[data-theme="dark"] above handles every widget at once. Font-size stays inline (varies per widget). */ .zg-wv { color: var(--zg-text-strong); } /* KPI value — big number */ .zg-ws { color: var(--zg-text-body); } /* strong body text */ .zg-wl { color: var(--zg-text-muted); } /* label / subtitle */ .zg-wi { color: var(--zg-text-faint); } /* loading / idle / dim */ .zg-wlink { color: var(--zg-text-link) !important; } /* inline link in widget */ .zg-wlink:hover { opacity: 0.85; } /* ---- Typography: Inter stylistic alternates + smoothing ------------------ */ body { font-feature-settings: 'cv02', 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Cards & outlined panels: hairline border, gentle shadow ------------- */ .mud-card, .mud-paper.mud-paper-outlined { border: 1px solid var(--zg-border); border-radius: var(--zg-radius); } .mud-card { box-shadow: var(--zg-shadow-sm); transition: box-shadow .15s ease; } .mud-card:hover { box-shadow: var(--zg-shadow); } /* ---- Tables & data grids framed as clean white cards on the cream bg ----- */ /* Covers both MudTable (.mud-table wrapper) and MudDataGrid (.mud-data-grid); the soft shadow replaces MudBlazor's default .mud-elevation-1 block shadow. */ .mud-table, .mud-data-grid { border: 1px solid var(--zg-border); border-radius: var(--zg-radius); box-shadow: var(--zg-shadow-sm) !important; overflow: hidden; background: var(--zg-surface); } /* ---- Table headers: uppercase, muted, letter-spaced (small-caps feel) ---- */ .mud-table-root thead th.mud-table-cell { text-transform: uppercase !important; letter-spacing: 0.05em !important; font-size: 0.7rem !important; font-weight: 700 !important; color: var(--zg-muted) !important; background: var(--zg-surface-soft) !important; border-bottom: 1px solid var(--zg-border-strong) !important; } /* ---- Table body: hairline rows, soft zebra, warm tan hover --------------- */ .mud-table-root tbody td.mud-table-cell { border-bottom: 1px solid var(--zg-border) !important; } .mud-table-root:not(.mud-table-striped) tbody tr:nth-of-type(even) { background: rgba(245, 240, 230, 0.5); } .mud-table-root tbody tr:hover { background: rgba(217, 173, 109, 0.10) !important; /* tan tint */ } /* ---- Tabs: refined underline / ink-bar — light & elegant (Aedium-style) -- */ /* Muted text tabs; the active one is espresso with a thin tan accent bar that glides between tabs. No heavy fill — reads far lighter than a solid pill. */ .mud-tabs .mud-tabs-toolbar { border-bottom: 1px solid var(--zg-border); min-height: 0; padding: 0; } .mud-tabs .mud-tab { text-transform: none; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.005em; min-height: 38px; padding: 0 0.95rem; margin: 0; border-radius: 0; color: var(--zg-muted); transition: color .12s ease; } .mud-tabs .mud-tab:hover:not(.mud-tab-active) { color: var(--ziggis-espresso); background: transparent; } .mud-tabs .mud-tab.mud-tab-active { color: var(--ziggis-espresso); font-weight: 600; background: transparent; } .mud-tabs .mud-tab.mud-tab-active .mud-icon-root { color: var(--ziggis-espresso) !important; } /* Keep the tab bar + panels on the cream bg — no white strip under the ink-bar */ .erp-shell .mud-tabs-toolbar, .erp-shell .mud-tabs-panels, .erp-shell .mud-tab-panel { background: transparent !important; } /* the moving ink-bar under the active tab */ .mud-tabs .mud-tab-slider { display: block !important; height: 2.5px !important; background: var(--ziggis-tan, #d9ad6d) !important; border-radius: 3px 3px 0 0; } /* ---- ERP tabbed pages: full-bleed grid-shell, tabs + grid fill the height - */ /* Mirrors the .grid-region pattern one level deeper: the page title + company switcher take natural height; MudTabs fills the rest; the active panel hosts either a grid marked .erp-fill (fills + scrolls its own body, toolbar/pager pinned — exactly like Equipment) or a form/report (scrolls as a whole). */ .erp-shell .mud-tabs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .erp-shell .mud-tabs > .mud-tabs-panels { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .erp-shell .mud-tabs-panels > .mud-tab-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; /* form / report panels scroll as a whole */ } /* A grid/host marked .erp-fill stretches to fill its panel. */ .erp-shell .erp-fill { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; } /* ErpEditLink + grid nav links — teal so a clickable value reads as a link without hover. */ .erp-grid-edit-link { cursor: pointer; font-weight: 600; } .mud-link.erp-grid-edit-link { color: #1a7a87 !important; } .mud-link.erp-grid-edit-link:hover { color: #115e6a !important; text-decoration: underline; } :root[data-theme="dark"] .mud-link.erp-grid-edit-link { color: #4AABB8 !important; } :root[data-theme="dark"] .mud-link.erp-grid-edit-link:hover { color: #6CC3CD !important; } /* ErpGrid host = a sticky action bar above a filling, internally-scrolling grid. */ .erp-grid-host > .mud-data-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .erp-shell .erp-fill .mud-table-container { flex: 1 1 auto; min-height: 0; overflow: auto; } .erp-shell .erp-fill .mud-table-pagination, .erp-shell .erp-fill .mud-table-pagination-toolbar { flex: 0 0 auto; } /* #74 / ADR-0042 — make the new AppSectionTabs panel self-sufficient: a grid dropped into a section tab fills the REMAINING height (below any filter bar / header in the tab) and scrolls its OWN body, toolbar/pager pinned — with NO .erp-shell on the page or .erp-fill on the grid required. THE #74 FIX: this overrides the legacy `.erp-fill { height: 100% }`, which overflowed the panel whenever the tab had content above the grid (so the page scrolled and the pager fell below the fold). .ast-body is already a flex column, so `flex:1 + min-height:0` is the correct "fill the rest". */ .app-sectiontabs-panel > .ast-body > .erp-grid-host { flex: 1 1 auto; min-height: 0; height: auto; /* override .erp-shell .erp-fill height:100% (overflows when a header sits above) */ display: flex; flex-direction: column; } .ast-body .erp-grid-host .mud-table-container { flex: 1 1 auto; min-height: 0; overflow: auto; /* the grid body scrolls internally; the panel itself never scrolls */ } .ast-body .erp-grid-host .mud-table-pagination, .ast-body .erp-grid-host .mud-table-pagination-toolbar { flex: 0 0 auto; /* pager pinned at the bottom, always visible — no page scroll */ } /* The one consistent, pinned action bar — used by ErpGrid and by standalone bars (e.g. the Chart of Accounts tree view). Sticky so it never scrolls away; cream background masks content scrolling beneath it. */ .erp-actionbar { position: sticky; top: 0; z-index: 3; flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0 0.6rem; background: var(--ziggis-cream, #faf6ee); } .erp-actionbar-start { display: flex; align-items: center; gap: 0.5rem; } /* ---- ErpGrid "quick list" variant (QuickList="true") --------------------- A slim, chrome-free embed for tight contexts (dashboard tiles, side panels): no action bar, no pager, tighter cell padding + smaller type than the already- dense default. Scoped to .erp-grid-quick so it never touches normal grids. */ .erp-grid-quick { height: 100%; display: flex; flex-direction: column; min-height: 0; } .erp-grid-quick > .mud-data-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .erp-grid-quick .mud-table-container { flex: 1 1 auto; min-height: 0; overflow: auto; } /* Trim the row chrome below MudBlazor's Dense baseline. */ .erp-grid-quick .mud-table-cell { padding-top: 2px; padding-bottom: 2px; padding-left: 8px; padding-right: 8px; font-size: 0.78rem; line-height: 1.3; } .erp-grid-quick .mud-table-head .mud-table-cell { font-size: 0.68rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--zg-muted, #927f6b); padding-top: 4px; padding-bottom: 4px; } /* ---- Buttons: refined to match the light tabs — quiet until hover -------- */ .mud-button-root { border-radius: var(--zg-radius-sm); text-transform: none; font-weight: 500; letter-spacing: 0; } /* Buttons rendered ~54px tall: the button typography line-height (1.75) compounded with a block-display start/end icon span. Tighten both so iconned + text buttons are compact app-wide (owner 2026-07-18). Grid-toolbar buttons keep their own explicit height rules below. */ .mud-button-root.mud-button { line-height: 1.4; } .mud-button .mud-button-icon { line-height: 1; display: inline-flex; align-items: center; } /* The toolbar "Add …" / "New …" actions (outlined-primary): soft warm hairline instead of a loud espresso slab. Semantic outlined buttons (warning / error) keep their own color. */ .mud-button-outlined-primary { border-color: rgba(74, 38, 19, 0.22) !important; } .mud-button-outlined-primary:hover { border-color: var(--ziggis-tan, #d9ad6d) !important; background: rgba(217, 173, 109, 0.10) !important; } .mud-button-filled { box-shadow: var(--zg-shadow-sm); } .mud-button-filled:hover { box-shadow: var(--zg-shadow); } /* ---- Toggle groups (Tree/Grid, report switcher): light segmented control - */ .mud-toggle-group { border: 1px solid var(--zg-border-strong) !important; border-radius: var(--zg-radius-sm) !important; background: var(--zg-surface); overflow: hidden; } .mud-toggle-group .mud-toggle-item { text-transform: none; font-weight: 500; font-size: 0.8rem; color: var(--zg-muted); padding: 0.32rem 0.9rem; transition: background-color .12s ease, color .12s ease; } .mud-toggle-group .mud-toggle-item .mud-icon-root { color: currentColor; } .mud-toggle-group .mud-toggle-item:hover:not(.mud-toggle-item-selected) { background: rgba(217, 173, 109, 0.08); color: var(--ziggis-espresso); } .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected { background: rgba(217, 173, 109, 0.18) !important; color: var(--ziggis-espresso) !important; font-weight: 600; } /* ---- Chips: tag-style (slightly rounded, not loud pills) ----------------- */ .mud-chip { border-radius: 6px; font-weight: 600; } /* ---- Inputs: consistent radius ------------------------------------------ */ .mud-input.mud-input-outlined .mud-input-slot, .mud-input.mud-input-outlined { border-radius: var(--zg-radius-sm); } /* ---- Expansion panels: hairline frame ----------------------------------- */ .mud-expand-panel { border: 1px solid var(--zg-border); } /* ---- Dialogs & menus: softer corners + Aedium-grade shadow -------------- */ .mud-dialog, .mud-popover.mud-popover-paper { border-radius: var(--zg-radius); box-shadow: var(--zg-shadow-md) !important; } /* ---- Custom thin warm scrollbars (scoped to scrolling Mud surfaces) ------ */ .mud-table-container::-webkit-scrollbar, .mud-tabs-panels::-webkit-scrollbar, .mud-dialog-content::-webkit-scrollbar { width: 9px; height: 9px; } .mud-table-container::-webkit-scrollbar-track, .mud-tabs-panels::-webkit-scrollbar-track, .mud-dialog-content::-webkit-scrollbar-track { background: transparent; } .mud-table-container::-webkit-scrollbar-thumb, .mud-tabs-panels::-webkit-scrollbar-thumb, .mud-dialog-content::-webkit-scrollbar-thumb { background: rgba(58, 38, 24, 0.20); border-radius: 5px; } .mud-table-container::-webkit-scrollbar-thumb:hover, .mud-tabs-panels::-webkit-scrollbar-thumb:hover, .mud-dialog-content::-webkit-scrollbar-thumb:hover { background: rgba(58, 38, 24, 0.34); } /* ---- Chart-of-accounts tree (grouped by type, nested by parent) --------- */ .coa-tree { padding: 0.25rem 0.25rem 0.5rem; font-family: 'Inter', system-ui, sans-serif; } /* In a fill container (tree view) the tree scrolls below the pinned bar, so the scrollbar runs alongside the tree only — not the action bar. */ .erp-shell .erp-fill > .coa-tree { flex: 1 1 auto; min-height: 0; overflow: auto; } .coa-group { margin-bottom: 0.75rem; } .coa-group-header { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 700; color: var(--zg-muted); padding: 0.5rem 0.5rem 0.3rem; border-bottom: 1px solid var(--zg-border); margin-bottom: 0.15rem; } .coa-count { margin-left: 0.45rem; color: var(--zg-border-strong); font-weight: 600; } .coa-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.10rem 0.5rem; line-height: 1.25; min-height: 0; border-radius: 6px; font-size: 0.85rem; border-bottom: 1px solid rgba(232, 225, 211, 0.5); } .coa-row:hover { background: rgba(217, 173, 109, 0.10); } .coa-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ziggis-espresso); min-width: 3.5em; } .coa-name { color: #3a2618; } .coa-name.coa-rollup { font-weight: 700; } .coa-spacer { flex: 1 1 auto; } .coa-normal { color: var(--zg-muted); font-size: 0.78rem; white-space: nowrap; } /* ADR-0107 — muted balance, fixed min-width + tabular so the column lines up across rows. */ .coa-balance { min-width: 7.5em; text-align: right; color: var(--zg-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- Ingredient-availability row shading (Menu grid, B.iii) -------------- */ /* The Menu grid is an ErpGrid (MudDataGrid), so rows are tr.mud-table-row and the tint must land on the cells (> td) to beat zebra-striping + hover. Hue tracks the theme via the *-rgb palette tokens (present in this MudBlazor 9.4 build). The HierarchyColumn child row (recipe card) is intentionally not tinted. */ .mud-table-row.zg-row-out > td { background-color: rgba(var(--mud-palette-error-rgb), 0.14) !important; } .mud-table-row.zg-row-out:hover > td { background-color: rgba(var(--mud-palette-error-rgb), 0.22) !important; } .mud-table-row.zg-row-low > td { background-color: rgba(var(--mud-palette-warning-rgb), 0.16) !important; } .mud-table-row.zg-row-low:hover > td { background-color: rgba(var(--mud-palette-warning-rgb), 0.24) !important; } /* ---- Top-10 recent-sellers highlight (Menu grid default rank order) ------- */ /* A subtle warm tint so the last-7-days top sellers stand out without competing with the stronger out/low stock cues above (those win in RowClassFunc). A left accent bar reads as "featured" rather than "warning". */ .mud-table-row.zg-row-top > td { background-color: rgba(var(--mud-palette-warning-rgb), 0.07) !important; } .mud-table-row.zg-row-top:hover > td { background-color: rgba(var(--mud-palette-warning-rgb), 0.13) !important; } .mud-table-row.zg-row-top > td:first-child { box-shadow: inset 3px 0 0 0 var(--mud-palette-warning); } /* ADR-0066 P8 / ADR-0070 P3 — palette ?focus row-preselect: the scrolled-to row flashes once. */ .mud-table-row.zg-focus-row > td, .coa-row.zg-focus-row { animation: zg-focus-flash 2.2s ease-out 1; } @keyframes zg-focus-flash { 0% { background-color: rgba(var(--mud-palette-primary-rgb), 0.32); } 100% { background-color: transparent; } } /* Rank badge (#1..#10) in the Menu-item cell — compact, doesn't push the row taller. */ .zg-rank-badge.mud-chip { height: 20px; font-weight: 700; } /* ---- SidePanel (shared right slide-out, z-index 1391): lift MudBlazor popovers (selects, date-pickers, menus — default z 1201) ABOVE the panel so form controls inside it open on top instead of behind. This also keeps them above dialogs, which is the correct stacking. ---- */ .mud-popover { z-index: 1402 !important; } /* ---- AppRibbon command-bar family (ADR-0026) — Aedium .aed-cust-btn restated in coffee. Icon-over-label tile baked in so call sites stop hand-rolling the flex-column blob. ---- */ .app-ribbon { display:flex; flex-wrap:wrap; align-items:stretch; gap:5px; } .app-ribbon-group { display:flex; flex-direction:column; gap:3px; } /* Separator drawn between adjacent groups via ::before — no index tracking. */ .app-ribbon-group + .app-ribbon-group::before { content:""; position:absolute; left:-5px; top:0; bottom:0; width:1px; background:var(--zg-border-strong); } .app-ribbon-group + .app-ribbon-group { position:relative; margin-left:5px; } .app-ribbon-group-tiles { display:flex; flex-wrap:wrap; gap:5px; align-items:stretch; } .app-ribbon-group-cap { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--zg-muted); padding:0 2px; } .app-ribbon-sep { width:1px; align-self:stretch; min-height:34px; background:var(--zg-border-strong); margin:0 5px; } .app-ribbon-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:58px; padding:5px 9px; border:1px solid var(--zg-border-strong); border-radius:var(--zg-radius-sm); background:var(--zg-surface); color:#3a2618; cursor:pointer; line-height:1.15; white-space:nowrap; text-decoration:none; font-family:inherit; transition:background-color .12s, border-color .12s, color .12s; } .app-ribbon-tile:hover:not(:disabled){ background:var(--zg-surface-soft); border-color:#b89368; color:#2A1A10; } .app-ribbon-tile:disabled{ opacity:.55; cursor:not-allowed; } .app-ribbon-tile .app-ribbon-ico{ font-size:16px; line-height:1; } /* MudIcon Size.Small sits here */ .app-ribbon-tile .app-ribbon-lbl{ font-size:11px; font-weight:500; } .app-ribbon-tile--primary{ background:#4a2613; border-color:#4a2613; color:#fff; } .app-ribbon-tile--primary:hover:not(:disabled){ background:#5A4030; border-color:#5A4030; color:#fff; } .app-ribbon-tile--danger{ background:var(--zg-surface); border-color:var(--zg-border-strong); color:#c0392b; } .app-ribbon-tile--danger:hover:not(:disabled){ background:#fdf3f1; border-color:#e0a99f; color:#a5281b; } /* ============================================================================ ErpGridV2 — Mud-free grid (pure HTML table). Ported from Aedium AedGridV2, adapted to Ziggis espresso palette. ============================================================================ */ .erp-grid-v2 { width: 100%; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 0; background: var(--zg-surface); border: 1px solid var(--zg-border); border-radius: var(--zg-radius); box-shadow: var(--zg-shadow-sm); overflow: hidden; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .erp-grid-v2:hover { border-color: var(--zg-border-strong); } /* Unpaged — auto-height (size to content, no fill). Applied when EnablePaging=false. */ .erp-grid-v2--auto { flex: none; min-height: auto; } .erp-grid-v2--auto .erp-grid-v2-body { flex: none; min-height: auto; overflow-y: visible; } /* QuickList — chrome-free embed for dashboards / side panels */ .erp-grid-v2--quick { border: none; border-radius: 0; box-shadow: none; background: transparent; flex: none; min-height: auto; } .erp-grid-v2--quick .erp-grid-v2-body { flex: none; min-height: auto; overflow-y: visible; } .erp-grid-v2--quick .erp-grid-v2-table thead th { font-size: 0.68rem; padding: 4px 8px; color: var(--zg-muted); } .erp-grid-v2--quick .erp-grid-v2-table tbody td { padding: 2px 8px; font-size: 0.78rem; line-height: 1.3; } /* ---- Toolbar (three-section: left=filters, center=search, right=settings+commands) ---- */ .erp-grid-v2-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--zg-border); background: var(--zg-surface); flex-wrap: nowrap; } .erp-grid-v2-toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .erp-grid-v2-toolbar-left::-webkit-scrollbar { height: 6px; } .erp-grid-v2-toolbar-left::-webkit-scrollbar-thumb { background: rgba(74,38,19,0.18); border-radius: 3px; } .erp-grid-v2-toolbar-center { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .erp-grid-v2-toolbar-right { display: flex; align-items: center; gap: 10px; flex: 1 1 0; justify-content: flex-end; } /* #78: every command/toggle button in the grid toolbar adopts the shared control height, single line — so the search box, filter toggles, view toggle and command buttons are all identical height and aligned. */ .erp-grid-v2-toolbar .mud-button-root { height: var(--app-control-h); min-height: var(--app-control-h); white-space: nowrap; } @media (max-width: 640px) { .erp-grid-v2-toolbar { flex-wrap: wrap; } } /* Gear / refresh — plain icon, no button chrome */ .erp-grid-v2-gear { color: var(--zg-muted); cursor: pointer; user-select: none; transition: color 0.12s; line-height: 1; display: inline-flex; align-items: center; min-height: var(--app-control-h); } .erp-grid-v2-gear:hover { color: var(--ziggis-espresso); } /* ---- View toggle (List / Card) ---- */ .erp-grid-v2-view-toggle { display: inline-flex; height: var(--app-control-h); box-sizing: border-box; border: 1px solid var(--zg-border-strong); border-radius: var(--zg-radius-sm); overflow: hidden; } .erp-grid-v2-view-btn { background: var(--zg-surface); color: rgba(74,38,19,0.75); border: none; border-right: 1px solid var(--zg-border-strong); padding: 6px 10px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background 0.12s, color 0.12s; } .erp-grid-v2-view-btn:last-child { border-right: none; } .erp-grid-v2-view-btn:hover:not(.is-active) { background: var(--zg-surface-soft); } .erp-grid-v2-view-btn.is-active { background: var(--ziggis-espresso); color: var(--ziggis-cream); } /* ---- Column chooser popover ---- */ .erp-grid-v2-col-chooser { position: relative; } .erp-grid-v2-popover-scrim { position: fixed; inset: 0; z-index: 60; } .erp-grid-v2-popover { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; z-index: 61; background: var(--zg-surface); border: 1px solid var(--zg-border); border-radius: var(--zg-radius); box-shadow: var(--zg-shadow-md); padding: 8px 0; } .erp-grid-v2-popover-header { padding: 4px 12px 8px; font-size: 11px; color: var(--zg-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; border-bottom: 1px solid var(--zg-border); } .erp-grid-v2-popover-list { list-style: none; margin: 0; padding: 4px 0; max-height: 280px; overflow-y: auto; } .erp-grid-v2-popover-list li label { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .erp-grid-v2-popover-list li label:hover { background: var(--zg-surface-soft); } .erp-grid-v2-popover-list li input[type=checkbox] { cursor: pointer; accent-color: var(--ziggis-espresso); } .erp-grid-v2-popover-footer { padding: 4px 8px; border-top: 1px solid var(--zg-border); text-align: right; } .erp-grid-v2-popover-reset { background: transparent; color: var(--ziggis-espresso); border: none; padding: 4px 8px; font-size: 12px; cursor: pointer; border-radius: 3px; } .erp-grid-v2-popover-reset:hover { background: rgba(74,38,19,0.08); } /* ---- Search ---- */ .erp-grid-v2-search { display: inline-flex; align-items: center; position: relative; } .erp-grid-v2-search-input { width: 220px; height: var(--app-control-h); box-sizing: border-box; padding: 4px 30px 4px 10px; /* right room for the clear (x) */ border: 1px solid var(--zg-border-strong); border-radius: var(--zg-radius-sm); font-size: 13px; color: rgba(0,0,0,0.85); background: var(--zg-surface); transition: border-color 0.12s, box-shadow 0.12s; font-family: inherit; } /* #78: explicit, consistent in-field clear (replaces the inconsistent native type=search X) */ .erp-grid-v2-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; cursor: pointer; background: rgba(74,38,19,0.10); color: var(--zg-muted); font-size: 10px; line-height: 1; transition: background 0.12s, color 0.12s; } .erp-grid-v2-search-clear:hover { background: rgba(74,38,19,0.20); color: var(--ziggis-espresso); } .erp-grid-v2-search-input:focus { outline: none; border-color: var(--ziggis-espresso); box-shadow: 0 0 0 2px rgba(74,38,19,0.12); } .erp-grid-v2-search-input::placeholder { color: rgba(0,0,0,0.35); } /* ---- Loading indicator ---- */ .erp-grid-v2-loading { height: 3px; width: 100%; background: var(--zg-border); overflow: hidden; flex-shrink: 0; } .erp-grid-v2-loading-bar { height: 100%; width: 30%; background: var(--ziggis-espresso); border-radius: 2px; animation: erp-loading-slide 1.2s ease-in-out infinite; } @keyframes erp-loading-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(433%); } } /* ---- Body (scrollable region between toolbar and footer) ---- */ .erp-grid-v2-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: auto; background: var(--zg-surface); } .erp-grid-v2-body::-webkit-scrollbar { width: 8px; height: 8px; } .erp-grid-v2-body::-webkit-scrollbar-track { background: transparent; } .erp-grid-v2-body::-webkit-scrollbar-thumb { background: rgba(74,38,19,0.18); border-radius: 4px; } .erp-grid-v2-body::-webkit-scrollbar-thumb:hover { background: rgba(74,38,19,0.3); } /* ---- Table (list view) ---- */ .erp-grid-v2-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--zg-surface); table-layout: auto; } .erp-grid-v2-table thead th { background: var(--zg-surface-soft); text-align: left; padding: 8px 10px; font-size: 11px; color: var(--zg-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; user-select: none; } .erp-grid-v2-table tbody td { padding: 5px 10px; border-top: 1px solid var(--zg-border); vertical-align: middle; white-space: nowrap; } .erp-grid-v2-table tbody tr:hover td { background: var(--zg-surface-soft); } .erp-grid-v2-table .amt { text-align: right; font-variant-numeric: tabular-nums; } .erp-grid-v2-table .ctr { text-align: center; } .erp-grid-v2-table .wrap { white-space: normal; } /* Header cell: sortable + draggable + resizable */ .erp-grid-v2-th { position: relative; cursor: pointer; } .erp-grid-v2-th--actions { cursor: default; } .erp-grid-v2-th--dragging { opacity: 0.45; } .erp-grid-v2-th--drop { box-shadow: inset 3px 0 0 0 var(--ziggis-tan); } .erp-grid-v2-header-label { user-select: none; } .erp-grid-v2-sort { margin-left: 4px; color: var(--ziggis-espresso); font-size: 10px; } /* ADR-0105: Column filter UI */ .erp-grid-v2-filter-btn { background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 12px; opacity: .4; vertical-align: middle; } .erp-grid-v2-filter-btn:hover { opacity: .8; } .erp-grid-v2-filter-btn.active { opacity: 1; color: var(--ziggis-espresso); } .erp-grid-v2-filter-popover { position: absolute; top: 100%; left: 0; z-index: 10; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 6px; display: flex; gap: 4px; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); } .erp-grid-v2-filter-input { font-size: 12px; padding: 3px 6px; border: 1px solid var(--mud-palette-lines-default); border-radius: 3px; background: transparent; color: var(--mud-palette-text-primary); min-width: 100px; } .erp-grid-v2-filter-clear { font-size: 11px; padding: 2px 6px; border: none; border-radius: 3px; background: var(--mud-palette-action-default-hover); cursor: pointer; color: var(--mud-palette-text-secondary); } /* ADR-0105: filter chip bar */ .erp-grid-v2-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); align-items: center; } .erp-grid-v2-filter-chip { font-size: 11px; padding: 2px 8px; border-radius: 12px; background: var(--mud-palette-action-default-hover); display: inline-flex; align-items: center; gap: 4px; } .erp-grid-v2-filter-chip strong { font-weight: 600; } .erp-grid-v2-filter-chip-clear { background: none; border: none; cursor: pointer; padding: 0; font-size: 12px; color: var(--mud-palette-text-secondary); line-height: 1; } .erp-grid-v2-filter-chip-clear:hover { color: var(--mud-palette-error); } .erp-grid-v2-filter-chip-clearall { font-size: 11px; padding: 2px 8px; border: none; cursor: pointer; color: var(--mud-palette-text-secondary); background: none; text-decoration: underline; } /* Resize handle */ .erp-grid-v2-resize-handle { position: absolute; top: 0; right: 0; bottom: 0; width: 5px; cursor: col-resize; user-select: none; background: transparent; transition: background 0.12s; } .erp-grid-v2-th:hover .erp-grid-v2-resize-handle { background: rgba(74,38,19,0.18); } .erp-grid-v2-resize-handle:hover { background: var(--ziggis-espresso) !important; } /* Row actions + empty state */ .erp-grid-v2-actions-cell { white-space: nowrap; } .erp-grid-v2-row-clickable { cursor: pointer; } .erp-grid-v2-row-clickable:hover > td { background: var(--mud-palette-action-default-hover); } .erp-grid-v2-empty { padding: 24px 12px; text-align: center; color: var(--zg-muted); } /* ---- Card view ---- */ .erp-grid-v2-card-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 12px; } .erp-grid-v2-card-wrapper { display: contents; } /* ---- Row expansion ---- */ .erp-grid-v2-expander-cell { width: 36px; text-align: center; padding: 4px !important; } .erp-grid-v2-expander { border: 0; background: transparent; color: var(--zg-muted); cursor: pointer; padding: 4px 8px; line-height: 1; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; } .erp-grid-v2-expander:hover { background: rgba(74,38,19,0.08); color: var(--ziggis-espresso); } .erp-grid-v2-caret { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; transition: transform 0.15s ease; } .erp-grid-v2-caret.open { transform: rotate(90deg); } .erp-grid-v2-expansion-row td.erp-grid-v2-expansion-cell { background: rgba(74,38,19,0.03); border-top: 0; padding: 10px 16px 14px; } /* The grid's `tbody td { white-space: nowrap }` also matches the expansion cell AND every td of a detail table nested inside it — blowing a long banner / line table out to thousands of px and scrolling the whole grid horizontally. Force the detail (and its nested cells) to wrap. */ .erp-grid-v2-table tbody td.erp-grid-v2-expansion-cell, .erp-grid-v2-table tbody td.erp-grid-v2-expansion-cell td, .erp-grid-v2-table tbody td.erp-grid-v2-expansion-cell th { white-space: normal; overflow-wrap: anywhere; } /* ---- Row-class shading (stock status, top seller) ---- */ .erp-grid-v2-table tr.zg-row-out > td { background-color: rgba(var(--mud-palette-error-rgb), 0.14); } .erp-grid-v2-table tr.zg-row-out:hover > td { background-color: rgba(var(--mud-palette-error-rgb), 0.22); } .erp-grid-v2-table tr.zg-row-low > td { background-color: rgba(var(--mud-palette-warning-rgb), 0.16); } .erp-grid-v2-table tr.zg-row-low:hover > td { background-color: rgba(var(--mud-palette-warning-rgb), 0.24); } .erp-grid-v2-table tr.zg-row-top > td { background-color: rgba(var(--mud-palette-warning-rgb), 0.07); } .erp-grid-v2-table tr.zg-row-top:hover > td { background-color: rgba(var(--mud-palette-warning-rgb), 0.13); } .erp-grid-v2-table tr.zg-row-top > td:first-child { box-shadow: inset 3px 0 0 0 var(--mud-palette-warning); } /* ---- Footer / Pager ---- */ .erp-grid-v2-footer { border-top: 1px solid var(--zg-border); background: var(--zg-surface-soft); padding: 10px 16px; color: var(--zg-muted); font-size: 12px; font-feature-settings: 'tnum'; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .erp-grid-v2-pager { display: flex; align-items: center; gap: 6px; } .erp-grid-v2-pager-btn { border: 1px solid var(--zg-border-strong); background: var(--zg-surface); color: rgba(74,38,19,0.7); border-radius: var(--zg-radius-sm); padding: 2px 8px; font-size: 12px; line-height: 1.4; cursor: pointer; min-width: 24px; } .erp-grid-v2-pager-btn:hover:not(:disabled) { border-color: var(--ziggis-espresso); color: var(--ziggis-espresso); } .erp-grid-v2-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; } .erp-grid-v2-pager-label { padding: 0 6px; color: rgba(74,38,19,0.7); font-weight: 500; } .erp-grid-v2-pager-sep { color: rgba(74,38,19,0.2); padding: 0 2px; } .erp-grid-v2-pager-pagesize { display: flex; align-items: center; gap: 6px; } .erp-grid-v2-pager-pagesize select { width: auto; font-size: 12px; padding: 2px 6px; height: auto; } .erp-grid-v2-pager-info { color: var(--zg-muted); font-size: 12px; } /* ============================================================================ Dark-mode polish batch (recon + verify in workflow w3kk32zuy): widget shells / dashboard title / section tabs / toggle pills / grid search, plus the creative drink-image "spotlight" ellipse so menu-item photos read on dark without leaving a white slab. Each rule uses :root[data-theme="dark"] (specificity 0,2,1) — beats the unscoped light-mode rules in dashboard.css / app.css (specificity 0,1,0) regardless of stylesheet load order. ============================================================================ */ /* ---- Page-shell containers ---- .grid-shell / .erp-shell are the page-content wrappers used by most ERP pages — both have `background: var(--ziggis-cream)` hardcoded in app.css. In dark mode let the body bg (#1A100A) show through; the cards/grids inside provide their own surface color and the visual hierarchy reads cleaner that way. */ :root[data-theme="dark"] .grid-shell { background: transparent; } /* ---- Menu item drink-image: cream "spotlight" ellipse on dark ---- Drink photos arrive with white edges (transparent PNG letterbox). In light mode that white slab is fine; in dark mode it leaves a giant white block. Solution: keep the cream backdrop but CLIP it to an ellipse so the drink sits in a menu-board spotlight surrounded by the dark page. The drop-shadow gives the spot a soft warm glow. */ :root[data-theme="dark"] .menu-record-bigimg-img { background: var(--ziggis-cream); clip-path: ellipse(46% 49% at 50% 50%); filter: drop-shadow(0 8px 28px rgba(217, 173, 109, 0.18)); } :root[data-theme="dark"] .menu-record-bigimg-ph { background: var(--zg-surface-soft); color: var(--zg-muted); } :root[data-theme="dark"] .menu-record-head-price { color: var(--ziggis-cream); } /* Sister surfaces: small card thumbs + hover-zoom flyout — same cream-on-dark idiom */ :root[data-theme="dark"] .menu-card-img { background: var(--ziggis-cream); } :root[data-theme="dark"] .menu-card-noimg { color: var(--zg-muted); } :root[data-theme="dark"] .menu-card-name { color: var(--ziggis-cream); } :root[data-theme="dark"] .menu-card-meta { color: var(--zg-muted); } :root[data-theme="dark"] .menu-card-price { color: var(--ziggis-tan-light); } :root[data-theme="dark"] .menu-card-zoom { background: var(--zg-surface); box-shadow: 0 26px 80px rgba(0, 0, 0, .8); border: 1px solid var(--zg-border); } :root[data-theme="dark"] .menu-card-zoom-img { background: var(--ziggis-cream); } :root[data-theme="dark"] .menu-card-zoom-name { color: var(--ziggis-cream); } :root[data-theme="dark"] .menu-card-zoom-cat, :root[data-theme="dark"] .menu-card-zoom-recipe-h, :root[data-theme="dark"] .menu-card-zoom-recipe th { color: var(--zg-muted); border-bottom-color: var(--zg-border); } :root[data-theme="dark"] .menu-card-zoom-ing { color: var(--ziggis-cream); } /* ---- Grids + Tabs: dark teal glass (matches dashboard widgets) with brown accents -- Primary surface = teal glass; headers/toolbars = deeper teal; row hover + active accents = brown/tan family. Brings the whole page into the same material language as .aed-dashboard-cell. */ /* --- Grids (MudTable / MudDataGrid / ErpGridV2 shell) --- */ :root[data-theme="dark"] .mud-table, :root[data-theme="dark"] .mud-data-grid { background: rgba(12, 44, 50, 0.88); border-color: rgba(94, 178, 190, 0.18); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(94, 178, 190, 0.06) !important; } :root[data-theme="dark"] .mud-table-root thead th.mud-table-cell { background: rgba(8, 32, 37, 0.92) !important; border-bottom-color: rgba(94, 178, 190, 0.22) !important; } :root[data-theme="dark"] .mud-table-root tbody td.mud-table-cell { border-bottom-color: rgba(94, 178, 190, 0.10) !important; } :root[data-theme="dark"] .mud-table-root:not(.mud-table-striped) tbody tr:nth-of-type(even) { background: rgba(94, 178, 190, 0.04); } :root[data-theme="dark"] .mud-table-root tbody tr:hover { background: rgba(217, 173, 109, 0.10) !important; } /* --- MudTabs (erp-shell tab pages: Accounting, Food, Equipment, etc.) --- */ :root[data-theme="dark"] .mud-tabs .mud-tabs-toolbar { border-bottom-color: rgba(94, 178, 190, 0.22); } :root[data-theme="dark"] .mud-tabs .mud-tab { color: rgba(245, 240, 230, 0.50); } :root[data-theme="dark"] .mud-tabs .mud-tab:hover:not(.mud-tab-active) { color: rgba(245, 240, 230, 0.78); background: rgba(94, 178, 190, 0.06); } :root[data-theme="dark"] .mud-tabs .mud-tab.mud-tab-active { color: var(--ziggis-cream); background: rgba(12, 44, 50, 0.55); } :root[data-theme="dark"] .mud-tabs .mud-tab.mud-tab-active .mud-icon-root { color: var(--ziggis-cream) !important; } :root[data-theme="dark"] .mud-tabs .mud-tab-slider { background: var(--ziggis-tan) !important; } :root[data-theme="dark"] .erp-shell .mud-tabs-toolbar, :root[data-theme="dark"] .erp-shell .mud-tabs-panels, :root[data-theme="dark"] .erp-shell .mud-tab-panel { background: transparent !important; } /* --- AppSectionTabs (folder-style: Transactions, Chart of Accounts, etc.) --- */ :root[data-theme="dark"] .app-sectiontabs-bar { background: transparent; } :root[data-theme="dark"] .app-sectiontab { color: rgba(245, 240, 230, 0.50); background: rgba(12, 44, 50, 0.45); border-color: rgba(94, 178, 190, 0.12); } :root[data-theme="dark"] .app-sectiontab:hover { color: rgba(245, 240, 230, 0.78); background: rgba(12, 44, 50, 0.65); border-color: rgba(94, 178, 190, 0.20); } :root[data-theme="dark"] .app-sectiontab.active { color: var(--ziggis-cream); background: rgba(12, 44, 50, 0.88); border-color: rgba(94, 178, 190, 0.22); } :root[data-theme="dark"] .app-sectiontab.active .app-sectiontab-cap { background: var(--ziggis-tan); } :root[data-theme="dark"] .app-sectiontabs-panel { background: rgba(12, 44, 50, 0.88); border-color: rgba(94, 178, 190, 0.18); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(94, 178, 190, 0.06); } :root[data-theme="dark"] .app-sectiontab--error { color: #ff7f7f; border-color: rgba(255, 127, 127, 0.25); } :root[data-theme="dark"] .app-sectiontab--error:hover { color: #ff9090; background: rgba(255, 127, 127, 0.12); } :root[data-theme="dark"] .app-sectiontab--error.active { color: #ff9090; background: rgba(12, 44, 50, 0.88); border-color: rgba(255, 127, 127, 0.40); } :root[data-theme="dark"] .app-sectiontab--error.active .app-sectiontab-cap { background: #ff9090; } :root[data-theme="dark"] .app-sectiontab-badge { background: #ff7f7f; color: var(--ziggis-espresso-dark); } /* ---- Dashboard: title h1 + source badge + widget shells + chart primitives ---- dashboard.css hardcodes #fff/#1f2937/#e5e7eb across every widget surface. The :root[data-theme="dark"] prefix takes specificity above the bare class selectors. */ :root[data-theme="dark"] .aed-dashboard-header h1 { color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-dashboard-source { color: var(--zg-muted); } :root[data-theme="dark"] .aed-dashboard-cell { background: rgba(12, 44, 50, 0.88) !important; /* dark glass teal — lifts off the espresso page BG */ border-color: rgba(94, 178, 190, 0.18) !important; } :root[data-theme="dark"] .aed-dashboard-cell-header { background: rgba(8, 32, 37, 0.90) !important; border-bottom-color: rgba(94, 178, 190, 0.22) !important; color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-dashboard-cell-title { color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-dashboard-cell-error { color: var(--zg-muted); } /* Status badges: desaturated semantic tones for dark surface */ :root[data-theme="dark"] .aed-dashboard-cell-status--ok { background: rgba(34, 197, 94, 0.18); color: #86efac; } :root[data-theme="dark"] .aed-dashboard-cell-status--warn { background: rgba(202, 138, 4, 0.22); color: #facc15; } :root[data-theme="dark"] .aed-dashboard-cell-status--danger { background: rgba(239, 68, 68, 0.22); color: #fca5a5; } :root[data-theme="dark"] .aed-dashboard-cell-status--info { background: rgba(127, 168, 176, 0.22); color: #b5d4d9; } :root[data-theme="dark"] .aed-dashboard-cell-status--accent { background: rgba(201, 138, 60, 0.22); color: #e6b58a; } :root[data-theme="dark"] .aed-dashboard-cell-status--gray { background: rgba(217, 173, 109, 0.10); color: var(--zg-muted); } /* FeatureLink bottom-fade gradient — flip the white scroll mask to the dark surface */ :root[data-theme="dark"] .aed-feature-link::after { background: linear-gradient(to bottom, rgba(36, 23, 16, 0) 0%, rgba(36, 23, 16, 0.85) 70%, rgba(36, 23, 16, 1) 100%); } /* Customize / +Widget / Save / Reset / Remove buttons (.aed-cust-btn family) */ :root[data-theme="dark"] .aed-cust-btn { background: transparent; border-color: var(--zg-border-strong); color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-cust-btn:hover:not(:disabled) { background: rgba(217, 173, 109, 0.08); border-color: var(--ziggis-tan); color: var(--ziggis-tan); } :root[data-theme="dark"] .aed-cust-btn--primary { background: var(--ziggis-tan); border-color: var(--ziggis-tan); color: var(--ziggis-espresso-dark); } :root[data-theme="dark"] .aed-cust-btn--primary:hover:not(:disabled) { background: var(--ziggis-tan-light); border-color: var(--ziggis-tan-light); color: var(--ziggis-espresso-dark); } :root[data-theme="dark"] .aed-cust-btn--danger { background: transparent; border-color: rgba(239, 68, 68, 0.40); color: #fca5a5; } :root[data-theme="dark"] .aed-cust-btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.12); border-color: #fca5a5; } /* Floating cell-edit toolbar (shown in edit mode) + the nudge controls inside */ :root[data-theme="dark"] .aed-dashboard-floating-toolbar { background: var(--zg-surface); border-color: var(--zg-border-strong); color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-dashboard-cell-coord { color: var(--zg-muted); } :root[data-theme="dark"] .aed-dashboard-cell-nudge { border-color: var(--zg-border-strong); background: var(--zg-surface-soft); color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-dashboard-cell-nudge:hover:not(:disabled) { background: rgba(217, 173, 109, 0.12); border-color: var(--ziggis-tan); } /* Widget gallery picker (SidePanel) */ :root[data-theme="dark"] .aed-widget-pick-module { color: var(--zg-muted); } :root[data-theme="dark"] .wpick-card { background: var(--zg-surface); border-color: var(--zg-border); } :root[data-theme="dark"] .wpick-card:hover { border-color: var(--ziggis-tan); background: rgba(217, 173, 109, 0.08); } :root[data-theme="dark"] .wpick-title { color: var(--ziggis-cream); } :root[data-theme="dark"] .wpick-desc { color: var(--zg-muted); } /* Chart primitives — AedChartCard, AedKpiCard, AedDonut, AedBarSeries, AedSparkline */ :root[data-theme="dark"] .aed-chart-card { background: var(--zg-surface); border-color: var(--zg-border); } :root[data-theme="dark"] .aed-chart-card-header { background: var(--zg-surface-soft); border-bottom-color: var(--zg-border-strong); } :root[data-theme="dark"] .aed-chart-card-title { color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-chart-card-subtitle, :root[data-theme="dark"] .aed-chart-empty { color: var(--zg-muted); } :root[data-theme="dark"] .aed-kpi-card { background: var(--zg-surface); border-color: var(--zg-border); /* The border-left accent uses --aed-kpi-accent (light fallback #8a5a2b). Flip the fallback to tan in dark mode so widgets that don't override the var inline get a brand-correct accent line. */ --aed-kpi-accent: var(--ziggis-tan); } :root[data-theme="dark"] .aed-kpi-card-label { color: var(--zg-muted); } :root[data-theme="dark"] .aed-kpi-card-value { color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-kpi-card-subtitle, :root[data-theme="dark"] .aed-kpi-card-delta { color: rgba(245, 240, 230, 0.70); } :root[data-theme="dark"] .aed-donut-total { fill: var(--ziggis-cream); } :root[data-theme="dark"] .aed-donut-total-label { fill: var(--zg-muted); } :root[data-theme="dark"] .aed-donut-legend-label { color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-donut-legend-value, :root[data-theme="dark"] .aed-donut-legend-pct { color: rgba(245, 240, 230, 0.70); } :root[data-theme="dark"] .aed-bar-row-label { color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-bar-row-track { background: rgba(217, 173, 109, 0.10); } :root[data-theme="dark"] .aed-bar-row-value { color: rgba(245, 240, 230, 0.70); } :root[data-theme="dark"] .aed-sparkline { color: var(--ziggis-cream); } :root[data-theme="dark"] .aed-sparkline-empty { color: var(--zg-muted); } /* ---- MudToggleGroup pills (To review / Posted / Ignored / All etc.) ---- The light-mode hover rule above hardcodes color:var(--ziggis-espresso), which is nearly black on dark BG. Override to cream/tan in dark mode. */ :root[data-theme="dark"] .mud-toggle-group .mud-toggle-item:hover:not(.mud-toggle-item-selected) { background: rgba(217, 173, 109, 0.08); color: var(--ziggis-tan); } :root[data-theme="dark"] .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected { background: rgba(217, 173, 109, 0.18) !important; color: var(--ziggis-cream) !important; font-weight: 600; } /* ---- ErpGrid / ErpGridV2 search input + action bar + scrollbars ---- The native HTML search input has rgba(0,0,0,*) text + placeholder colors invisible on dark. */ :root[data-theme="dark"] .erp-actionbar { background: rgba(8, 32, 37, 0.92) !important; } :root[data-theme="dark"] .erp-grid-v2-search-input { color: var(--ziggis-cream); background: rgba(12, 44, 50, 0.70); border-color: rgba(94, 178, 190, 0.22); } :root[data-theme="dark"] .erp-grid-v2-search-input::placeholder { color: rgba(245, 240, 230, 0.45); } :root[data-theme="dark"] .erp-grid-v2-search-input:focus { border-color: var(--ziggis-tan); box-shadow: 0 0 0 2px rgba(217, 173, 109, 0.18); } /* MudTextField-based search (ErpGrid v1) — readable text + placeholder */ :root[data-theme="dark"] .erp-grid-search .mud-input-slot input { color: var(--ziggis-cream); } :root[data-theme="dark"] .erp-grid-search .mud-input-slot input::placeholder { color: rgba(245, 240, 230, 0.45); } /* Scrollbar tone — tan-on-dark instead of espresso-on-cream */ :root[data-theme="dark"] .mud-table-container::-webkit-scrollbar-thumb, :root[data-theme="dark"] .erp-grid-v2-toolbar-left::-webkit-scrollbar-thumb { background: rgba(217, 173, 109, 0.22); } :root[data-theme="dark"] .mud-table-container::-webkit-scrollbar-thumb:hover, :root[data-theme="dark"] .erp-grid-v2-toolbar-left::-webkit-scrollbar-thumb:hover { background: rgba(217, 173, 109, 0.35); } /* ---- ErpGridV2 dark-mode: pager / toolbar / empty state ------------------ The grid uses rgba(74,38,19,*) espresso tones for pager text + buttons — invisible on the dark BG. Override the lot here. */ :root[data-theme="dark"] .erp-grid-v2-toolbar { background: rgba(8, 32, 37, 0.92); border-bottom-color: rgba(94, 178, 190, 0.22); } :root[data-theme="dark"] .erp-grid-v2-footer { background: rgba(8, 32, 37, 0.90); color: rgba(245, 240, 230, 0.65); border-top-color: rgba(94, 178, 190, 0.22); } :root[data-theme="dark"] .erp-grid-v2-pager-label, :root[data-theme="dark"] .erp-grid-v2-pager-info, :root[data-theme="dark"] .erp-grid-v2-pager-sep { color: rgba(245, 240, 230, 0.65); } :root[data-theme="dark"] .erp-grid-v2-pager-btn { background: rgba(12, 44, 50, 0.70); border-color: rgba(94, 178, 190, 0.22); color: var(--ziggis-cream); } :root[data-theme="dark"] .erp-grid-v2-pager-btn:hover:not(:disabled) { border-color: var(--ziggis-tan); color: var(--ziggis-tan); background: rgba(217, 173, 109, 0.10); } :root[data-theme="dark"] .erp-grid-v2-pager-pagesize select { background: rgba(12, 44, 50, 0.70); border-color: rgba(94, 178, 190, 0.22); color: var(--ziggis-cream); } :root[data-theme="dark"] .erp-grid-v2-view-btn { background: rgba(12, 44, 50, 0.55); color: rgba(245, 240, 230, 0.75); border-color: rgba(94, 178, 190, 0.18); } :root[data-theme="dark"] .erp-grid-v2-view-btn.is-active { background: var(--ziggis-tan); color: #1A100A; } :root[data-theme="dark"] .erp-grid-v2-gear { color: rgba(245, 240, 230, 0.50); } :root[data-theme="dark"] .erp-grid-v2-gear:hover { color: var(--ziggis-tan); } /* Empty state text + column-chooser popover */ :root[data-theme="dark"] .erp-grid-v2-empty { color: rgba(245, 240, 230, 0.55); } :root[data-theme="dark"] .erp-grid-v2-popover { background: rgba(12, 44, 50, 0.95); border-color: rgba(94, 178, 190, 0.22); } :root[data-theme="dark"] .erp-grid-v2-popover-header { color: rgba(245, 240, 230, 0.55); border-bottom-color: rgba(94, 178, 190, 0.15); } :root[data-theme="dark"] .erp-grid-v2-popover-list li label { color: var(--ziggis-cream); } :root[data-theme="dark"] .erp-grid-v2-popover-list li label:hover { background: rgba(217, 173, 109, 0.10); } :root[data-theme="dark"] .erp-grid-v2-popover-footer { border-top-color: rgba(94, 178, 190, 0.15); } :root[data-theme="dark"] .erp-grid-v2-popover-reset { color: var(--ziggis-tan); } /* ---- Widget inline-color override (CSS-only, no widget edits) ---- 24 widget files use inline style="color:#0f172a" (dark navy) for counter numbers / labels. Attribute selectors targeting the literal hex string override these with !important — the only way to beat an inline style from external CSS. Scoped to dark mode so light mode is unaffected. #6b7280 (gray labels) → muted tan-cream; #9ca3af is light enough to read and is left alone. */ :root[data-theme="dark"] [style*="color:#0f172a"] { color: var(--ziggis-cream) !important; } :root[data-theme="dark"] [style*="color:#1f2937"] { color: var(--ziggis-cream) !important; } :root[data-theme="dark"] [style*="color:#374151"] { color: var(--ziggis-cream) !important; } :root[data-theme="dark"] [style*="color:#6b7280"] { color: rgba(245, 240, 230, 0.65) !important; } /* ---- .text-muted (app.css hardcodes espresso rgba — invisible on dark) ---- */ :root[data-theme="dark"] .text-muted { color: rgba(245, 240, 230, 0.55) !important; } /* ---- MudBlazor general dark-mode gap-fills ---- MudThemeProvider's PaletteDark handles MOST surfaces, but a few Mud components render with light-mode hardcoded values that slip through, or rely on inherited body color that we've already overridden. These catch the gaps. */ /* MudPaper + MudCard — teal glass with cream text */ :root[data-theme="dark"] .mud-paper { color: #F5F0E6; background: rgba(12, 44, 50, 0.88); border-color: rgba(94, 178, 190, 0.18); } :root[data-theme="dark"] .mud-card { background: rgba(12, 44, 50, 0.88); border-color: rgba(94, 178, 190, 0.18); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(94, 178, 190, 0.06) !important; } /* MudSimpleTable — teal glass treatment matching grids */ :root[data-theme="dark"] .mud-simple-table { background: rgba(12, 44, 50, 0.88); } :root[data-theme="dark"] .mud-simple-table thead th { background: rgba(8, 32, 37, 0.92) !important; color: var(--zg-muted) !important; border-bottom-color: rgba(94, 178, 190, 0.22) !important; } :root[data-theme="dark"] .mud-simple-table tbody td { border-bottom-color: rgba(94, 178, 190, 0.10) !important; } /* MudDataGrid / MudTable pager (Files page still uses raw MudDataGrid, not ErpGridV2) */ :root[data-theme="dark"] .mud-table-pagination-toolbar { color: rgba(245, 240, 230, 0.65); } :root[data-theme="dark"] .mud-table-pagination-toolbar .mud-table-pagination-select, :root[data-theme="dark"] .mud-table-pagination-toolbar .mud-table-pagination-caption { color: rgba(245, 240, 230, 0.65); } :root[data-theme="dark"] .mud-table-pagination-toolbar .mud-table-pagination-actions button { color: rgba(245, 240, 230, 0.50); } :root[data-theme="dark"] .mud-table-pagination-toolbar .mud-table-pagination-actions button:hover { color: var(--ziggis-tan); } /* MudLink — teal in dark mode to match grid edit-link palette */ :root[data-theme="dark"] .mud-link { color: #4AABB8; } :root[data-theme="dark"] .mud-link:hover { color: #6CC3CD; } /* MudChip default variant — ensure readable on dark surface */ :root[data-theme="dark"] .mud-chip.mud-chip-color-default { color: rgba(245, 240, 230, 0.75); } /* Chart of accounts tree — hardcoded espresso text flipped to cream */ :root[data-theme="dark"] .coa-name { color: var(--ziggis-cream); } :root[data-theme="dark"] .coa-num { color: var(--ziggis-tan); } /* AppRibbon tiles — espresso text → cream on dark */ :root[data-theme="dark"] .app-ribbon-tile { background: var(--zg-surface); color: var(--ziggis-cream); border-color: var(--zg-border-strong); } :root[data-theme="dark"] .app-ribbon-tile:hover:not(:disabled) { background: var(--zg-surface-soft); border-color: var(--ziggis-tan); color: var(--ziggis-cream); } :root[data-theme="dark"] .app-ribbon-tile--primary { background: var(--ziggis-tan); border-color: var(--ziggis-tan); color: #1A100A; } :root[data-theme="dark"] .app-ribbon-tile--danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.40); } /* BL-123: the ?focus deep-link target row — a soft pulse that settles to a highlight. */ .erp-grid-v2-row-focus > td { background: rgba(201, 123, 31, 0.14) !important; } .erp-grid-v2-row-focus { outline: 2px solid rgba(201, 123, 31, 0.55); outline-offset: -2px; } /* Inline supplier "New" mode — floating badge inside the taken-over combo area (owner 2026-07-17). */ .zg-new-badge { position:absolute; top:-8px; right:8px; background:var(--mud-palette-warning, #e6a23c); color:#fff; font-size:0.62rem; font-weight:700; letter-spacing:.05em; padding:1px 6px; border-radius:8px; pointer-events:none; } /* Owner 2026-07-17: slim pill chips — the default Mud chip wastes vertical space in dense grids. */ .zg-slim-chip.mud-chip { height: 20px; font-size: 0.72rem; padding: 0 8px; margin: 0; } /* MUD-5 (ADR-0134): the house PLAIN table — replaces MudTable/MudSimpleTable for input + detail tables (data GRIDS keep using ErpGridV2). Dense, borderless, matching the swept look. */ .app-table { width:100%; border-collapse:collapse; background:transparent; font-size:0.85rem; } .app-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--mud-palette-text-secondary,#8a7a66); padding:6px 10px; border-bottom:1px solid var(--mud-palette-lines-default,#e3d8c5); } .app-table td { padding:6px 10px; border-bottom:1px solid var(--mud-palette-lines-default,#f0e9dc); } .app-table .amt, .app-table th.amt { text-align:right; font-variant-numeric:tabular-nums; } .app-table tbody tr:hover td { background:var(--mud-palette-action-default-hover, rgba(0,0,0,.04)); } .app-table tr.group th { background:var(--mud-palette-background-grey,#f5efe3); } .app-table tfoot td { border-bottom:0; border-top:1px solid var(--mud-palette-lines-default,#e3d8c5); } /* ---- ADR-0060 #312 compliance-list value badges: tabular chips + subtle 16–17 curfew moon ---- */ .zg-rule-badge { font-variant-numeric: tabular-nums; } .zg-rule-glyph { color: var(--zg-muted, #8a7a66); vertical-align: text-bottom; } /* ---- ADR-0134 AppChip v2 (Mud-free pill; StatusChip's visual language) ---- */ .zg-chip { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 10px; border-radius:999px; font-size:0.78rem; font-weight:600; line-height:1; white-space:nowrap; background: color-mix(in srgb, var(--chip) 14%, transparent); color: var(--chip); vertical-align: middle; } .zg-chip--sm { height:20px; font-size:0.72rem; padding:0 8px; } .zg-chip--outlined { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 55%, transparent); } /* Filled = a stronger sibling of the light status pill (owner 2026-07-17): mild tone gradient, tone-dark text, thin ring — not the flat solid block. */ .zg-chip--filled { background: linear-gradient(180deg, color-mix(in srgb, var(--chip) 14%, #fff) 0%, color-mix(in srgb, var(--chip) 32%, #fff) 100%); color: color-mix(in srgb, var(--chip) 82%, #000); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 40%, transparent); } .zg-chip-ic { width:14px; height:14px; fill: currentColor; flex: 0 0 auto; } .zg-chip--click { cursor: pointer; } .zg-chip--click:hover { filter: brightness(0.92); } .zg-chip--default { --chip: var(--mud-palette-text-secondary, #8a7a66); } .zg-chip--primary { --chip: var(--mud-palette-primary, #7a5c43); } .zg-chip--secondary { --chip: var(--mud-palette-secondary, #9c7b5f); } .zg-chip--info { --chip: var(--mud-palette-info, #3b82f6); } .zg-chip--success { --chip: var(--mud-palette-success, #16a34a); } .zg-chip--warning { --chip: var(--mud-palette-warning, #b45309); } .zg-chip--error { --chip: var(--mud-palette-error, #dc2626); } /* ---- ADR-0134 internals swap: stack children never shrink (MudStack contract) ---- */ .zg-stack > * { flex-shrink: 0; } /* House toast stack (ADR-0134) — bottom-right, replaces MudSnackbar. */ .zg-toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 5000; display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 40px)); pointer-events: none; } .zg-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; box-shadow: 0 6px 24px rgba(40, 28, 14, .22); font-size: .9rem; color: #fff; animation: zg-toast-in .22s cubic-bezier(.2, .8, .3, 1); --toast: #3b82f6; background: var(--toast); } .zg-toast--success { --toast: #16a34a; } .zg-toast--info { --toast: #2563eb; } .zg-toast--warning { --toast: #b45309; } .zg-toast--error { --toast: #dc2626; } .zg-toast-ic { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; } .zg-toast-msg { flex: 1 1 auto; min-width: 0; line-height: 1.35; } .zg-toast-close { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; opacity: .8; line-height: 0; flex: 0 0 auto; } .zg-toast-close:hover { opacity: 1; } @keyframes zg-toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } /* Native AppBusyOverlay (ADR-0134/0026) — scrim + centered spinner panel; replaces MudOverlay. Absolute dims just a position:relative parent; fixed covers the viewport. */ .zg-busy-overlay { display: flex; align-items: center; justify-content: center; inset: 0; z-index: 1200; animation: zg-busy-fade .15s ease; } .zg-busy-overlay--absolute { position: absolute; } .zg-busy-overlay--fixed { position: fixed; } .zg-busy-overlay--light { background: rgba(255, 255, 255, .55); } .zg-busy-overlay--dark { background: rgba(20, 12, 4, .55); } :root[data-theme="dark"] .zg-busy-overlay--light { background: rgba(20, 12, 4, .5); } .zg-busy-overlay__panel { display: flex; flex-direction: column; align-items: center; gap: .55rem; } .zg-busy-overlay__msg { font-weight: 500; color: var(--mud-palette-text-primary, #3a2a1a); } @keyframes zg-busy-fade { from { opacity: 0; } to { opacity: 1; } } /* Native AppDialog (ADR-0134) — scrim + centered panel; replaces MudDialog/MudDialogProvider. Each draws its own scrim so it works service-hosted (AppDialogHost) or inline (@bind-Visible). */ .zg-dialog-scrim { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); padding: 24px; overflow: auto; outline: none; } .zg-dialog-panel { background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #3a2a1a); border-radius: 12px; box-shadow: 0 12px 48px rgba(20, 12, 4, .32); display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-width: 600px; width: auto; overflow: hidden; outline: none; animation: zg-dialog-in .16s cubic-bezier(.2, .8, .3, 1); } .zg-dialog--full { width: 100%; } .zg-dialog--extrasmall { max-width: 444px; } .zg-dialog--small { max-width: 600px; } .zg-dialog--medium { max-width: 960px; } .zg-dialog--large { max-width: 1280px; } .zg-dialog--extralarge { max-width: 1920px; } .zg-dialog-titlebar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid var(--mud-palette-lines-default, #e3d8c5); flex: 0 0 auto; } .zg-dialog-title { flex: 1 1 auto; min-width: 0; } .zg-dialog-close { margin-left: auto; background: none; border: 0; color: var(--mud-palette-text-secondary, #8a7a66); cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; flex: 0 0 auto; } .zg-dialog-close:hover { background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .06)); color: inherit; } .zg-dialog-content { padding: 20px; overflow: auto; flex: 1 1 auto; } .zg-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; flex: 0 0 auto; border-top: 1px solid var(--mud-palette-lines-default, #e3d8c5); } @keyframes zg-dialog-in { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } /* Native AppColorPicker (ADR-0134) — swatch + editable hex; replaces MudColorPicker (drops the popover too). */ .zg-colorpicker { display: inline-flex; flex-direction: column; gap: 3px; } .zg-colorpicker-label { font-size: .75rem; color: var(--mud-palette-text-secondary, #8a7a66); } .zg-colorpicker-row { display: inline-flex; align-items: center; gap: 6px; } .zg-colorpicker-swatch, .zg-theme-swatch { width: 34px; height: 30px; padding: 2px; flex: 0 0 auto; cursor: pointer; background: none; border: 1px solid var(--mud-palette-lines-default, #e3d8c5); border-radius: 6px; } .zg-colorpicker-hex { width: 6.5em; padding: 5px 7px; border: 1px solid var(--mud-palette-lines-default, #e3d8c5); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem; background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #3a2a1a); } /* Tip Preview Share (ADR-0135) — touch-first what-if distribution; shared by Payroll + Kiosk. */ .tipprev { display: flex; flex-direction: column; gap: 14px; } .tipprev-pools { display: flex; gap: 10px; flex-wrap: wrap; } .tipprev-pool { flex: 1 1 130px; border: 1px solid var(--mud-palette-lines-default, #e3d8c5); border-radius: 14px; padding: 12px 16px; background: var(--mud-palette-surface, #fff); display: flex; flex-direction: column; gap: 2px; } .tipprev-pool--total { background: linear-gradient(135deg, #f6ead2, #efdcb4); border-color: #dcc389; } .tipprev-pool-lbl { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary, #8a7a66); } .tipprev-pool-amt { font-size: 1.45rem; font-weight: 800; color: var(--mud-palette-text-primary, #3a2a1a); font-variant-numeric: tabular-nums; } .tipprev-pulls { display: flex; gap: 8px; flex-wrap: wrap; } .tipprev-pullchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dcc389; background: #fdf6e8; border-radius: 999px; padding: 6px 14px; font-size: .85rem; font-weight: 600; color: #5b4a33; } .tipprev-pullamt { font-weight: 800; color: #3a2a1a; } .tipprev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .tipprev-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--mud-palette-lines-default, #e3d8c5); border-radius: 14px; padding: 12px 14px; background: var(--mud-palette-surface, #fff); } .tipprev-card--excluded { opacity: .45; } .tipprev-avatar { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #4a2613; background: linear-gradient(135deg, #e5cca9, #d9ad6d); } .tipprev-body { flex: 1 1 auto; min-width: 0; } .tipprev-name { font-weight: 700; color: var(--mud-palette-text-primary, #3a2a1a); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tipprev-meta { display: flex; gap: 6px; align-items: center; margin: 2px 0 4px; flex-wrap: wrap; } .tipprev-basis { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; } .tipprev-basis--clock { background: #e5f2e8; color: #2f6b40; } .tipprev-basis--sched { background: #e9eef7; color: #3a5a8c; } .tipprev-basis--x { background: #efe6da; color: #8a7a66; } .tipprev-role { font-size: .72rem; color: var(--mud-palette-text-secondary, #8a7a66); } .tipprev-amts { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .tipprev-cash { font-size: 1.15rem; font-weight: 800; color: #2f6b40; font-variant-numeric: tabular-nums; } .tipprev-sub { font-size: .7rem; color: var(--mud-palette-text-secondary, #8a7a66); } .tipprev-card-amt { font-size: .8rem; color: var(--mud-palette-text-secondary, #8a7a66); font-variant-numeric: tabular-nums; } .tipprev-total { font-size: 1.05rem; font-weight: 800; color: var(--mud-palette-text-primary, #3a2a1a); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .tipprev-empty { color: var(--mud-palette-text-secondary, #8a7a66); padding: 1.2rem 0; } /* ADR-0135 TP-B7 — active-policy label + graceful-fallback notes under the pools. */ .tipprev-policy { font-size: .78rem; font-weight: 700; color: var(--mud-palette-text-secondary, #8a7a66); margin: 2px 0 6px; } .tipprev-notes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .tipprev-note { font-size: .78rem; color: #7a5514; background: #fdf3e0; border: 1px solid #e8c27a; border-radius: 8px; padding: 6px 10px; } /* ADR-0135 TP-B8 — crew-change cash reminder: big flashing amber on the kiosk Tips + Clock screens. */ .tip-crewalert { display: flex; align-items: center; gap: 12px; background: #fff4d6; color: #7a4d00; border: 2px solid #e8a33d; border-radius: 14px; padding: 16px 20px; margin: 0 0 16px; font-size: 1.15rem; font-weight: 800; animation: tip-crewflash 1.1s ease-in-out infinite; } .tip-crewalert-icon { font-size: 1.6rem; line-height: 1; } @keyframes tip-crewflash { 0%, 100% { background: #fff4d6; border-color: #e8a33d; box-shadow: 0 0 0 rgba(232, 163, 61, 0); } 50% { background: #ffe4a3; border-color: #d98a1f; box-shadow: 0 0 18px rgba(232, 163, 61, .6); } } @media (prefers-reduced-motion: reduce) { .tip-crewalert { animation: none; } } /* Native AppAccordion (ADR-0134): flat house collapsible via
/. */ .zg-accordion-panel { border-bottom: 1px solid var(--mud-palette-lines-default, #e3d8c5); } .zg-accordion-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 12px 4px; font-weight: 600; color: var(--mud-palette-text-primary, #3a2a1a); user-select: none; } .zg-accordion-summary::-webkit-details-marker { display: none; } .zg-accordion-summary:hover { color: var(--mud-palette-primary, #7a5c43); } .zg-accordion-summary--disabled { pointer-events: none; opacity: .5; } .zg-accordion-title { flex: 1 1 auto; min-width: 0; } .zg-accordion-chevron { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .15s ease; color: var(--mud-palette-text-secondary, #8a7a66); } .zg-accordion-panel[open] > .zg-accordion-summary .zg-accordion-chevron { transform: rotate(180deg); } .zg-accordion-body { padding: 4px 4px 14px; } /* Native AppFileUpload: transparent file input overlays the trigger (no JS, no Mud). */ .zg-fileupload { position: relative; display: inline-flex; } .zg-fileupload-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* Native App(Icon)Button: spinner sizing + the (unused) count pill. */ .zg-btn-ic { width: 1em; height: 1em; } .zg-btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--mud-palette-lines-default, #e3d8c5); color: var(--mud-palette-text-secondary, #8a7a66); } .zg-btn-count--on { background: var(--mud-palette-info, #3b82f6); color: #fff; } /* ---- ADR-0134 internals swap: icon / link / alert / progress (Mud-free) ---- */ .zg-tone--default { --tone: var(--mud-palette-text-secondary, #8a7a66); } .zg-tone--primary { --tone: var(--mud-palette-primary, #7a5c43); } .zg-tone--secondary { --tone: var(--mud-palette-secondary, #9c7b5f); } .zg-tone--info { --tone: var(--mud-palette-info, #3b82f6); } .zg-tone--success { --tone: var(--mud-palette-success, #16a34a); } .zg-tone--warning { --tone: var(--mud-palette-warning, #b45309); } .zg-tone--error { --tone: var(--mud-palette-error, #dc2626); } [class*="zg-tone--"] { color: var(--tone); } .zg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .zg-icon--small { width: 20px; height: 20px; } .zg-icon--medium { width: 24px; height: 24px; } .zg-icon--large { width: 32px; height: 32px; } .zg-link { color: var(--mud-palette-primary, #7a5c43); text-decoration: none; cursor: pointer; } .zg-link:hover { text-decoration: underline; } .zg-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: .875rem; --tone: var(--mud-palette-info, #3b82f6); background: color-mix(in srgb, var(--tone) 11%, transparent); color: color-mix(in srgb, var(--tone) 78%, #000); } .zg-alert--default { --tone: var(--mud-palette-text-secondary, #8a7a66); } .zg-alert--info { --tone: var(--mud-palette-info, #3b82f6); } .zg-alert--success { --tone: var(--mud-palette-success, #16a34a); } .zg-alert--warning { --tone: var(--mud-palette-warning, #b45309); } .zg-alert--error { --tone: var(--mud-palette-error, #dc2626); } .zg-alert--dense { padding: 5px 10px; } .zg-alert--outlined { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent); } .zg-alert--solid { background: var(--tone); color: #fff; } .zg-alert-ic { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--tone); } .zg-alert--solid .zg-alert-ic { color: #fff; } .zg-alert-msg { flex: 1 1 auto; min-width: 0; } .zg-alert-close { background: none; border: 0; cursor: pointer; padding: 2px; color: inherit; line-height: 0; } .zg-progress { position: relative; height: 4px; overflow: hidden; background: color-mix(in srgb, var(--tone, #7a5c43) 18%, transparent); } .zg-progress--rounded { border-radius: 999px; } .zg-progress-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--tone, #7a5c43); transition: width .3s ease; border-radius: inherit; } .zg-progress-bar--indet { width: 40%; animation: zg-indet 1.4s ease-in-out infinite; } @keyframes zg-indet { 0% { left: -40%; } 100% { left: 100%; } } .zg-progress-bar--striped { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 8px, transparent 8px 16px); background-size: 200% 100%; animation: zg-stripe 1s linear infinite; } @keyframes zg-stripe { to { background-position: 32px 0; } } /* ---- Grid buttons sit 4px shorter (owner 2026-07-17): they were padding the rows out ---- */ .erp-grid-v2 .mud-button-root.mud-button, .app-table .mud-button-root.mud-button { padding-top: 4px; padding-bottom: 4px; min-height: 32px; height: 32px; } .erp-grid-v2 .mud-button[class*="-size-small"], .app-table .mud-button[class*="-size-small"] { padding-top: 2px; padding-bottom: 2px; min-height: 26px; height: 26px; } .erp-grid-v2 .mud-icon-button, .app-table .mud-icon-button { padding: 4px; min-height: 0; height: auto; } /* ---- Pay Bills 90-day chart: playful circles + hover card (PB-2 redesign 2026-07-17) ---- */ .pb-blob { cursor: pointer; } .pb-blob circle { transition: transform .15s ease, filter .15s ease; transform-box: fill-box; transform-origin: center; } .pb-blob:hover circle { transform: scale(1.22); filter: brightness(1.1) saturate(1.15); } .pb-blob--overdue { transform-box: fill-box; transform-origin: center; animation: pb-throb 2.4s ease-in-out infinite; } @keyframes pb-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } .pb-tip { position: fixed; z-index: 4000; pointer-events: none; min-width: 230px; max-width: 330px; background: var(--mud-palette-surface, #fffaf2); border: 1px solid var(--mud-palette-lines-default, #e3d8c5); border-radius: 10px; box-shadow: 0 10px 30px rgba(60, 45, 25, .20); padding: 10px 12px; transform: translate(-50%, calc(-100% - 14px)); } .pb-tip--below { transform: translate(-50%, 18px); } .pb-tip-total { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 4px; } .pb-tip-line { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; padding: 1px 0; } .pb-tip-hint { font-size: .72rem; color: var(--mud-palette-text-secondary, #8a7d6a); font-style: italic; margin-top: 6px; } /* ---- ADR-0134 batch F: detail card, plain list, read-only field, audit timeline ---- */ .zg-detail-card { background: rgba(217, 173, 109, 0.04); } .zg-list { display: flex; flex-direction: column; } .zg-list-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .zg-list-subheader { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary, #8a7a66); padding: 8px 0 2px; } .zg-field { display: flex; flex-direction: column; gap: 2px; } .zg-field-label { font-size: 11px; color: var(--mud-palette-text-secondary, #8a7a66); } .zg-field-value { font-size: 0.875rem; min-height: 1.4em; } .zg-timeline { display: flex; flex-direction: column; } .zg-tl-item { display: flex; gap: 12px; } .zg-tl-side { flex: 0 0 auto; width: 96px; text-align: right; padding-top: 1px; } .zg-tl-rail { flex: 0 0 auto; position: relative; width: 14px; } .zg-tl-dot { position: absolute; top: 3px; left: 1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--chip, #8a7a66); background: var(--mud-palette-surface, #fffaf2); } .zg-tl-item:not(:last-child) .zg-tl-rail::after { content: ""; position: absolute; top: 18px; bottom: -2px; left: 6px; width: 2px; background: var(--mud-palette-lines-default, #e3d8c5); } .zg-tl-body { flex: 1 1 auto; padding-bottom: 14px; min-width: 0; } /* ---- ADR-0134 Mud-free primitives (AppSpacer / AppDivider / AppSpinner) ---- */ .zg-spacer { flex: 1 1 auto; } .zg-divider { border: 0; border-top: 1px solid var(--mud-palette-lines-default, #e3d8c5); margin: 0; } .zg-spin { display:inline-block; width:20px; height:20px; vertical-align:middle; border-radius:50%; border:2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color:currentColor; animation: zg-spin .8s linear infinite; } @keyframes zg-spin { to { transform: rotate(360deg); } } /* Employees list: the caller's OWN row — locked here, reached via My Profile (owner rule 2026-07-18). */ .emp-self-row td { opacity: .55; } /* AppToggleGroup XLarge (owner: Write-check mode picker) — tall, bold, big targets. */ .zg-toggle-xl .mud-toggle-item { padding: 14px 10px; font-size: 1.12rem; font-weight: 700; } /* Owner: checkboxes were hard to see — darker borders everywhere. */ .ant-checkbox-inner { border: 1.5px solid rgba(138,109,59,0.75) !important; } .app-table input[type=checkbox], .erp-grid input[type=checkbox], table input[type=checkbox] { outline: 1.5px solid rgba(138,109,59,0.6); outline-offset: -1px; border-radius: 3px; accent-color: #5b4a33; } /* Date pickers render shorter than sibling inputs — normalize control height on form rows. */ .ant-picker { width: 100%; min-height: 38px; }