/* ============================================================ GumiSync modern theme overlay In Views/Shared/_Layout.cshtml this is loaded LAST in , after vendors.bundle.css, demo6/style.bundle.css, materialize-social.css, main.css, uppy.min.css, and both Kendo stylesheets (kendo.common-material, kendo.material), so it wins ties on load order against Kendo. Views/Account/_Layout.cshtml (login page) loads neither main.css nor Kendo at all - only vendors.bundle.css, style.bundle.css and Views/Account/_Layout.css - so there this overlay only needs to load after those. See docs/superpowers/specs/2026-08-03-modern-ui-theme-overlay-design.md ============================================================ */ /* 1. Tokens */ :root { --ms-bg: #f6f7f9; --ms-surface: #ffffff; --ms-border: #e4e7ec; --ms-border-strong: #d0d5dd; --ms-text: #1a1d21; --ms-text-dim: #667085; --ms-accent: #2563eb; --ms-accent-hover: #1d4ed8; --ms-radius: 6px; --ms-row-h: 36px; --ms-surface-subtle: #fbfbfc; --ms-hover: #f4f6fa; --ms-selected: #e8effc; --ms-accent-ring: rgba(37, 99, 235, .12); } /* 2. Grid density kendo.common-material.min.css ships .k-grid td{padding:.929em 1.286em; line-height:1.6em} which yields ~77px rows. Tighten to hit --ms-row-h. */ .k-grid { font-size: 13px; color: var(--ms-text); border-color: var(--ms-border); } .k-grid td { padding: 7px 12px; line-height: 1.45; border-color: var(--ms-border); } /* CSS `height` on a table row is a floor, not a fixed size: the browser renders max(declared, content-flow height). --ms-row-h is 36px, but the measured rendered row is 39px — the extra 3px comes from the td padding/ line-height above plus the switch/chevron boxes further down this file. This rule keeps rows from ever going *below* the token; it does not pin them to it. If you tighten the token you may not see it move unless the content above also shrinks. */ .k-grid-content tr { height: var(--ms-row-h); } /* Header: readable text, hairline rule, sticky while scrolling below the fixed Metronic page header (see the position:sticky rule further down, which also removes .k-grid's overflow so the sticky offset is computed against page scroll instead of being trapped inside .k-grid). */ .k-grid-header, .k-grid-header-wrap { border-color: var(--ms-border); } .k-grid-header th.k-header { /* kendo.common-material.min.css's `.k-grid-header{padding:0!important}` targets the .k-grid-header WRAPPER DIV, not the th.k-header cells inside it, and padding is not inherited - so that rule is not a competitor here. The real barrier is specificity: kendo.common-material.min.css also has a plain (no !important) `.k-grid-header th.k-header{padding:.786em .6em}` at (0,2,1), one selector-part ahead of the (0,2,0) `.k-grid-header .k-header` this rule used to be. Matching the th descendant beats it on specificity alone; no !important needed. */ padding: 8px 12px; background: var(--ms-surface-subtle); border-color: var(--ms-border); } .k-grid-header .k-header, .k-grid-header .k-header > .k-link { color: var(--ms-text); font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: none; } /* Sticky header. main.less:438-441 (compiled into main.css, which _Layout.cshtml actually links) forces .k-grid{height:auto!important; overflow-y:hidden!important} so Kendo's own internal scroll container is disabled and the whole page scrolls instead - by design, since the grid is meant to show all rows in page flow, not in an inner scrollport. That same rule is what breaks position:sticky on .k-grid-header: an ancestor with any overflow other than visible becomes the scrolling box sticky measures against, and .k-grid never actually scrolls itself, so the header would just sit still relative to .k-grid while .k-grid scrolls away with the page. Removing .k-grid's overflow clipping (the inner .k-grid-header-wrap/.k-grid-content still clip/scroll themselves independently, so this does not reintroduce horizontal overflow) lets the sticky offset resolve against the page/viewport as intended. */ .k-grid { overflow: visible !important; /* beats main.less:438-441 (main.css) .k-grid{overflow-x:hidden;overflow-y:hidden!important} which would otherwise make .k-grid-header sticky to itself instead of the page */ } .k-grid-header { position: sticky; /* .m-header is Metronic's fixed page header; measured 80px tall at 1600x1000 with body.m-header--fixed (matches its own height:80px rule) - offset below it so the sticky grid header doesn't slide underneath it. This 80px is desktop-calibrated: below 1024px width the header itself shrinks (see the media query immediately below), so the sticky offset must follow or a gap opens above the grid header. */ top: 80px; z-index: 2; } @media (max-width: 1024px) { /* style.bundle.css drops .m-header to 60px !important below this width and m-header--fixed-mobile keeps it fixed, so the sticky offset must follow. */ .k-grid-header { top: 60px; } } /* We override .k-grid's overflow above (sticky needs it), which also strips the horizontal clip from main.less:440 and .scrollable-kendo-grid (main.less:693). CSS cannot keep overflow-x:hidden and page-level sticky together: when one axis is visible the other computes to auto. So own the horizontal guard explicitly at the inner layer rather than relying on Kendo's default, and keep it here where the override that made it necessary is visible. */ .k-grid-content { overflow-x: auto; } /* Rows: hairline separators, hover tint, no zebra */ .k-grid-content tr > td { border-bottom: 1px solid var(--ms-border); } .k-grid-content tr.k-alt, .k-grid-content tr.k-alt > td { background: var(--ms-surface); } /* main.less:446-448 compiles to `.k-grid .k-grid-content tr:hover {background-color:#F2F2F2!important}`. This rule's hover tint stays plain and still wins only because it targets `> td`, not `tr` itself: a td's own background paints over its parent tr's background, so painting the tint on the td layer shadows the tr-level !important underneath it rather than competing with it on specificity. This is load-bearing - if a future simplification changes this selector to `tr:hover` (dropping `> td`), the tint would again be painted on the tr and main.less's !important would win, silently killing it. */ .k-grid-content tr:hover > td, .k-grid-content tr.k-state-hover > td { background: var(--ms-hover); } .k-grid-content tr.k-state-selected > td { background: var(--ms-selected); } /* Row action icons should not inflate the row. `.k-grid td a[class*="grid-"]` was a substring match; its only real hit in the repo is `a.grid-user-content` in Views/StockLists/_StockListSendLogPartial.cshtml:130, an avatar-plus-name composite link, not an icon button. Applying icon-button sizing (line-height:1, 2px 4px padding) to that composite link is the wrong effect on an unverified, tenant-only route, so the anchor half is dropped; icon-button sizing now targets only .k-button. */ .k-grid td .k-button { line-height: 1; padding: 2px 4px; } /* Pager */ .k-grid-pager { padding: 6px 10px; font-size: 12px; background: var(--ms-surface-subtle); border-color: var(--ms-border); color: var(--ms-text-dim); } /* Empty grid should read as empty, not broken */ .k-grid-norecords-template { color: var(--ms-text-dim); font-size: 13px; } /* Metronic .m-switch toggle widgets (used as boolean cell editors) are the other contributor the brief's own opening line calls out: their native size is ~51px tall (30px knob track + 2px*2 own margin + a 5px .m--margin-top-5!important utility on the label + .m-switch's own 0.15rem margin-top), which alone forces the row past --ms-row-h no matter what .k-grid td padding is set to. Shrink the widget to fit. */ .k-grid-content .m-switch { height: 18px; line-height: 18px; margin-top: 0; vertical-align: middle; } .k-grid-content .m-switch label { margin: 0 !important; /* beats .m--margin-top-5{margin-top:5px!important} inline utility class */ } .k-grid-content .m-switch input:empty ~ span { height: 18px; line-height: 18px; width: 34px; margin: 0; border-radius: 9px; } .k-grid-content .m-switch input:empty ~ span:before, .k-grid-content .m-switch input:empty ~ span:after { width: 31px; border-radius: 9px; } .k-grid-content .m-switch input:empty ~ span:after { height: 14px; width: 14px; line-height: 14px; top: 2px; bottom: 2px; margin-left: 2px; font-size: .7em; } /* Icon-only row-action buttons (edit/delete) are ~35px tall by default; match them to the same reduced footprint. */ .k-grid-content .m-btn--icon-only { height: 22px; width: 22px; line-height: 22px; } /* 3. Grouping header main.less:564-569 sets background-color/color with !important and uppercases the text, so those three properties need !important here. The bar is kept visible (thin, quiet, neutral) rather than collapsed to display:none. It is the ONLY working drop target for grouping on these grids: navigatable is false on itemcategoriesGrid/ordersGrid (and the same Groupable() setup on StockLists/SendLogs), so Kendo's keyboard grouping module never initialises, even though the header still renders a static "Press ctrl + space to group" ARIA hint - that hint is inert boilerplate, not a real fallback. Hiding this bar when nobody is grouping would remove the only way to start grouping at all, which is a feature loss, not a restyle. Do not reintroduce display:none here without first re-enabling navigatable on the affected grids. */ .k-grid .k-grouping-header { background-color: var(--ms-surface-subtle) !important; /* beats main.less:565 .k-grouping-header{background-color:rgba(53,129,184,.8)!important} */ color: var(--ms-text-dim) !important; /* beats main.less:566 .k-grouping-header{color:rgba(255,255,255,.79)!important} */ text-transform: none; font-weight: 400; font-size: 11px; line-height: 14px; padding: 4px 12px; border-bottom: 1px solid var(--ms-border); } /* Once grouping IS active, the indicator chips should read as chips. main.less:1558-1561 also sets background-color/border-color on .k-group-indicator with !important, so those two need !important here too (shorthand `background`/`border` would not reliably beat a longhand !important, hence background-color/border-color below). */ .k-grid .k-grouping-header .k-group-indicator { background-color: var(--ms-surface) !important; /* beats main.less:1559 .k-group-indicator{background-color:#2874ab!important} */ border-color: var(--ms-border-strong) !important; /* beats main.less:1560 .k-group-indicator{border-color:#2874ab!important} */ border-width: 1px; border-style: solid; border-radius: var(--ms-radius); color: var(--ms-text); padding: 2px 8px; } /* kendo.material.min.css separately sets .k-grouping-header .k-link, .k-grouping-header .k-link:link{color:#fff} (no !important). An explicit color on a descendant always wins over an inherited value from the chip above regardless of specificity, so setting color on the indicator alone leaves this white text invisible against the now-light chip background; override the link explicitly. No !important needed since Kendo's own rule carries none. */ .k-grid .k-grouping-header .k-group-indicator .k-link, .k-grid .k-grouping-header .k-group-indicator .k-link:link { color: var(--ms-text); } /* 4. Buttons Pre-flight grep of main.less/Metronic bundle for competing !important on btn/radius/uppercase/background found nothing on .btn, .btn-primary, .btn-secondary, .m-btn--pill (border-radius:60px, not !important) or .k-button - those are safe to override with plain cascade order (this file loads last). The one real conflict is main.less:1412-1415 `.btn-brand{background-color:#ffbc77!important;font-weight:500!important; text-transform:uppercase;border:none}` - that is the actual class on the orange "New tenant"/"New user"/"New role" etc. portlet-head buttons, not .btn-primary as the brief assumed. text-transform there is NOT !important (our .btn rule below beats it on source order alone) and font-weight:500 already matches what we set, so only background-color needs !important, and only for the portlet-head instance - .btn-brand is used identically as the primary create-action colour on every portlet head in the app (Tenants, Users, Roles, StockLists, PartnerMails, PartnerFTPs), so recolouring it there is exactly the re-theme intended, not scope creep. border-color is NOT touched below: main.less:1416 sets `border: none` (border-style:none, plain, no !important), which no border-color value can paint over, so a border-color rule here would be completely inert - there is nothing for it to beat and nothing for it to render. */ .btn { border-radius: var(--ms-radius); text-transform: none; font-weight: 500; font-size: 13px; padding: 7px 14px; transition: background-color .12s ease, border-color .12s ease; } /* Metronic pill modifier loses its pill, deliberately */ .btn.m-btn--pill { border-radius: var(--ms-radius); } /* Row-action icon buttons (_KendoTemplate.cshtml: edit/delete on essentially every grid) carry m-btn--icon-only m-btn--pill and are rendered by Metronic as circles via .btn.m-btn--pill{border-radius:60px} (no !important, so the plain .btn.m-btn--pill rule above already drops them to --ms-radius as a side effect). Called out here as its own rule, deliberate and verified rather than incidental: squaring them to --ms-radius keeps one consistent radius across every button in the app (the approved direction), and is arguably more current than circles. Section 2 already sizes these to 22x22px; no width/height change here. */ .btn.m-btn--icon-only.m-btn--pill { border-radius: var(--ms-radius); } .btn-primary, .btn.m-btn--air.btn-primary { background-color: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-surface); box-shadow: none; } .btn-primary:hover, .btn-primary:focus { background-color: var(--ms-accent-hover); border-color: var(--ms-accent-hover); } /* The real orange "New X" portlet-head button is .btn-brand, not .btn-primary (see comment above). Scoped to .m-portlet__head so other uses of Metronic's colour classes elsewhere keep their own meaning. No border-color here: main.less:1416 sets border:none (border-style:none) on .btn-brand, plain, with no !important, and the overlay never sets a border-style that would let a border-color paint - so a border-color declaration would be inert. */ .m-portlet__head .btn-brand { background-color: var(--ms-accent) !important; /* beats main.less:1413 .btn-brand{background-color:#ffbc77!important} */ color: var(--ms-surface); } .m-portlet__head .btn-brand:hover, .m-portlet__head .btn-brand:focus { background-color: var(--ms-accent-hover) !important; /* beats main.less:1413 .btn-brand{background-color:#ffbc77!important} */ } /* Secondary/default reads as quiet, not as another primary */ .btn-secondary, .btn-default { background-color: var(--ms-surface); border-color: var(--ms-border-strong); color: var(--ms-text); box-shadow: none; } .btn-secondary:hover, .btn-default:hover { background-color: var(--ms-hover); } /* Accessible focus ring on every button and Kendo button. style.bundle.css has `html a, html button, body a, body button {outline:none!important}` - a low-specificity element selector that the initial pre-flight grep (anchored to selectors starting with ".btn") missed entirely, discovered only by testing real keyboard focus and finding the ring silently not rendering despite this rule matching by specificity/order alone. !important is required here to beat it. */ .btn:focus-visible, .k-button:focus-visible { outline: 2px solid var(--ms-accent) !important; /* beats style.bundle.css `html a, html button, body a, body button{outline:none!important}` */ outline-offset: 2px; box-shadow: none; } .k-button { border-radius: var(--ms-radius); font-size: 13px; } /* 5. Form controls Competing rules found in main.less/style.bundle.css/Kendo (the app links kendo.common-material.min.css and kendo.material.min.css, not kendo.material-v2): - .k-state-focused (kendo.material.min.css) sets border-color/box-shadow via a single class selector, no !important. Our `.k-state-focused.k-dropdown-wrap` etc. below is a two-class compound selector, which already outranks it by specificity alone - no !important needed. - Bare `label`: no competing rule anywhere. Kept unscoped, because Metronic's own label-bearing widgets (.m-checkbox, .m-switch, the login page's "Remember me" checkbox) style their text through class selectors (e.g. `.m-checkbox{font-size:1rem}`), which by specificity outrank a bare element selector - so this rule cannot touch their unrelated text sizing/weight even though it matches the same