/* ============================================================================= * AI eShop Optimizer — Discount & Marketplace Management (DMM) * Sits on top of aieo-admin-panel.css so the whole page inherits the Oxford * Metadata look. Only DMM-specific additions live here. * ========================================================================== */ /* -------------------------------------------------------------------------- * Subtab bar — pill buttons, matches the top-bar nav style. * Accent color is variable-driven so the same DOM/CSS can render in the * three brand colors used across the AIEO admin: * • DMM (Storefront Manager) → pink/magenta (default, `#f11569`) * • Analytics (Optimizer) → brand blue (variant `--analytics`) * • AI Chat → violet (variant `--chat`) * Pages that use the anchor-based in-page TOC variant add the * `.aieo-dmm-subtab-bar--analytics` or `--chat` modifier on the wrapper. * -------------------------------------------------------------------------- */ /* THE PINNED STRIP IS ITS OWN BAR, and since 11.0.1 it sits BELOW the menu (see _stickytop.php for why). The menu closes the header off against the top bar; this reads as a persistent submenu hanging under it. Same white and the same resting shadow as .aieo-dmm-subtab-bar so they stay siblings. Spacing runs menu → 10px seam → pill → 10px → page. The seam is the menu bar's scoped margin-bottom below; the second 10px here is the gap to the page content, and it is on this card because this card is now the last thing in the header. BOTH GAPS ARE 10px, 2026-08-02. This was 20px below against the seam's 10px above, so the pill sat high in its own space and read as belonging to the menu rather than floating between menu and page. Operator asked for the two to match. Note the knock-on: the no-pins rule below had to come down to 10px in the same change, because header→content was previously a consistent 20px in BOTH states and dropping only this one would have made the page shift by 10px the moment someone unpinned their last chip. IT IS AS WIDE AS ITS CHIPS, NOT AS WIDE AS THE PAGE. The chips are centred, so a full-width card left a broad band of empty white either side of them — most visibly beside the menu's own + and Ctrl+K controls directly below. Shrinking the card to its contents removes that band entirely. `width: fit-content` sizes it to the chips; the padding is the breathing room around them, and it is UNIFORM — the same 10px on all four sides, so the chips sit in an evenly weighted card rather than one that is generous either side and tight above and below. `max-width: 100%` caps it at the menu bar below, which is its sibling in the same rail — so with enough pinned it grows to the menu's width, the chips wrap, and `.aieo-dmm-pins`'s `flex: 1 1 100%` + `justify-content: center` keep the wrapped rows centred. `margin: 0 auto 10px` centres the card itself over the menu. box-sizing is stated rather than inherited because the 100% cap has to include that 40px padding, not add to it. */ /* NOTHING PINNED, NO BAR AT ALL. Hiding .aieo-dmm-pins alone would leave its wrapper behind as an empty white sliver, complete with padding and shadow — a bar about nothing, which is worse than the doubled gap it replaced. The whole card goes. :has() off the .is-empty flag welcome.php already toggles when the last pin is removed (its repaintPins), so there is one source of truth and the header corrects itself the moment a pin is added or removed, with no reload. On a browser without :has() the only consequence is that empty sliver. */ /* Measured, not guessed: 11px above the chips against 22px below. The extra 11 is the menu bar's own 14px top padding, which sits between the chips and the menu text and is invisible in the markup. Trimmed to 4px INSIDE this wrapper only, so the bar keeps its normal padding anywhere else the class is used. (It was page-toc-bar.php that reused it; that partial had no callers and went in 11.0. The scoping stays: it costs nothing and the next reuse should not inherit a sticky header's spacing.) BOTTOM TOO, 2026-07-31. Only padding-top was overridden, so the three bands ran 10 / 10 / 14: the wrapper's 10px above the chips, this 10px between the chips and the menu, and then the bar's OWN `padding: 14px 20px` supplying 14px below the menu. The bottom was the odd one out by exactly 4px, which is what the operator measured. Both numbers are set here now so the next person changing one cannot leave the other behind. Still scoped to the sticky wrapper: outside it the bar keeps its 14px. */ /* With no pill the menu is last and owns the gap to page content itself. It matches the pill's 10px rather than the base rule's 20px, so header→content is the same whether or not anything is pinned; otherwise the page jumped by 10px when someone unpinned their last chip. Same .is-empty flag welcome.php toggles on pin/unpin, so this follows along live. */ /* Stuck: each card deepens its OWN shadow. The wrapper cannot carry it any more — a shadow on a transparent rail draws around the seam between the two cards as well as around the pair, which reads as a crack rather than a lift. */ /* (The wrapper's empty-state padding rule that used to live here is gone with the padding itself. Now that the strip has its own card, the empty case is handled by removing that card outright — see the :has() rule above.) */ /* The sentinel is a measuring device, never a visible thing. */ @media screen and (max-width: 782px) { /* WP admin bar 46px + ~76px top bar = 122px. */ } /* The pills, and only the pills, wrap. `min-width: 0` because a flex item's default `min-width: auto` refuses to shrink below its content, which would push the tools off the right edge instead of wrapping a pill. */ /* The tools never wrap and never shrink: two icon buttons that must stay reachable at any width, vertically centred against the whole bar however many rows the pills take. */ @supports not (color: color-mix(in srgb, red 10%, #fff)) { /* Same reason as the hover fallback below: a flat neutral outline still makes the box legible, which is the whole job. */ } @supports not (color: color-mix(in srgb, red 10%, transparent)) { /* Safari < 16.2 / older Firefox: fall back to the flat tint that shipped before per-group colour. Hover is decoration, so losing the tint is acceptable; losing legibility is not. */ } /* -------------------------------------------------------------------------- * Per-group accent — "which section am I in?" at a glance. * * Eleven top-level destinations shared one pink, so the bar read as a single * undifferentiated strip and the only way to know where you were was to read * the label. Each group now owns a hue, used by the nav pill AND by its card * on the home page. * * THE PALETTE IS DEFINED ONCE, HERE, on a bare [data-aieo-group] attribute * rather than a nav-specific selector — the top bar and the home grid are two * different DOM structures showing the same eleven groups, and a second copy * of eleven hex values is a second copy to drift. * * IT IS THE ROOSTER'S OWN PALETTE, taken from assets/icon.svg: tail green * (#4C8309), body blue (#1E63CE), comb red (#D90B0E), beak amber (#FEAC03). * An earlier pass used a generic magenta→violet→indigo rainbow; none of those * hues are in the logo, and it hit red twice. * * HUE = KIND, SHADE = MEMBER. Related groups share a hue and differ only in * depth, so the three surfaces that answer "how is the business doing" — * Customer Profiling, Performance, Insights — are visibly one family rather * than three unrelated colours. The families are also CONTIGUOUS in menu * order, so hue still tells you roughly where you are: * * green catalog & storefront blue people & results * teal demand warm build & configure → comb, then beak * * Only four hues, because the logo only has four. Teal is the midpoint of the * logo's own green and blue, not a fifth colour imported from outside. * * CONTRAST IS NOT NEGOTIABLE. The active pill puts text on the accent, so * every value clears 4.5:1 against white — AA for normal text, not just large * — and shades within a family step 4.7 / 6.4 / 8.6 so they stay separable * after the contrast floor is applied. The beak is the exception no amount of * tuning fixes: a real amber is 1.89:1 against white. Darkening it until it * passes turns it into a muddy gold that is no longer the logo colour, so that * group alone flips its foreground to the logo's near-black (#212222) instead, * measuring 8.44:1. * -------------------------------------------------------------------------- */ /* THREE ROLES, NOT ONE COLOUR. * --aieo-group-accent the FILL: active pill, card top rule, header tint. * --aieo-group-fg text ON that fill. * --aieo-group-ink the accent used as TEXT ON WHITE (hover labels, * column headings, card eyebrows). * Ink defaults to the accent and only differs where the accent is too light to * be read as text: beak amber is 1.89:1 on white. Without this split, hovering * any item under Set Up rendered amber-on-white. */ /* THE PALETTE MOVED TO PHP (AIEO_DMM::group_palette()), 2026-07-31; and on 2026-10-25 (admin chrome 0.25.0, D2) the page's three roles became aliases of the chrome's screen section (--ra-screen-sec-ink, -on), so only the sidebar and toolbar stripes are still printed from PHP. The thirteen `[data-aieo-group="x"] { --aieo-group-accent: … }` rules that stood here are now emitted by AIEO_DMM::print_group_palette_css() on `admin_head`. They had to move because the WordPress SIDEBAR now lists the twelve groups and wears their colours, and the sidebar renders on every admin screen — including the many that never load this file. Keeping the values here as well would have been a second copy of a palette, which is exactly how one drifts. Everything BELOW still consumes `--aieo-group-accent` / `-fg` / `-ink` exactly as before; only the assignments left. */ /* Nav pill: adopt the group accent, falling back to the bar default for any group with no palette entry (a new group renders neutral, never unstyled). The second selector is the collapsed one-page group — a plain pill with no wrapper, which still carries its group id (see get_subtab_tree()). */ /* -------------------------------------------------------------------------- * Grouped subtab — top-level pill that reveals a dropdown of child subtabs * on hover or focus. Uses the same pill aesthetic as a regular subtab so * the bar reads consistently. The caret on the right hints at the group. * -------------------------------------------------------------------------- */ /* When a child subtab is the active page, color the parent group pill so the user knows where they are. Inherits the variable-driven accent. */ /* BRIDGE THE 6px GAP. The panel hangs 6px below the pill, and that strip belongs to neither: the group's own box ends at the pill, so a pointer crossing the gap is briefly over nothing and :hover drops. An invisible extension of the panel covers it, so the pointer stays inside the group for the whole journey. Only present while open — the closed panel is parked off-screen, taking its bridge with it, so this can never swallow clicks elsewhere on the page. */ /* Hover picks up the GROUP's accent, inherited from the enclosing .aieo-dmm-subtab-group[data-aieo-group]. It was a fixed blue, so every dropdown in the plugin highlighted the same colour no matter which coloured pill you had opened — the one moment the colour coding is most useful is while you are inside a group looking for a destination. */ /* No focus ring on a MOUSE click, but keep it for the keyboard. * * WordPress admin puts a heavy blue outline + box-shadow on :focus, and an * anchor keeps focus after it is clicked — so choosing an item from one of * these dropdowns left a blue rectangle sitting on the pill menu. :focus-visible * is the browser's own answer to exactly this: it fires for keyboard navigation * and not for a pointer, so this removes the ring where it is noise and leaves * it where somebody tabbing actually needs to see where they are. * * Scoped to the plugin's own pill menu — the rest of wp-admin keeps its * focus styling. */ @supports not (color: color-mix(in srgb, red 10%, transparent)) { /* Older Safari/Firefox keep the flat tint; the accent still shows on the text colour, which is the part that carries the meaning. */ } /* -------------------------------------------------------------------------- * Module panel gap * -------------------------------------------------------------------------- */ .aieo-dmm-modules-panel { gap: 20px; } /* -------------------------------------------------------------------------- * Section cards (reuse aieo-modules-box look) * -------------------------------------------------------------------------- */ .aieo-dmm-section { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--aieo-card, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); border-radius: 12px; } /* An h2 is an h2 at whatever depth the module put it. * * This was `.aieo-dmm-section > h2` alone — a DIRECT-child selector — so a * module that opens

(Ad-spend connectors, Food & Beverages, * and others) missed it entirely and its page title fell back to the browser * default, rendering visibly smaller than every other screen's. Restructuring * those modules would be the purist fix; matching the card depth as well costs * one selector and cannot break a page that was already correct. */ .aieo-dmm-section > h2, .aieo-dmm-section > .aieo-dmm-card > h2, .aieo-dmm-modules-panel > .aieo-dmm-card > h2, .aieo-dmm-modules-panel > .rooster-admin-board > .aieo-dmm-card > h2 { font-size: 20px; font-weight: 500; line-height: 28px; margin: 0 0 2px; color: var(--aieo-foreground, #101517); display: flex; align-items: baseline; gap: 8px; } .aieo-dmm-section > h2 .count { color: var(--aieo-muted-fg, #6b7280); font-weight: 400; font-size: 14px; } .aieo-dmm-section > h3 { font-size: 15px; margin: 6px 0 0; color: var(--aieo-foreground, #101517); font-weight: 600; } .aieo-dmm-section > p.description, .aieo-dmm-section > .description { color: #676f78; margin: 0; font-size: 13px; line-height: 1.55; } /* Inner sub-cards inside a box. */ .aieo-dmm-card { padding: 18px; border: 1px solid var(--aieo-input, #e4e4e7); background: var(--aieo-thead-bg, #fafbfc); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; } /* Stack-spacing between sibling cards. Adjacent-sibling combinator * keeps single-card layouts unaffected — the first card sits flush * against whatever's above it (h2 / description), only the 2nd+ * cards in a stack get top margin. */ .aieo-dmm-card + .aieo-dmm-card { margin-top: 16px; } .aieo-dmm-card h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--aieo-foreground, #1f2937); } /* -------------------------------------------------------------------------- * Form layout * -------------------------------------------------------------------------- */ .aieo-dmm-form > p { margin: 0 0 14px; } /* The legacy label rules never touch the admin kit's own labels and check labels (a form on the kit's markup keeps the form class for its submit handler). */ .aieo-dmm-form label:not([class^="rooster-admin"]) { display: block; font-weight: 500; color: var(--aieo-foreground, #2c3338); margin-bottom: 4px; font-size: 13px; } /* Labels that wrap a radio or checkbox (the "option" labels) should stay * inline — otherwise every option stacks on its own line and breaks radio * groups. Uses :has() which is supported in every evergreen browser. */ .aieo-dmm-form label:not([class^="rooster-admin"]):has(> input[type="radio"]), .aieo-dmm-form label:not([class^="rooster-admin"]):has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 0 0; font-weight: 400; cursor: pointer; } /* Fallback for browsers without :has — attach the aieo-dmm-choice class * on option labels inside templates to force inline display. */ .aieo-dmm-form label.aieo-dmm-choice { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 0 0; font-weight: 400; cursor: pointer; } /* Small label that's the "heading" of a radio group. */ .aieo-dmm-form .aieo-dmm-field-label { display: block; font-weight: 500; color: var(--aieo-foreground, #2c3338); margin: 0 0 6px; font-size: 13px; } /* 🚨 A FIELD IS AS WIDE AS ITS VALUE, NOT AS WIDE AS THE PANEL. * * `width: 100%` with `max-width: 100%` gave every field in every DMM settings * form the full width of its cell. On a 1500px screen that is 962px — for a * three-digit pixel value, for a two-option dropdown, for "150". Reported by * the operator 2026-09-01 against Brand display's logo dimensions, and * explicitly as INDICATIVE rather than as one screen. * * The cap below is the readable measure a settings form wants. Anything that * genuinely needs the full width says so with `large-text` or `widefat`, which * are WordPress's own words for it and are honoured underneath. */ .aieo-dmm-form input[type="text"]:not([class^="rooster-admin"]), .aieo-dmm-form input[type="number"]:not([class^="rooster-admin"]), .aieo-dmm-form input[type="date"]:not([class^="rooster-admin"]), .aieo-dmm-form input[type="email"]:not([class^="rooster-admin"]), .aieo-dmm-form input[type="url"]:not([class^="rooster-admin"]), .aieo-dmm-form select:not([multiple]):not([class^="rooster-admin"]), .aieo-dmm-form textarea:not([class^="rooster-admin"]) { width: 100%; max-width: 520px; /* The look (border, padding, type, focus) is the chrome's control (admin chrome 0.34.0, the adoption layer). */ /* ⚠️ A TEXTAREA IS EXEMPT AND IS RESTORED BELOW. It is the one control in * this list that is inherently a wants-room control: it exists because the * value is long. 18 of them in DMM forms carry no size class at all, and * capping those was a regression I introduced with the cap itself, not part * of what was reported. The complaint was pixel inputs and dropdowns. */ } /* ── WordPress's own size classes are the AUTHOR'S STATEMENT OF INTENT ────── * * `class="small-text"` on `image_max_width` is the module saying "this holds * three digits". Core sizes it at 50px; the blanket rule above overrode that * and every other one, so the intent was written down and then ignored on * every settings screen in the product. * * 🚨 AND THE EXISTING ATTEMPT AT THIS COULD NEVER HAVE WORKED. A few lines * below there is already `.aieo-dmm-form .small-text { max-width: 120px }`. * That is (0,2,0). The rule it has to beat is * `.aieo-dmm-form input[type="number"]` — and AN ATTRIBUTE SELECTOR COUNTS IN * THE SAME COLUMN AS A CLASS, so that one is (0,2,1) and wins. The fix looked * right, sat in the file, and did nothing. Naming the element here brings * these to (0,2,1) and the tie is broken by their position after it, which is * why they must not be moved above it. * * `width` as well as `max-width`: the rule above sets `width: 100%`, so a cap * alone leaves the field free to be narrower than intended in a narrow cell * and no wider than intended in a wide one, which is only half the request. */ /* 🚨 A NUMBER IS SHORT BY NATURE, WHETHER OR NOT ANYBODY SAID SO. * * Honouring `small-text` only fixes the fields whose author remembered to * write it. Brand discounts writes neither: `percent` rendered at 520px (the * default cap) and `min_subtotal` at 298px, for a value that is at most a few * digits. That is the same complaint as the logo dimensions, one class * attribute away, and there is no reason to wait for 400-odd call sites to be * annotated one by one. * * `type="number"` IS the annotation. The browser already knows the value is * numeric, which is why it draws a spinner. 120px holds eight characters at * this size; anything that genuinely needs more says so with `regular-text`, * `large-text` or `widefat`, all of which still override this because they are * declared after it. */ .aieo-dmm-form input[type="number"] { width: 120px; max-width: 120px; } .aieo-dmm-form input.tiny-text { width: 70px; max-width: 70px; } .aieo-dmm-form input.small-text { width: 96px; max-width: 96px; } .aieo-dmm-form input.regular-text { width: 25em; max-width: 100%; } .aieo-dmm-form input.large-text, .aieo-dmm-form input.widefat { width: 100%; max-width: 100%; } /* Every textarea, classed or not. See the exemption note in the block above. */ .aieo-dmm-form textarea { max-width: 100%; } /* A dropdown is as wide as its longest option. `width: auto` is what a browser * already does for a ` in the DOM for value * syncing, not rendered, so display:none is safe and leaves no ghost box. */ select.aieo-dmm-brand-select, select.aieo-dmm-product-select, select.aieo-dmm-user-select, select.aieo-dmm-category-select, select.aieo-dmm-product-search, .aieo-dmm-form select[multiple], .aieo-dmm-form select.select2-hidden-accessible, .aieo-dmm-card select.select2-hidden-accessible, .aieo-dmm-section select.select2-hidden-accessible, select.select2-hidden-accessible { display: none !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } /* (earlier no-gap rule replaced by the .aieo-dmm-grid rules below) */ /* ⛔ REMOVED, not moved: `.aieo-dmm-form .small-text { max-width: 120px }`. * It was (0,2,0) against an attribute selector at (0,2,1) and had never once * applied. Its replacement is in the size-class block above, where it can be * read next to the rule it has to beat. */ .aieo-dmm-form input[type="checkbox"], .aieo-dmm-form input[type="radio"] { margin-right: 6px; vertical-align: middle; } .aieo-dmm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 20px; /* 20px row gap between grid items */ align-items: start; margin-bottom: 16px; /* breathing room between the grid and the next section (e.g. the "Where will this feed be saved?" card) */ } /* Every grid cell becomes a vertical stack: label → control → description. * Give each element its own gap so a Select2 widget, a date picker and a * textarea all line up with the same rhythm no matter what control they use. */ /* `.aieo-dmm-form > .aieo-dmm-card > p` is here because anchoring a titled * sub-section inside a form means wrapping its heading + fields in an * `.aieo-dmm-card` (which carries the permanent `id="aieo-card-…"`). That * wrapper pushes paragraphs that USED to be direct children of the form one * level down, and the direct-child selector stopped matching, so the fields * fell back to default block

with ~1em margins and no flex gap. The card * variant must stay in lockstep with the direct-child variant. * * ⚠ `:not(.description)` IS LOAD-BEARING, AND IT IS A SPECIFICITY FIX. * * Written without it, the card variant scores (0,2,1) and therefore BEATS * `.aieo-dmm-form .description` at (0,2,0) further down — so every * `p.description` that is a direct child of a card inside a form flipped from * `display:block` to `display:flex; flex-direction:column`. Descriptions built * with printf() that carry inline markup then break apart: brand-gifts' wording * hint contains two real `{remaining}` elements, and as flex items * in a column each took its own line, rendering one sentence as five. * * The plain `.aieo-dmm-form > p` above never had this problem because it scores * (0,1,1) and LOSES to `.description` — so "lockstep with the direct-child * variant" has to mean lockstep in what it matches too, not just in what it * declares. 28 descriptions across 8 files were affected. */ /* 🚨 `.aieo-prodpick-rule` IS A GRID CELL, AND IT CANNOT BE A `

`. * * The picker's root is a `

`, and an HTML parser CLOSES an open `

` the * moment it meets a `

`. So `

…

` * does not nest — it becomes an empty `

`, the div, and a second empty `

`, * i.e. THREE grid children where the author wrote one. Measured on Brand * discounts when the term fields moved to the picker: `.aieo-dmm-grid` had 12 * children instead of 6, five of them empty, and the six fields scattered * across five columns at unrelated heights. The markup looked correct in the * source and correct in isolation; only the child COUNT showed it. * * Two halves to the fix: the call sites emit the div directly (no `

` * wrapper), and the cell rules below match it as well as `p` so the picker * inherits the same label → control → description rhythm as every neighbouring * field instead of falling back to its own margins. */ .aieo-dmm-grid p, .aieo-dmm-form > p, .aieo-dmm-form > .aieo-dmm-card > p:not(.description) { margin: 0 0 6px; display: flex; flex-direction: column; gap: 4px; } /* A paragraph that holds the form's commit (its buttons, maybe a status) and no field keeps each button at its natural width (rule P8, UI wave 1): the column above stretches what it holds, which drew Save across the card. */ .aieo-dmm-grid p:has(> .button):not(:has(> input, > select, > textarea, > label)), .aieo-dmm-form > p:has(> .button):not(:has(> input, > select, > textarea, > label)), .aieo-dmm-form > .aieo-dmm-card > p:not(.description):has(> .button):not(:has(> input, > select, > textarea, > label)) { align-items: flex-start; } .aieo-dmm-grid p > label, .aieo-dmm-form > p > label, .aieo-dmm-form > .aieo-dmm-card > p > label { margin-bottom: 0; } /* The Browse button is the control in this cell: it must not stretch to the column, the way a flex item otherwise would. */ /* -------------------------------------------------------------------------- * EXPLICIT COLUMN COUNTS — for rows whose symmetry is the point. * * The base `.aieo-dmm-grid` is `repeat(auto-fit, minmax(240px, 1fr))`, which * is right for a bag of unrelated fields: it packs as many as fit and the * count changes with the viewport. It is WRONG when a row is a set the * operator reads as a set — the four targeting pickers (brands, categories, * needs, specific products) are one decision in four parts, and auto-fit * scattered them 3-and-1 across five columns with the leftovers of the * previous row. Declaring the count is what makes the row read as a row. * * Steps down rather than reflowing to one column at the first breakpoint, so * a laptop keeps two per line instead of a very long ladder. * -------------------------------------------------------------------------- */ .aieo-dmm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aieo-dmm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1400px) { .aieo-dmm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .aieo-dmm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 782px) { .aieo-dmm-grid--4, .aieo-dmm-grid--3 { grid-template-columns: minmax(0, 1fr); } } /* A field that owns its own line above such a row. `max-width` because a text input stretched to 1300px is not a better input, it is a worse one. */ .aieo-dmm-field-own-line { margin: 0 0 10px; } .aieo-dmm-field-own-line > input, .aieo-dmm-field-own-line > select { max-width: 25rem; } /* Descriptions sit on their own line below the control with a small gap. */ .aieo-dmm-form .description, .aieo-dmm-grid p .description, .aieo-dmm-grid p span.description { display: block; margin-top: 4px; font-size: 12px; color: var(--aieo-muted-fg, #6b7280); line-height: 1.45; } .aieo-dmm-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; } .aieo-dmm-checkbox-grid label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; } .aieo-dmm-checkbox-grid code { background: #f4f4f4; padding: 1px 5px; font-size: 11px; color: #1f4620; border-radius: 3px; } .aieo-dmm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #eef0f3; } /* Form submit rows (p.submit) — proper vertical breathing room. */ .aieo-dmm-form p.submit, .aieo-dmm-section p.submit { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #eef0f3; display: flex; gap: 10px; flex-wrap: wrap; } /* Upload row: file input + primary action side by side. */ .aieo-dmm-upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .aieo-dmm-upload-row input[type="file"] { flex: 1 1 300px; padding: 8px; border: 1px dashed var(--aieo-input, #cbd5d9); border-radius: 6px; background: var(--aieo-thead-bg, #fafbfc); } .aieo-dmm-upload-row input[type="file"]:hover { border-color: var(--aieo-group-accent, #f11569); background: #fff7fa; background: color-mix(in srgb, var(--aieo-group-accent, #f11569) 5%, #fff); } /* Equal-sized buttons in action rows: the same min-width so a group of buttons lines up whatever the labels; the look is the chrome's (admin chrome 0.33.0). */ .aieo-dmm-btn-fixed { min-width: 200px; } .aieo-dmm-actions .aieo-dmm-btn-fixed, .aieo-dmm-upload-row .aieo-dmm-btn-fixed { flex: 0 0 auto; } /* CORE BUTTONS ON A CHROME SCREEN ARE THE CHROME'S (admin chrome 0.33.0, UI-PLAN Phase 3): the kit's outline button, its small and its primary in the product's ink, through the library's adoption layer. The rules that lived here (the 200 px / 40 px sizing, the primary filled in the group's accent, the secondary outlined in the group's ink, the compact .button-small, all !important) made most of the 147 looks of button the uniformity census counted on One's pages and fought the kit; on core's screens (the competition and event editors) core's own button remains. The group-accent primary (the operator's choice of 2026-09-05) is one alias line away if the owner wants it back on every product: docs/admin-chrome.md. */ /* Shared horizontal-scroll shell for wide admin list tables — the same treatment the Google Reviews tables got. Wrap the table, don't clip:

. */ .aieo-dmm-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .aieo-dmm-scroll-x > table { min-width: 900px; } /* Tiny inline utility buttons (e.g. field-map "+" add-row) — compact square. */ .aieo-dmm-form .aieo-dmm-feed-add-row, .aieo-dmm-form button.aieo-dmm-feed-add-row { min-width: 36px !important; width: 36px !important; height: 36px !important; padding: 0 !important; } /* Legacy explicit "fixed" class — now identical to the default. Kept so * templates that still set it keep working, no size jump. */ .aieo-dmm-btn-fixed { min-width: 200px !important; height: 40px !important; line-height: 24px !important; padding: 7px 18px !important; border-radius: 8px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .aieo-dmm-actions .aieo-dmm-btn-fixed, .aieo-dmm-upload-row .aieo-dmm-btn-fixed { flex: 0 0 auto; } /* -------------------------------------------------------------------------- * Tables (CRUD lists) * -------------------------------------------------------------------------- */ .aieo-dmm-section table.widefat, .aieo-dmm-section table.aieo-table { background: var(--aieo-card, #fff); border: 1px solid var(--aieo-input, #e4e4e7); border-radius: 8px; overflow: hidden; border-collapse: separate; border-spacing: 0; } .aieo-dmm-section table.widefat thead th, .aieo-dmm-section table.aieo-table thead th { background: var(--aieo-muted, #f6f7f7); font-weight: 600; color: var(--aieo-foreground, #1f2937); border-bottom: 1px solid var(--aieo-input, #e4e4e7); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .aieo-dmm-section table.widefat tbody td { vertical-align: middle; } /* Dedicated AJAX DataTable. */ .aieo-dmm-datatable-toolbar { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--aieo-input, #e4e4e7); background: var(--aieo-thead-bg, #fafbfc); align-items: center; flex-wrap: wrap; } .aieo-dmm-datatable-toolbar input[type="search"], .aieo-dmm-datatable-toolbar input[type="text"] { padding: 6px 10px; border: 1px solid var(--aieo-input, #cbd5d9); border-radius: 6px; min-width: 220px; } .aieo-dmm-datatable-toolbar label { font-size: 12px; color: var(--aieo-tone-secondary, #555); display: flex; align-items: center; gap: 4px; margin: 0; } .aieo-dmm-datatable-toolbar .spacer { flex: 1; } .aieo-dmm-datatable thead th.sortable { cursor: pointer; } /* --aieo-group-ink, not the raw accent: these are LETTERS ON WHITE, and Set Up's beak amber is 1.89:1 there. Ink defaults to the accent everywhere else. */ .aieo-dmm-datatable thead th.sortable:hover { color: var(--aieo-group-ink, #f11569); } .aieo-dmm-datatable thead th .sort-indicator { color: #aaa; margin-left: 4px; font-size: 10px; } .aieo-dmm-datatable thead th.sorted-asc .sort-indicator, .aieo-dmm-datatable thead th.sorted-desc .sort-indicator { color: var(--aieo-group-ink, #f11569); } .aieo-dmm-datatable td.editable { cursor: text; background: #fffbf2; font-variant-numeric: tabular-nums; } .aieo-dmm-datatable td.editable:hover { background: #fff3cd; } .aieo-dmm-datatable td.editable input { width: 100%; padding: 4px 6px; font-size: 13px; border: 1px solid var(--aieo-group-accent, #f11569); border-radius: 4px; } .aieo-dmm-datatable-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--aieo-input, #e4e4e7); background: var(--aieo-thead-bg, #fafbfc); font-size: 12px; color: var(--aieo-tone-secondary, #555); flex-wrap: wrap; gap: 10px; } .aieo-dmm-datatable-pager { display: flex; gap: 4px; } .aieo-dmm-datatable-pager button { padding: 4px 10px; border: 1px solid var(--aieo-input, #cbd5d9); background: var(--aieo-card, #fff); border-radius: 4px; cursor: pointer; font-size: 12px; } .aieo-dmm-datatable-pager button:disabled { opacity: 0.4; cursor: not-allowed; } .aieo-dmm-datatable-pager button.is-current { background: var(--aieo-group-accent, #f11569); color: var(--aieo-group-fg, #fff); border-color: var(--aieo-group-accent, #f11569); } .aieo-dmm-datatable-empty { padding: 32px; text-align: center; color: var(--aieo-muted-fg, #6b7280); font-style: italic; } .aieo-dmm-pagination { margin: 14px 0; } .aieo-dmm-pagination .page-numbers { padding: 4px 9px; border: 1px solid var(--aieo-border, #dcdcde); margin: 0 2px; text-decoration: none; border-radius: 4px; color: var(--aieo-foreground, #333); } .aieo-dmm-pagination .page-numbers.current { background: var(--aieo-group-accent, #f11569); color: var(--aieo-group-fg, #fff); border-color: var(--aieo-group-accent, #f11569); } /* -------------------------------------------------------------------------- * Progress (batches) * -------------------------------------------------------------------------- */ .aieo-dmm-progress { margin-top: 12px; } .aieo-dmm-progress-bar { background: #eef0f3; height: 14px; border-radius: 7px; overflow: hidden; } .aieo-dmm-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, #f11569, #667eea); transition: width 0.25s; width: 0; } .aieo-dmm-progress-text { margin: 6px 0 0; font-size: 12px; color: var(--aieo-tone-secondary, #555); } .aieo-dmm-progress-log { background: var(--aieo-mono, #1e1e1e); color: #b8e6b8; padding: 10px; border-radius: 6px; font-size: 11px; max-height: 200px; overflow: auto; font-family: Consolas, "SF Mono", Menlo, monospace; margin-top: 8px; } /* -------------------------------------------------------------------------- * Flash messages * -------------------------------------------------------------------------- */ /* ON A CHROME SCREEN THE FLASH IS THE CHROME'S TOAST (admin chrome 0.33.0, adopt/rooster-one.css, D3d); these rules stay for core's screens (the competition and event editors), where the script runs without the chrome. The amber callout's rules are gone: it is the chrome's inline warning notice (its pages are all chrome screens). */ .aieo-dmm-flash { position: fixed; top: 50px; right: 20px; z-index: 100000; min-width: 260px; pointer-events: none; } .aieo-dmm-flash-item { background: var(--aieo-card, #fff); border-left: 4px solid var(--aieo-info, #667eea); padding: 12px 16px; margin-top: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); border-radius: 6px; pointer-events: auto; font-size: 13px; } .aieo-dmm-flash-item.error { border-left-color: #dc3232; } .aieo-dmm-flash-item.success { border-left-color: var(--aieo-success, #46b450); } /* -------------------------------------------------------------------------- * Recipe panel (Loyalty Classes tab has a table of radios) * -------------------------------------------------------------------------- */ .aieo-dmm-section .form-table th { width: 220px; font-weight: 600; color: var(--aieo-foreground, #1f2937); } .aieo-dmm-section .form-table td select { min-width: 260px; } /* -------------------------------------------------------------------------- * Product Needs editor * -------------------------------------------------------------------------- */ .aieo-dmm-needs-zone { border: 1px solid var(--aieo-input, #e4e4e7); padding: 14px; margin-bottom: 14px; border-radius: 10px; background: var(--aieo-thead-bg, #fafbfc); } .aieo-dmm-needs-zone h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--aieo-muted-fg, #6b7280); } .aieo-dmm-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-height: 32px; } .aieo-dmm-chips li { /* The look is the chrome's solid chip (admin chrome 0.30.0, adopt/rooster-one.css, D3b); a hidden need is grey there. */ cursor: move; user-select: none; list-style: none; } .aieo-dmm-chip-placeholder { display: inline-block; background: rgba(241, 21, 105, 0.15); background: color-mix(in srgb, var(--aieo-group-accent, #f11569) 15%, transparent); border: 2px dashed rgba(241, 21, 105, 0.5); border-color: color-mix(in srgb, var(--aieo-group-accent, #f11569) 50%, transparent); border-radius: 16px; min-width: 100px; min-height: 26px; margin: 0 4px; list-style: none; } .aieo-dmm-checkboxes { list-style: none; padding: 0; margin: 0; max-height: 1080px; overflow: auto; /* 6-column balanced grid (slug column removed → labels are short enough to fit). Falls back to fewer columns on narrow viewports via auto-fit, which keeps each cell at least ~150px wide. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; } @media (min-width: 1100px) { .aieo-dmm-checkboxes { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .aieo-dmm-checkboxes li { padding: 4px 6px; border-radius: 4px; font-size: 12.5px; line-height: 1.4; transition: background 0.12s; } .aieo-dmm-checkboxes li:hover { background: var(--aieo-muted, #f3f4f6); } .aieo-dmm-checkboxes li > label { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 6px; cursor: pointer; overflow-wrap: anywhere; } .aieo-dmm-checkboxes li > label > input[type="checkbox"] { margin-top: 2px; } .aieo-dmm-checkboxes li.is-hidden-need { background: repeating-linear-gradient( 45deg, #f3f4f6, #f3f4f6 4px, #d1d5db 4px, #d1d5db 8px ); border: 1px dashed var(--aieo-muted-fg, #6b7280); } .aieo-dmm-checkboxes li.is-hidden-need code { background: var(--aieo-input, #d1d5db); } /* The count line under the search above the available-needs grid. The search box itself is the library's input * with its Lucide search icon (product-needs.php): its old box and its emoji icon went with it (UI wave 2, lead). */ .aieo-dmm-needs-search-meta { font-size: 11px; color: var(--aieo-muted-fg, #6b7280); margin: 4px 2px 0; min-height: 14px; } /* -------------------------------------------------------------------------- * ERP bridge hook cards * -------------------------------------------------------------------------- */ .aieo-dmm-hook-card { background: var(--aieo-thead-bg, #fafbfc); padding: 16px 18px; border: 1px solid var(--aieo-input, #e4e4e7); border-radius: 8px; margin-bottom: 14px; } .aieo-dmm-hook-card h3 { margin-top: 0; font-size: 14px; } .aieo-dmm-hook-type { display: inline-block; padding: 2px 8px; font-size: 10px; border-radius: 3px; background: var(--aieo-info, #667eea); color: var(--aieo-primary-fg, #fff); margin-right: 6px; font-weight: 700; letter-spacing: 0.5px; } .aieo-dmm-hook-type.aieo-dmm-hook-action { background: var(--aieo-warning, #f59e0b); } .aieo-dmm-code { background: var(--aieo-mono, #1e1e1e); color: #e8e8e8; padding: 12px; border-radius: 6px; white-space: pre-wrap; overflow-x: auto; font-size: 12px; font-family: Consolas, "SF Mono", Menlo, monospace; } /* -------------------------------------------------------------------------- * Gift badge, field-map, scanner shortcodes * -------------------------------------------------------------------------- */ .aieo-dmm-field-map .drag-handle { cursor: move; color: #999; width: 24px; text-align: center; } .aieo-dmm-staff-scanner, .aieo-dmm-customer-scanner { max-width: 480px; margin: 14px 0; padding: 18px; border: 1px solid var(--aieo-input, #e4e4e7); border-radius: 10px; background: var(--aieo-card, #fff); } .aieo-dmm-scanner-result, .aieo-dmm-customer-result { margin-top: 14px; padding: 12px; background: #f4f8fb; border-radius: 6px; } .aieo-dmm-customer-result img { max-width: 120px; float: left; margin-right: 12px; } /* SELECT2 IS SKINNED BY THE CHROME'S ADOPTION LAYER on a chrome screen (admin chrome 0.34.0, D3e): the control, the chips and the dropdown are the kit's. The 430-line skin that lived here, !important throughout, is gone; on core's screens (the competition and event editors) Select2 wears its own look. */ /* -------------------------------------------------------------------------- * Callout + bulleted "how it works" list (reused across subtabs). * -------------------------------------------------------------------------- */ .aieo-dmm-bullets { list-style: disc; margin: 8px 0 0 20px; padding: 0; } .aieo-dmm-bullets > li { margin: 0 0 10px; color: var(--aieo-tone-secondary, #374151); line-height: 1.55; } .aieo-dmm-bullets > li strong { color: var(--aieo-foreground, #101517); } /* -------------------------------------------------------------------------- * Attribution tab (DMM → Attribution) * -------------------------------------------------------------------------- */ .aieo-attr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 6px 0 4px; } .aieo-attr-tile { padding: 12px 14px; background: var(--aieo-card, #fff); border: 1px solid var(--aieo-input, #e4e4e7); border-radius: 8px; position: relative; } .aieo-attr-tile-label { font-size: 11px; color: var(--aieo-muted-fg, #6b7280); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; /* Use plain block + inline flow (NOT flex) so the help icon stays at the end of the last line of the title text — even when the title wraps onto multiple lines. The previous flex layout pushed the icon onto its own row whenever the title wrapped. overflow-wrap: anywhere keeps long all-caps table names like WP_AIEO_CUSTOMER_INTELLIGENCE inside the tile. */ overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } .aieo-attr-tile-label > span:first-child { display: inline; margin-right: 4px; } .aieo-attr-tile-label > .aieo-attr-tile-help { /* Force the icon to flow inline with the title text. */ vertical-align: middle; } .aieo-attr-tile-help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--aieo-input, #e4e4e7); color: var(--aieo-muted-fg, #6b7280); font-size: 10px; font-weight: 700; cursor: help; text-transform: none; line-height: 1; user-select: none; } .aieo-attr-tile-help:hover { background: var(--aieo-info, #c084fc); color: var(--aieo-primary-fg, #fff); } .aieo-attr-tile-popover { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; padding: 10px 12px; background: var(--aieo-mono, #1f2937); color: var(--aieo-muted-fg, #f9fafb); font-size: 12px; line-height: 1.45; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 10; text-transform: none; letter-spacing: 0; font-weight: 400; white-space: normal; } .aieo-attr-tile:hover .aieo-attr-tile-popover { display: block; } .aieo-attr-tile-popover::before { content: ""; position: absolute; top: -5px; left: 16px; width: 10px; height: 10px; background: var(--aieo-mono, #1f2937); transform: rotate(45deg); } .aieo-attr-tile-value { font-size: 22px; font-weight: 600; color: var(--aieo-foreground, #111827); margin-top: 4px; line-height: 1.2; } /* Status pills for the detail table */ /* Detail DataTable — toolbar + body + footer/pager */ .aieo-attr-detail-table { display: flex; flex-direction: column; gap: 10px; } .aieo-attr-dt-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .aieo-attr-dt-toolbar .spacer { flex: 1; } .aieo-attr-dt-search { min-width: 280px; padding: 6px 10px; border: 1px solid var(--aieo-input, #d1d5db); border-radius: 6px; background: var(--aieo-card, #fff); } .aieo-attr-dt-perpage, .aieo-attr-dt-toolbar label select { padding: 4px 6px; border: 1px solid var(--aieo-input, #d1d5db); border-radius: 6px; background: var(--aieo-card, #fff); } .aieo-attr-dt-body { min-height: 60px; transition: opacity 120ms ease; } .aieo-attr-dt-empty { padding: 24px; text-align: center; color: var(--aieo-muted-fg, #6b7280); background: var(--aieo-muted, #f9fafb); border: 1px dashed var(--aieo-border, #e5e7eb); border-radius: 6px; } .aieo-attr-dt-table thead th.sortable, .aieo-attr-sortable-table thead th[data-sort-type] { cursor: pointer; user-select: none; } .aieo-attr-dt-table thead th.sortable:hover, .aieo-attr-sortable-table thead th[data-sort-type]:hover { background: var(--aieo-muted, #f3f4f6); } .aieo-attr-dt-table thead th.sorted-asc, .aieo-attr-dt-table thead th.sorted-desc, .aieo-attr-sortable-table thead th.sorted-asc, .aieo-attr-sortable-table thead th.sorted-desc { color: var(--aieo-foreground, #1f2937); } .aieo-attr-dt-sort-ind { display: inline-block; margin-left: 4px; font-size: 10px; color: var(--aieo-tone-muted, #9ca3af); } .aieo-attr-dt-table thead th.sorted-asc .aieo-attr-dt-sort-ind, .aieo-attr-dt-table thead th.sorted-desc .aieo-attr-dt-sort-ind, .aieo-attr-sortable-table thead th.sorted-asc .aieo-attr-dt-sort-ind, .aieo-attr-sortable-table thead th.sorted-desc .aieo-attr-dt-sort-ind { color: #4f46e5; } .aieo-attr-dt-footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .aieo-attr-dt-summary { color: var(--aieo-muted-fg, #6b7280); font-size: 12px; } .aieo-attr-dt-pager { display: inline-flex; gap: 4px; flex-wrap: wrap; } .aieo-attr-dt-pager button { min-width: 30px; padding: 4px 8px; border: 1px solid var(--aieo-input, #d1d5db); background: var(--aieo-card, #fff); color: var(--aieo-foreground, #1f2937); border-radius: 4px; cursor: pointer; } .aieo-attr-dt-pager button:hover:not(:disabled) { background: var(--aieo-muted, #f3f4f6); } .aieo-attr-dt-pager button.is-current { background: #4f46e5; border-color: #4338ca; color: var(--aieo-primary-fg, #fff); font-weight: 600; } .aieo-attr-dt-pager button:disabled { color: var(--aieo-tone-muted, #d1d5db); cursor: not-allowed; } .aieo-attr-dt-gap { padding: 4px 2px; color: var(--aieo-tone-muted, #9ca3af); } /* -------------------------------------------------------------------------- * WordPress color-picker overrides — DMM admin pages. * Targets the actual rendered button: * * WP's default styling fills the button with grey (`.button`) and adds a * vertical separator (border-left on `.wp-color-result-text`) between the * swatch and the label. Both removed so the button reads as one clean pill. * Scoped to .aieo-dmm-section so we don't leak into core WP color pickers * on unrelated admin pages. * -------------------------------------------------------------------------- */ .aieo-dmm-section .wp-color-result.button, .aieo-dmm-form .wp-color-result.button { /* DO NOT override `background` — wp-color-picker sets the selected swatch colour INLINE on this button; a transparent background here hid every swatch on every DMM colour picker. Only flatten the box-shadow. */ box-shadow: none !important; } .aieo-dmm-section .wp-color-result.button:hover, .aieo-dmm-section .wp-color-result.button:focus, .aieo-dmm-form .wp-color-result.button:hover, .aieo-dmm-form .wp-color-result.button:focus { box-shadow: 0 0 0 1px #c084fc !important; } /* Keep the "Select Color" label readable on ANY swatch colour (incl. dark ones) by giving the label span its own translucent light backdrop instead of the old transparent + grey text that vanished on dark swatches. */ .aieo-dmm-section .wp-color-result-text, .aieo-dmm-form .wp-color-result-text { border-left: 0 !important; background: rgba(255, 255, 255, 0.85) !important; color: var(--aieo-foreground, #1f2937) !important; } /* -------------------------------------------------------------------------- * Sectioned dropdowns (Storefront Display, etc.) * * When a group registers sections via AIEO_DMM::get_section_definitions(), * the panel emits a `.has-sections` class on the menu and one * `.aieo-dmm-subtab-menu-section` divider per non-default section. * The first section divider has its top margin reset so the panel * doesn't get an awkward leading gap. * -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- * Mega-menu layout — sectioned panels (currently the Storefront Display * group with 25+ modules across 3 sections) render as a grid of columns * instead of one tall stack. Each section becomes a `.aieo-dmm-subtab-menu-column` * with a coloured header + its items below. * * `repeat(auto-fit, minmax(180px, 1fr))` lets the grid auto-collapse on * narrow viewports (admin sidebar collapsed → less header width) without * any media-query gymnastics. * -------------------------------------------------------------------------- */ /* A second section stacked inside the same column needs air above it, or its heading sits hard against the last link of the section before it and the two read as one list. The first heading in a column keeps its own spacing. */ /* Section headings are SHADES OF THEIR GROUP'S ACCENT. * * They used to be four hardcoded hues (indigo / rose / emerald / orange), which * predated the group palette and then fought it: a deep-blue Insights dropdown * showed headings in three colours belonging to no family, none of them Rooster * colours. Same rule as the rest of the palette — hue means kind, shade means * member — so a column heading now says "still inside this group" while staying * distinct from its neighbours. * * Keyed on the COLUMN'S POSITION, not on a section id. That is deliberate: the * old map covered exactly four of the twenty-odd sections in the plugin, so * every section added since rendered grey, and Marketplaces would have needed a * fifth entry today. Position-based needs no map and cannot fall behind. * * The ramp only ever goes DARKER (0 / 14 / 26 / 38% black). Darker on white is * always more contrast, so no step can drop 10px uppercase text below legible; * mixing toward white would have done the opposite. A fifth column and beyond * reuse the last step rather than fading away. */ @supports not (color: color-mix(in srgb, red 10%, black)) { /* Older engines: every heading takes the flat group accent. The family reads correctly; only the within-group ramp is lost. */ } /* e-Shop Insights report links can be long (esp. the Greek titles) — let them * WRAP inside their column instead of overflowing into the neighbour. Scoped to * sectioned (multi-column) panels; flat single-column menus keep nowrap. */ /* NO PER-SECTION-ID COLOURS. There were seven of them here — amber, indigo, * emerald, rose, cyan, violet and a second emerald — and every one of them * outranked the ramp above it: `[data-section-id="x"]` beats `:nth-child(n)` * on specificity AND came later in the file, so the block directly above was * dead CSS for the only group that has six sections. That is what the Insights * dropdown was showing (operator report 2026-08-29, "the colours of the * sections are not the same"): six unrelated hues, none of them Rooster * colours, under a deep-blue Insights pill. * * Colour here means GROUP, and it is the pill above the panel that says which * group you are in. A per-section hue says "these six things are six different * kinds", which is exactly wrong — they are six columns of one menu. Adding an * eighth entry for each new section was also a map that could only fall behind: * it covered seven of the twenty-odd sections in the plugin and every section * added since rendered grey. */ /* ============================================================================= * SEO → Content Opportunities * ========================================================================== */ /* No cap: this intro sits above a full-width table, and a paragraph that stops at 880px next to a 1700px table reads as a stray note. */ .aieo-opp-intro { max-width: none; } .aieo-opp-status { margin-left: 8px; font-size: 12px; color: var(--aieo-muted-fg, #64748b); } /* The priority controls' look is the chrome's on a chrome screen (admin chrome 0.37.0, D3h: the details, the fieldsets as sub-cards, the hints as help, each label-and-box pair a two-column field row); the layout stays here. */ .aieo-opp-controls > summary { cursor: pointer; font-weight: 600; } .aieo-opp-controls-grid { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0; } .aieo-opp-fieldset { flex: 1 1 220px; min-width: 220px; } .aieo-opp-fieldset input[type="number"] { width: 84px; } .aieo-opp-fieldset label.aieo-opp-strong { font-weight: 700; } .aieo-opp-chips { margin: 10px 0; } .aieo-opp-table .aieo-opp-col-num { width: 92px; text-align: center; } .aieo-opp-table .aieo-opp-col-quad { width: 130px; } .aieo-opp-table .aieo-opp-col-pin { width: 90px; } .aieo-opp-bar-fill { display: block; background: var(--aieo-info, #7c3aed); height: 8px; width: 0; } .aieo-opp-table .aieo-opp-col-act { width: 240px; } /* ── The module intro is a card ONLY WHERE IT IS NOT ALREADY IN ONE ──────── Most modules open with an

+

and then put their controls in a card, leaving the intro floating on the grey page background. But NOT all of them: .aieo-dmm-section is itself a white card (background, radius, shadow, 24px padding) AND a flex column with a 14px gap. Carding the intro blindly therefore drew a SECOND card inside that one, and the parent's flex gap split it into two boxes with a hole between them — the Google Reviews symptom. No margin on the children can close a gap that comes from the parent's `gap`. So this is scoped to intros that are NOT already inside a card: a bare h2 in the panel (competitions), or one in a plain wrapper such as #aieo-food-root (food & beverages). Modules already using .aieo-dmm-section are left exactly as they were, because they were never the problem. Matched on the PATTERN — an h2 immediately followed by a description — rather than :first-child, which an earlier attempt used and which any leading element defeats. :has() keeps a standalone h2 from rendering as a box with no floor. */ .aieo-dmm-modules-panel > h2:has(+ p.description), .aieo-dmm-modules-panel > div:not(.aieo-dmm-section):not(.aieo-dmm-card):not(.rooster-admin-board) > h2:has(+ p.description), .aieo-dmm-modules-panel > .rooster-admin-board > h2:has(+ p.description), .aieo-dmm-modules-panel > .rooster-admin-board > div:not(.aieo-dmm-section):not(.aieo-dmm-card) > h2:has(+ p.description) { background: var(--aieo-card, #fff); border: 1px solid var(--aieo-border, #dcdcde); border-bottom: 0; border-radius: 8px 8px 0 0; margin: 0; padding: 14px 18px 4px; font-size: 18px; } .aieo-dmm-modules-panel > h2 + p.description, .aieo-dmm-modules-panel > div:not(.aieo-dmm-section):not(.aieo-dmm-card):not(.rooster-admin-board) > h2 + p.description, .aieo-dmm-modules-panel > .rooster-admin-board > h2 + p.description, .aieo-dmm-modules-panel > .rooster-admin-board > div:not(.aieo-dmm-section):not(.aieo-dmm-card) > h2 + p.description { background: var(--aieo-card, #fff); border: 1px solid var(--aieo-border, #dcdcde); border-top: 0; border-radius: 0 0 8px 8px; margin: 0 0 16px; padding: 0 18px 14px; /* !important because ~34 modules set an inline max-width (760-880px) on their description; an inline style beats a stylesheet rule, so the heading spanned full width while the description stopped short. */ max-width: none !important; } /* CANCEL THE PANEL'S FLEX GAP between the two halves. .aieo-modules-panel is display:flex and .aieo-dmm-modules-panel adds gap:20px, so every DIRECT child is pushed 20px from the next — including a heading and the description meant to sit flush against it. That gap belongs to the parent, so no margin on the children can remove it; it has to be pulled back by exactly the same amount. This is what left a visible hole in the middle of the Events and Competitions intro cards. Applies ONLY to the direct-child case. An intro inside a plain wrapper (#aieo-food-root) has no flex parent and needs no correction — which is why Food & Beverages was the one that already looked right. */ .aieo-dmm-modules-panel > h2 + p.description, .aieo-dmm-modules-panel > .rooster-admin-board > h2 + p.description { margin-top: -20px; } /* An auto-wrapped module (see page.php) holds an ENTIRE screen — heading, description, form tables, buttons — not the tight cluster a hand-authored .aieo-dmm-section was designed around. The 14px flex gap that suits three sibling elements becomes noise across twenty, so spacing is left to the elements' own margins here. */ .aieo-dmm-section--auto { display: block; padding: 20px 22px; } .aieo-dmm-section--auto > h2:first-child { margin-top: 0; } .aieo-dmm-section--auto > h3:first-child { margin-top: 0; } /* Its own children must not be re-carded by the intro rule — they are already inside a card. */ .aieo-dmm-section--auto h2 { background: none; border: 0; padding: 0; margin: 0 0 4px; } .aieo-dmm-section--auto h2 + p.description { background: none; border: 0; padding: 0; margin: 0 0 14px !important; } /* Styling-neutral marker: a .aieo-dmm-section that is deliberately NOT a titled content section — a cross-reference pointer, a "module not loaded" state, or a status banner. It keeps the section card look on purpose; the modifier exists so the section census and the navigator can tell a section that owes a title and an anchor id from one that never will. Every .aieo-dmm-section without --note or --auto must carry an

and an id. */ .aieo-dmm-section--note { /* Keeps the section's place in the flow but not its weight. At full section chrome (24px padding + shadow + 12px radius) a one-line cross-reference read as a peer of real content — a sentence like "Looking for segments? They live under Customer Intelligence" occupied as much of the page as a whole settings panel. */ padding: 12px 16px; gap: 8px; box-shadow: none; border: 1px solid var(--aieo-border, #e5e7eb); border-radius: 8px; } .aieo-dmm-section--note > p { margin: 0; } .aieo-dmm-section--bare { /* For a note whose only child is already a card. .aieo-dmm-card brings its own 18px padding, border and radius, so the section's 24px on top gave the web-push status banner 42px of combined padding inside two nested frames. Let the inner card be the chrome. */ padding: 0; border: 0; background: none; box-shadow: none; } /* RTL: leftward overflow IS scrollable in a right-to-left document, so the off-screen park above would create the very scrollbar it removes in LTR. Revert to the original behaviour there. */ /* -------------------------------------------------------------------------- * Search in the sticky bar * Placed AFTER the .aieo-dmm-subtab rules on purpose: it shares their * specificity, so sitting above them let the pill's grey border and weight * win and the button came out looking broken next to the menu pills. * Scoped to the bar for one more point of specificity, so order alone is * never what is holding it together. * ----------------------------------------------------------------------- */ /* The AI icon takes the auto margin, so search no longer needs it: the two travel together as a pair at the right-hand end. */ /* A phone has no Ctrl+K to press. */ /* Filtered Home: the chip states which group you are looking at and the link is the way back. Wears the group's own accent, same as its sidebar entry and its pill, so the three agree about where you are. */ /* BOTH controls are pills, and they share this block so they cannot drift apart. The way back used to be bare link text beside a solid pill, which read as an afterthought rather than the other half of a pair. Same height, radius, type and padding; only the fill differs. */ /* Where you are: the group's accent, filled. */ /* The way out: the same pill inverted — white fill, the group's colour as both border and letters. Letters take --aieo-group-ink, not the raw accent: ink IS the accent for twelve of the thirteen groups, but Set Up's amber (#FEAC03) is unreadable as text on white and already carries a darkened override for exactly this. The border keeps the true accent, so the pair still states the group's real colour. */ /* wp-admin styles every `a:focus` with a BLUE ring (box-shadow 0 0 0 1px #4f94d4 plus a soft outer glow) and a blue text colour. On a pill whose whole point is to wear its group's colour, a click turned the border blue. Clearing it is not enough on its own — a control with no focus state is unusable by keyboard — so the ring is replaced rather than removed. :focus covers the mouse case (no ring, colours preserved); :focus-visible adds the ring back for keyboard users only, in the group's own accent. */ /* Return column: the label link and the voucher block. The column was three grey lines and a pill; the one thing an operator needs at this stage — open the document and look at it — was not there at all. */ .aieo-wd-sum { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } /* Caption above the number, not beside it: "ΔΕΛΤΙΟ ΕΠΙΣΤΡΟΦΗΣ" is a label for the code, and on one line the two competed for the same reading. */ .aieo-wd-sum__id { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .aieo-wd-sum__no { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--aieo-muted, #f0f0f1); } .aieo-wd-sum__lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; text-decoration: none; } .aieo-wd-sum__lbl::before { content: "\1F4C4"; font-weight: 400; } .aieo-wd-sum__lbl:hover { text-decoration: underline; } /* Actions column: the two buttons are one decision, so they are one shape. They were content-sized and different heights — the secondary is .button-small and the primary is not — so a column of them read as a ragged stack rather than as "review it, then approve it". Same width, same height, stacked; the longer Greek label wraps inside the box instead of stretching it. */ /* `.button` is in each selector on purpose: it lifts these to (0,3,0) so they beat wp-admin's own `.wp-core-ui .button-small` (0,2,0), which carries its own min-height and line-height and was quietly winning the height even after the widths matched. Height is stated, not left to padding + line-height, which is what let the two drift apart in the first place. */ .aieo-wd-queue .aieo-wd-toggle.button, .aieo-wd-queue .aieo-wd-ret[data-mode="approve"].button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 240px; height: auto; min-height: 40px; margin: 0 0 6px; padding: 6px 12px; line-height: 1.35; font-size: 13px; white-space: normal; text-align: center; } /* .button-primary sets its own padding and line-height, and it is the reason the filled button came out taller than the outlined one even with a shared min-height. Restated here so both boxes are the same object. */ .aieo-wd-queue .aieo-wd-ret[data-mode="approve"].button.button-primary { padding: 6px 12px; line-height: 1.35; min-height: 40px; height: auto; } /* Label upload row: courier, file, button — one control in three parts, so one height. They were three different heights because a