/* ============================================================================= Aretail — visual facelift (ported from MISTRY MONT 2026-09-11) ============================================================================= WHAT THIS IS A pure presentation layer. No view overrides, no layout changes, no JS, no metadata beyond the single `cssList` entry that loads this file. HOW IT IS LOADED `custom/Espo/Custom/Resources/metadata/app/client.json` -> `cssList`, listed BEFORE `client/custom/css/custom.css` on purpose: `custom.css` carries FUNCTIONAL styling (finance blur, stock thumbnails, quotation fullscreen dialog, stream panel, inline-edit affordances) and must keep the last word on any selector that overlaps. ROLLBACK Remove the one `cssList` array entry. Nothing else references this file. ONE COMPANION OUTSIDE THIS FILE Section 13 remaps icons by Font Awesome CLASS, so the five entities that carried no `iconClass` at all had nothing to remap. They were given one in `custom/Espo/Custom/Resources/metadata/clientDefs/{PriceListItem, PriceListCategory,DocumentFolder,SummaryVatRates,VatNumberValidation}.json` — a normal `fas fa-*` value, so those entities read correctly everywhere, not only where this stylesheet reaches. Those five files stand on their own and are NOT part of this rollback. WHAT IT LAYERS OVER The active theme is AutoERP (`client/modules/autocrm-themes/css/themes/autoerp.css`), which is driven by ~588 CSS custom properties on `:root`. Wherever a theme variable can carry the change, the variable is retuned instead of a selector being fought — that is why this file is short for what it does. VERIFIED AGAINST THE LIVE DOM (9.3.10, 2026-07-26). Selectors that could not be confirmed to match were deleted rather than shipped; each deletion is noted in the section it belonged to. ========================================================================== */ /* ----------------------------------------------------------------------------- 0. FONTS — self-hosted IBM Plex Sans (+ Condensed) ----------------------------------------------------------------------------- Self-hosted, NOT `@import url(fonts.googleapis.com)`: - this instance has CSP config keys (`clientCspScriptSourceList`, `clientCspDisabled`), so an external stylesheet host may be blocked; - an external `@import` blocks first paint; - the AutoERP theme already self-hosts its own webfont (Poppins), so this matches the deployment's existing pattern. Subsets: latin + latin-ext only. latin-ext is REQUIRED — the UI is Czech (ě š č ř ž ý á í é ů). Sans is a VARIABLE font: one file per subset serves 400/500/600, which is why the three faces share a `src`. Total added weight: 109 KB (2 x Sans 76 KB, 2 x Condensed 35 KB). -------------------------------------------------------------------------- */ /* IBM Plex Sans — variable, latin */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* IBM Plex Sans — variable, latin-ext (Czech diacritics live here) */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* IBM Plex Sans Condensed 600 — micro-labels (column heads, panel titles, pills) */ @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ----------------------------------------------------------------------------- 1. TOKENS ----------------------------------------------------------------------------- `--mm-*` are ours. The `--brand/--table/--navbar/...` overrides below them are EXISTING AutoERP theme variables, retuned deliberately — each one is the theme's own single source of truth for that value, so retuning it is safer and smaller than out-shouting the selectors that read it. -------------------------------------------------------------------------- */ :root { --mm-ink: #0E1621; /* sidebar, headings */ --mm-ink-2: #24313E; /* body copy on paper */ --mm-paper: #F3F5F7; /* app background */ --mm-surface: #FFFFFF; /* panels, lists, modals */ --mm-surface-2: #FBFCFD; /* list header, quiet fills */ --mm-steel: #5C6B7C; /* secondary text and icons */ --mm-steel-2: #7B8896; /* micro-labels */ --mm-line: #E3E7EC; /* hairlines */ --mm-accent: #E0007A; /* the magenta dot in the logo */ --mm-accent-d: #B80064; /* accent, pressed */ --mm-accent-pale:#FDEAF3; /* accent wash (selected rows) */ --mm-ok: #147D4B; --mm-ok-bg: #E4F4EC; --mm-wip: #9A6206; --mm-wip-bg: #FBF0DC; --mm-err: #C0293A; --mm-err-bg: #FBE7E9; --mm-idle: #5C6B7C; --mm-idle-bg: #EDF0F3; --mm-note: #2F5AA8; --mm-note-bg: #E8EEF9; --mm-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --mm-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --mm-radius: 8px; --mm-radius-sm: 6px; --mm-control-h: 34px; /* ---- retuned AutoERP theme variables ---------------------------------- */ /* page background: theme #eaecef -> paper */ --body-bg: var(--mm-paper); /* sidebar: theme ships a gradient (#152b47 -> #06111f); flat ink instead */ --navbar-inverse-bg: var(--mm-ink); --navbar-inverse-link-active-bg: rgba(255, 255, 255, .09); /* list header: theme #728194 (dark slate, white text) -> pale surface. The text colour is NOT a variable in the theme (it is a literal `color: rgb(255,255,255)` on `table.table > thead th`), so section 8 overrides that selector explicitly as well. */ --table-th-bg-color: var(--mm-surface-2); --table-th-hover-bg-color: #EEF2F6; --table-th-height: 38px; --table-td-height: 46px; --table-new-border-color: var(--mm-line); /* dropdowns: theme radius 12px -> 6px */ --dropdown-border-radius: var(--mm-radius-sm); --dropdown-border: var(--mm-line); --dropdown-box-shadow: 0 6px 20px rgba(14, 22, 33, .10); --dropdown-link-hover-bg: #F1F4F7; /* form controls: theme height 40px -> 34px, matching `--mm-control-h`. BUG FOUND, 2026-07-26: `.form-control` itself was already 34px (this file's section 10 sets it directly), but the theme reads THIS separate variable for every button living inside an `.input-group-btn` — the date-picker toggle and the link field's "^"/"x" buttons — plus for `.selectize-input`/`.form-control.selectize-control.single` (the link-field and multi-enum widgets). Two different variables governed one visual row, so the attached button stood 6px taller than the input beside it. Retuning this one variable fixes the button height AND the selectize widgets in one place, per this section's own rule: retune the theme's variable rather than fight the selectors that read it. */ --form-control-height: var(--mm-control-h); /* panels / wells. The heading band is retuned through the theme variable because the winning rule is `body .panel-default > .panel-heading` (specificity 0,2,1) — a plain `.panel > .panel-heading` rule loses to it, and out-specifying the theme here would be a worse trade than retuning its own value. Separation is carried by the hairline instead. */ --panel-default-heading-bg: transparent; --panel-default-border: var(--mm-line); --default-border-color: var(--mm-line); /* modals */ --modal-box-shadow: 0 24px 64px rgba(14, 22, 33, .22); --modal-backdrop-bg: rgba(14, 22, 33, .38); } /* Every variable above has at least one reader in the theme — counted by walking `document.styleSheets` for `var(--name)`, lowest is `--table-td-height` with 1 (`--form-control-height` has 8). Four more were written in an earlier pass and removed again because nothing in the loaded CSS reads them at all: `--navbar-inverse-hover-bg`, `--table-active-border-color`, `--well-border`, `--modal-header-bg`. A variable override with no reader is a dead rule that reads as working code. */ /* ----------------------------------------------------------------------------- 2. BASE TYPOGRAPHY ----------------------------------------------------------------------------- The theme sets `Poppins, sans-serif` on `body` and re-declares it on form controls, so the family is restated on the control elements too — a `body` rule alone does not reach them. `tnum` gives tabular (equal-width) figures, so numbers line up column-wise in lists without needing a separate mono face. -------------------------------------------------------------------------- */ body { font-family: var(--mm-sans); font-size: 13.5px; font-feature-settings: 'tnum' 1, 'kern' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input, select, textarea, button, .btn, .form-control, .selectize-input, .selectize-dropdown, .modal, .dropdown-menu, table.table { font-family: var(--mm-sans); font-feature-settings: 'tnum' 1, 'kern' 1; } /* Panel headings are deliberately NOT in this list — they are micro-labels, not headings, and section 10 gives them the condensed uppercase treatment. */ h1, h2, h3, h4, h5, h6, .modal-title { font-family: var(--mm-sans); font-weight: 600; letter-spacing: -.015em; } /* ----------------------------------------------------------------------------- 3. LINKS ----------------------------------------------------------------------------- The draft asks for links to drop their brand colour and read as ink, with a hover underline. Colour alone must not be the only affordance once the colour is gone (WCAG 1.4.1), so a content link keeps a permanent dotted underline that solidifies on hover — the draft's own list-link mechanism, used as the general one. SCOPE CORRECTION, measured on the live DOM: an earlier pass used `#main a:not(.btn):not(.action)...`, which also caught the column-sort anchors (`th > a.sort`), pagination, mass actions and the `.mm-cat-link` category menu from `custom.css` — 30 of the ~200 anchors on a list page are navigational, the rest are controls. The treatment is therefore bound to list cells, where every anchor is either a record link (`a.link`, or `a.text-default` for link fields such as `supplier`) or a row action (`a.action` / `[data-action]` — exactly the two markers the row buttons carry in this build). Both link flavours have to be covered or one column reads ink and the next reads teal in the same row. DROPPED vs the draft: "ALL links inherit ink colour". Detail-view link fields and stream links are bare `` with no stable class, so recolouring them means either retuning `--link-color` for every consumer (`.btn-link`, the search button, pagination icons — 100+ screens, none of them verifiable in one pass) or guessing at selectors. The list is where the draft named the treatment; that is where it is applied. -------------------------------------------------------------------------- */ #main a.link, .list > table > tbody > tr > td.cell a:not(.action):not([data-action]) { color: var(--mm-ink-2); text-decoration: none; border-bottom: 1px dotted rgba(92, 107, 124, .55); } #main a.link:hover, #main a.link:focus, .list > table > tbody > tr > td.cell a:not(.action):not([data-action]):hover, .list > table > tbody > tr > td.cell a:not(.action):not([data-action]):focus { color: var(--mm-accent-d); border-bottom-color: var(--mm-accent-d); border-bottom-style: solid; text-decoration: none; } #main a:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; border-radius: 2px; } /* ----------------------------------------------------------------------------- 4. SIDEBAR ----------------------------------------------------------------------------- DOM confirmed on this build: #navbar li.not-in-more.tab > a.nav-link (item) #navbar li.not-in-more.tab.tab-divider .nav-divider-text > .label-text (section heading) CORRECTION vs the draft: the draft keyed rules on `body.has-vertical-navbar` and on `#navbar .tabs > li > a`. Neither matches — the body class here is `has-navbar` (plus `minimized` when collapsed) and the reliable item selector is `#navbar .tab > a`. All sidebar rules below use `#navbar li.not-in-more.tab` (see the BUG note further down — an earlier pass dropped `.not-in-more` and leaked sidebar text colour into the "..." overflow panel). DROPPED vs the draft: the 244px sidebar width (theme is 210px). The 210px value is woven through 12+ theme rules — `#header` width, `.navbar-right` right padding, `ul.tabs` width, three `left: 210px` tab-group dropdown positions, the footer margin, the side-menu backdrop, the `.contains-mattermost` variant, and `> .content { padding-left: 225px }`. Changing one without all of the others misplaces the flyout menus. Width left alone; the draft's 1200px "narrow the sidebar to 216px" rule is dropped for the same reason. Per-tab colours come from INLINE `style="color: ..."` written by Admin -> Tabs, so `!important` is required to unify them. Scoped to `#navbar` so dashlet, button and page-header icons keep their colours. BUG FOUND AND FIXED, 2026-07-26: the "..." overflow panel (`li.dropdown.more > ul.dropdown-menu.more-dropdown-menu`) renders its entries as `li.in-more.tab > a.nav-link > span.short-label / span.full-label` — the IDENTICAL markup the visible sidebar uses (`li.not-in-more.tab`), just with `in-more` instead of `not-in-more`. Every rule below used to read `#navbar li.tab`, which matches BOTH, so the light-on-dark sidebar text colours (`.short-label` 52% white !important, `.full-label` 74% white) were painted onto the overflow panel's white `.dropdown-menu` background too — confirmed live via computed style: `.full-label` `rgba(255,255,255,.74)` on `.more-dropdown-menu` background `rgb(254,254,254)`. The panel's own section headings stayed legible only because the theme carries an extra, more specific rule for that one case (`body[data-navbar=side] #navbar .navbar ul.tabs>li.more>ul>li.tab-divider>div>.label-text{color:var(--gray-light)}` in `autocrm-themes/css/themes/autoerp.css`) that out-specifies our `color: inherit`; nothing analogous exists for `.short-label`/`.full-label`, so the items had nothing to fall back on. Fix: every item/active/divider selector below is scoped to `.not-in-more`, exactly as this section's own DOM comment already documented as the confirmed selector. The overflow panel now falls through to the theme's own `.dropdown-menu>li>a{color:var( --dropdown-link-color)}` (dark), which is what makes the "OBCHOD" heading readable in the first place. */ #navbar li.not-in-more.tab > a.nav-link { border-radius: var(--mm-radius-sm); padding-top: 7px; padding-bottom: 7px; height: 36px; transition: background-color .12s ease, color .12s ease; } #navbar li.not-in-more.tab > a.nav-link .short-label { color: rgba(255, 255, 255, .52) !important; font-size: 16px; transition: color .12s ease; } #navbar li.not-in-more.tab > a.nav-link .full-label { color: rgba(255, 255, 255, .74); font-size: 13.5px; letter-spacing: -.005em; } #navbar li.not-in-more.tab > a.nav-link:hover .short-label, #navbar li.not-in-more.tab.active > a.nav-link .short-label { color: #FFFFFF !important; } #navbar li.not-in-more.tab > a.nav-link:hover .full-label, #navbar li.not-in-more.tab.active > a.nav-link .full-label { color: #FFFFFF; } /* Active item: 9% white wash + a 3px accent lane marker. `ul.tabs` carries 5px padding, so `left: -5px` puts the marker flush with the sidebar edge in both the expanded and the `minimized` state. Scoped to `.not-in-more`: the marker is positioned relative to the sidebar column, so an `.in-more` twin carrying `.active` would draw it at a meaningless offset inside the floating overflow panel instead. */ #navbar li.not-in-more.tab.active > a.nav-link { background-color: rgba(255, 255, 255, .09); } #navbar li.not-in-more.tab.active > a.nav-link::before { content: ""; position: absolute; left: -5px; top: 3px; bottom: 3px; width: 3px; border-radius: 0 2px 2px 0; background-color: var(--mm-accent); } /* Section headings ("Obchod", "Výroba", ...) */ #navbar li.not-in-more.tab.tab-divider .nav-divider-text { font-family: var(--mm-cond); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .34); } #navbar li.not-in-more.tab.tab-divider .nav-divider-text .label-text { color: inherit; } /* Thin scrollbar for the tab column (96 tabs; it scrolls). */ #navbar ul.tabs::-webkit-scrollbar, #navbar .navbar-body::-webkit-scrollbar { width: 6px; } #navbar ul.tabs::-webkit-scrollbar-track, #navbar .navbar-body::-webkit-scrollbar-track { background: transparent; } #navbar ul.tabs::-webkit-scrollbar-thumb, #navbar .navbar-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; } /* ----------------------------------------------------------------------------- 5. TOP BAR ----------------------------------------------------------------------------- `#navbar .navbar-right` is the white utility strip (search + icon actions). The theme gives it no bottom border; a hairline separates it from the paper. -------------------------------------------------------------------------- */ #navbar .navbar-right { box-shadow: none; border-bottom: 1px solid var(--mm-line); } /* Global search: theme radius is 25px (a pill) -> squared to the app's 6px. `!important` is required and is not laziness: the theme sets `body[data-navbar="side"] input.global-search-input { border-radius: var(--border-radius) !important }`, and `--border-radius` (25px) is the theme's global pill radius used by other components, so it must not be retuned wholesale. */ #navbar .global-search-container .form-control.global-search-input { height: var(--mm-control-h); border-radius: var(--mm-radius-sm) !important; background-color: var(--mm-surface-2); border: 1px solid var(--mm-line); font-size: 13.5px; box-shadow: none; transition: border-color .12s ease, background-color .12s ease; } #navbar .global-search-container .form-control.global-search-input:focus { background-color: var(--mm-surface); border-color: var(--mm-accent); box-shadow: none; outline: 0; } /* Utility icons: square hit area with a quiet hover */ #navbar .navbar-right > ul > li > a, #navbar .navbar-right .menu-container > a { color: var(--mm-steel); border-radius: var(--mm-radius-sm); transition: background-color .12s ease, color .12s ease; } #navbar .navbar-right > ul > li > a:hover, #navbar .navbar-right .menu-container > a:hover { background-color: #F1F4F7; color: var(--mm-ink); } /* ----------------------------------------------------------------------------- 6. BUTTONS ----------------------------------------------------------------------------- 34px tall, 6px radius, no shadow or text-shadow, 1px press translate. `.btn-primary` becomes the magenta accent. `.btn-success` and `.btn-danger` are deliberately LEFT ALONE — in this deployment they encode meaning on record actions ("Generovat Revolut kartu" is red because it is consequential). -------------------------------------------------------------------------- */ .btn { border-radius: var(--mm-radius-sm); box-shadow: none; text-shadow: none; font-weight: 500; letter-spacing: -.005em; transition: background-color .12s ease, border-color .12s ease, transform .06s ease; } .btn:active, .btn.active { box-shadow: none; } /* The 1px press travel is bound to `:active` (the pointer state) ONLY. Espo also puts the `.active` CLASS on the selected record tab (`.tabs.middle-tabs > .btn.btn-text.active`); an earlier pass included `.btn.active` here and left the selected tab permanently shifted 1px down — measured as `transform: matrix(1,0,0,1,0,1)` on "Detail" and "Přehled". */ .btn:active { transform: translateY(1px); } .btn-default { background-color: var(--mm-surface); border-color: var(--mm-line); color: var(--mm-ink-2); } .btn-default:hover, .btn-default:focus { background-color: #F1F4F7; border-color: #CFD7E0; color: var(--mm-ink); } .btn-primary { background-color: var(--mm-accent); border-color: var(--mm-accent); color: #FFFFFF; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--mm-accent-d); border-color: var(--mm-accent-d); color: #FFFFFF; } /* The primary create action on a list header. The draft targeted `.btn.action[data-action="create"]` and `.create-button > .btn`. NEITHER matches this build. The button is `.btn.btn-default.btn-xs-wide.main-header-manu-action.action[data-action="create"]`, and the theme styles it at `.page-header .header-buttons > .main-header-manu-action[data-action=create]` — three classes plus an attribute, so a plain `.btn.main-header-manu-action` override loses on specificity and silently does nothing. Matched here at equal specificity instead. The theme turns it into a 50px green circle and BLANKS THE LABEL (`span:not(.fas){font-size:0}`), which is why the screen shows a bare green "+". The design calls for an inline magenta pill that says what it does, so width, radius, padding and the label are all restored. `border-radius` needs `!important` because the theme sets it that way; nothing else does. Deliberately NOT done by recolouring `--btn-success-bg`: that variable is shared with every other success button, and those encode meaning on record actions. Only the create action moves to the accent. */ .page-header .header-buttons > .main-header-manu-action[data-action="create"], .page-header .header-buttons > .main-header-manu-action[data-action="quickCreate"] { width: auto; min-width: 0; max-width: none; height: 34px; padding: 0 14px; gap: 7px; border-radius: var(--mm-radius-sm) !important; background-color: var(--mm-accent); border-color: var(--mm-accent); color: #FFFFFF; } .page-header .header-buttons > .main-header-manu-action[data-action="create"]:hover, .page-header .header-buttons > .main-header-manu-action[data-action="quickCreate"]:hover { background-color: var(--mm-accent-d); } /* Give the label back. The theme zeroes it to leave only the glyph. */ .page-header .header-buttons > .main-header-manu-action[data-action="create"] span:not(.fas):not(.fa), .page-header .header-buttons > .main-header-manu-action[data-action="quickCreate"] span:not(.fas):not(.fa) { font-size: 13px; line-height: 1; } .page-header .header-buttons > .main-header-manu-action[data-action="create"] span.fas, .page-header .header-buttons > .main-header-manu-action[data-action="create"] span.fa, .page-header .header-buttons > .main-header-manu-action[data-action="quickCreate"] span.fas, .page-header .header-buttons > .main-header-manu-action[data-action="quickCreate"] span.fa { font-size: 13px; color: #FFFFFF; } .btn:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; } /* ----------------------------------------------------------------------------- 7. PAGE HEADER ----------------------------------------------------------------------------- DOM: `.page-header .header-title` (an `

`) whose first child is `span.color-icon.fas.fa-square` carrying an INLINE per-entity colour. The square is replaced by a 3px accent lane marker on the heading itself. Scoped to `.page-header` so `.color-icon` keeps working in link fields, breadcrumbs elsewhere and dropdowns. -------------------------------------------------------------------------- */ .page-header { border-bottom: 0 none; } /* ALIGNMENT. Measured on `#Pallet` at 1280: `.page-header` starts on the content column (245) like `.search-container`, `.list-container` and `.list > table`, but the HEADING started at 253 and the header buttons ended at 1237 instead of 1245 — the block was inset 8px on both sides while nothing below it was. The source is the theme's own grid-gutter emulation, ONE rule that applies to every child of the header row: autoerp.css `.page-header .page-header-row > div { position: relative; min-height: 1px; padding-left: 8px; padding-right: 8px }` (`client/css/espo/espo.css` cancels it with `padding-left: unset !important`, but that file is NOT loaded — the AutoERP theme replaces it wholesale.) So it is removed at that selector, at equal specificity (0,2,1) and from a later sheet, and on BOTH sides: the heading, the breadcrumbs and the header buttons are all children of that row and were all inset by the same rule. Doing it here rather than pulling the marker out with a negative margin is what makes it hold on detail views, the dashboard and every other screen that renders a `.page-header` — the marker is positioned at the heading's own `left: 0`, so once the heading sits on the content column, so does it. */ .page-header .page-header-row > div { padding-left: 0; padding-right: 0; } .page-header .header-title { position: relative; padding-left: 14px; font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: var(--mm-ink); /* RHYTHM. Bootstrap's `h3` margin-top is a full line (21px) and it opened a 51px hole between the top bar and the heading. 2px puts the heading 32px below the bar, which is still a clear break and 19px less air. The bottom margin is left at the theme's 7px: with `.page-header`'s own 10px it makes the 17px step down to the search row, which reads correctly. */ margin-top: 2px; } .page-header .header-title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 2px; background-color: var(--mm-accent); } .page-header .header-title .color-icon { display: none; } /* The other 20px of the loose header block. `.search-container` renders four children; on a list with no advanced filter applied, `.advanced-filters` is a ZERO-HEIGHT element that still spends its `margin-bottom: 20px`. It cannot be caught with `:empty` — the template leaves a newline text node inside it — so it is matched by "has no element children". `:has()` is already the mechanism section 8 uses for checked rows, so this adds no new browser requirement. The margin comes back the moment a filter is added. */ .search-container > .advanced-filters:not(:has(> *)) { margin-bottom: 0; } /* ----------------------------------------------------------------------------- 8. LIST ----------------------------------------------------------------------------- DOM CORRECTION vs the draft: the list table carries class `table` only, inside `div.list` — `table.list` never matches. Everything below is keyed on `.list > table`, and the header cells are `th.checkbox-cell` / `th.field-header-cell`. White surface, hairline frame, 8px radius, pale header, hairline row separators — no zebra, no per-row card, no shadow. DROPPED vs the draft: right-aligned numeric cells with tabular figures. Espo emits every body cell as a bare `` with no type marker, so "numeric" cannot be selected without hardcoding field names per entity. Tabular figures are delivered globally instead, via `font-feature-settings: 'tnum'` in section 2. -------------------------------------------------------------------------- */ .list > table { background-color: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } /* Header row: the theme paints it dark slate with LITERAL white text (`table.table > thead th { color: rgb(255,255,255) }`), so both the cell and its sort anchor must be recoloured, not just the background variable. */ .list > table > thead > tr > th, .list > table > thead > tr > th > a, .list > table > thead > tr > th.field-header-cell, .list > table > thead > tr > th.checkbox-cell { background-color: var(--mm-surface-2); color: var(--mm-steel-2); font-family: var(--mm-cond); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } /* The hairline belongs to the cell, not to the sort anchor inside it. */ .list > table > thead > tr > th { border-bottom: 1px solid var(--mm-line); } .list > table > thead > tr > th:hover, .list > table > thead > tr > th:hover > a { background-color: var(--mm-surface-2); color: var(--mm-ink); } /* Body rows: hairline separators only. */ .list > table > tbody > tr > td.cell { border-top: 1px solid var(--mm-line); background-color: transparent; vertical-align: middle; } .list > table > tbody > tr:first-child > td.cell { border-top: 0 none; } .list > table > tbody > tr.list-row { transition: background-color .1s ease; } .list > table > tbody > tr.list-row:hover > td.cell { background-color: #F6F8FA; } /* 2px accent inset on the first cell of the hovered row. */ .list > table > tbody > tr.list-row:hover > td.cell:first-child { box-shadow: inset 2px 0 0 0 var(--mm-accent); } /* Checked rows read as selected. */ .list > table > tbody > tr.list-row:has(input.record-checkbox:checked) > td.cell { background-color: var(--mm-accent-pale); } .list > table input[type="checkbox"] { accent-color: var(--mm-accent); } /* ----------------------------------------------------------------------------- 9. STATUS LABELS — the pills ----------------------------------------------------------------------------- DOM CORRECTION vs the draft: the draft's whole section targeted `.label-badge` and `.label-style-*`. Neither class exists in this build. A status cell renders as: … The AutoERP theme already paints these via table.table > tbody > tr > td[data-name="status"] > span (base pill) table.table > tbody > tr > td[data-name="status"] .text-* (colour pair) ...but with `display: inline`, which is exactly why a two-word status wraps onto two lines and reads as broken. The fix is the theme's own selector plus `white-space: nowrap`. `.text-default` and the five `.text-*` variants below are the complete set the theme styles; `.label-*` twins are matched too because the theme pairs them. The full value stays available on hover — Espo already emits `title="…"` — so the ellipsis in a narrow column loses nothing. debt: a long status still ellipsises. Measured on `#Pallet` at 1600px: the pill gets 98px because `Resources/layouts/Pallet/list.json` gives the `status` column `width: 10%`; "ZABALENÁ / KOMPLETNÍ" needs 133px at this size, and no legible type size closes a 35px gap. Condensed 10.5px / .04em tracking / 7px side padding is the tightest setting that still fits every single-word status ("ROZPRACOVANÁ" = 94px). CEILING: the column width. UPGRADE PATH: widen the `status` column in the entity's list layout — a layout change, deliberately out of scope for a CSS-only facelift. -------------------------------------------------------------------------- */ table.table > tbody > tr > td[data-name="status"] > span { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-family: var(--mm-cond); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 16px; padding: 3px 7px; border-radius: 4px; color: var(--mm-idle); background-color: var(--mm-idle-bg); } table.table > tbody > tr > td[data-name="status"] > span.text-success, table.table > tbody > tr > td[data-name="status"] > span.label-success { color: var(--mm-ok); background-color: var(--mm-ok-bg); } table.table > tbody > tr > td[data-name="status"] > span.text-warning, table.table > tbody > tr > td[data-name="status"] > span.label-warning { color: var(--mm-wip); background-color: var(--mm-wip-bg); } table.table > tbody > tr > td[data-name="status"] > span.text-danger, table.table > tbody > tr > td[data-name="status"] > span.label-danger { color: var(--mm-err); background-color: var(--mm-err-bg); } table.table > tbody > tr > td[data-name="status"] > span.text-primary, table.table > tbody > tr > td[data-name="status"] > span.label-primary, table.table > tbody > tr > td[data-name="status"] > span.text-info, table.table > tbody > tr > td[data-name="status"] > span.label-info { color: var(--mm-note); background-color: var(--mm-note-bg); } /* ----------------------------------------------------------------------------- 10. PANELS, DETAIL, FORM CONTROLS ----------------------------------------------------------------------------- NOTE: `custom.css` owns the detail-view field boxes, the field labels (`.record .detail .label-text`) and every inline-edit affordance, and loads AFTER this file — so those keep the last word by design. Only the panel frame and the panel title are shaped here. -------------------------------------------------------------------------- */ .panel { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); box-shadow: none; } .panel > .panel-heading { font-family: var(--mm-cond); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-steel); background-color: transparent; border-bottom: 1px solid var(--mm-line); } .panel > .panel-heading .panel-title, .panel > .panel-heading .panel-heading-title { font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; } /* Form controls: one height, one radius, accent focus. */ .form-control { height: var(--mm-control-h); border-radius: var(--mm-radius-sm); box-shadow: none; font-size: 13.5px; } textarea.form-control { height: auto; } .form-control:focus { border-color: var(--mm-accent); box-shadow: none; outline: 0; } /* Input-group merging: the date-picker toggle and the link field's "^"/"x" buttons (`.input-group > .input-group-btn > .btn`) must read as part of the SAME control as the `.form-control` beside them. BUG FOUND, 2026-07-26 (the second half of the seam — height was the theme variable fixed in section 1). The trailing button's outer corner is rounded by the theme itself, at higher specificity than a plain `.btn`: autoerp.css `.input-group>.input-group-btn:not(:first-child)>.btn:last-child { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius) }` `--border-radius` is the theme's global PILL radius (25px) — the same one section 5 already fights on the search input — so every trailing button rendered as a half-circle notch. Matched here at equal specificity, restated in all four contexts `custom.css` styles `.form-control` in (edit, detail inline-edit, modal, fullscreen quotation dialog), since that is where these buttons actually appear. The background/border restate `custom.css`'s own field-box literals (`#F4F9FF` / `#B9D4F0`, `custom.css` ~line 78-82) rather than this file's own surface tokens, because the visible seam is a colour join against THAT box, not against a plain `.form-control`. debt: this duplicates two literals `custom.css` owns; ceiling is `custom.css`'s field-box colours changing without this file changing too. Upgrade path: `custom.css` exposes them as CSS variables this file can read instead of restating. */ .record .edit .input-group > .input-group-btn > .btn, .record .detail .input-group > .input-group-btn > .btn, .modal-body .input-group > .input-group-btn > .btn, .dialog-fullscreen-quotation .input-group > .input-group-btn > .btn { background-color: #F4F9FF; border-color: #B9D4F0; } .record .edit .input-group > .input-group-btn:not(:first-child) > .btn:last-child, .record .detail .input-group > .input-group-btn:not(:first-child) > .btn:last-child, .modal-body .input-group > .input-group-btn:not(:first-child) > .btn:last-child, .dialog-fullscreen-quotation .input-group > .input-group-btn:not(:first-child) > .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* Required-field marker. AUDIT FINDING: `.required-sign` is a bare ` class="required-sign"> *` sibling of `.label-text` inside `