/* ─── PMY theme · tokens and palette ─────────────────────────────────────
   Visual reference: the kit's demo with the "indigo" colour theme (only observed: none of its
   files is used). The theme is in two stylesheets, loaded after Cork and after legacy-table.css:
   - this one, pmy.css: tokens (dark and light), font, background and the colours of the
     Bootstrap and Cork components (buttons, badges, alerts, fields, tables, dropdown menus,
     tabs…), the login pages and the colours specific to the channels and the pages;
   - pmy-layout.css: structure and sizes (top bar, side menu, content, cards,
     tables, fields…) and PMY's own components, each with its sizes and colours together.
   The rules start from `#container` (menu and content) or from `html body[class]` (top bar,
   windows and panels outside the container) and outrank the styles written in the views without
   !important; !important stays where Cork or a view already uses it or writes the colour inline.

   Font: SHIPMY's, as SHIPMY declares it (24/10/2026, read in its public/assets/app.css: `--font:
   "Chakra Petch", sans-serif`; it loads no font file — no @font-face, no link — so every device
   shows Chakra Petch where it is installed and its own sans-serif elsewhere). PMY declares the
   same and loads nothing either, so the two read alike on every device; there is no file to
   copy and no licence to carry. Weights stay PMY's. Menu icons: Bootstrap Icons (MIT,
   fonts/bootstrap-icons/LICENSE.txt). Background: img/pmy-bg-globe.jpg (supplied by the client). */

/* ─── Local icons (Bootstrap Icons, MIT) ────────────────────────────────── */
@font-face { font-family: "PMY Icons"; font-style: normal; font-weight: 400; font-display: block; src: url("../../fonts/bootstrap-icons/bootstrap-icons.woff2") format("woff2"); }

/* ─── Tokens: dark (the kit's indigo theme) and light (PMY adaptation) ─── */
:root {
    /* The interface's one font (see above): every surface reads it — the page, its fields and
       tables, the menus, the badges, the charts (pmy-charts.js) and the map. The icon fonts and
       the monospaced figures keep their own. */
    --pmy-font: "Chakra Petch", sans-serif;
    --pmy-bg-image: url("../../img/pmy-bg-globe.jpg");
    /* THE EARTH'S BOX — the one reference for the background's globe on EVERY page, the login and
       PIN included (their rotating globe is drawn on a canvas of this same box): as wide as the
       viewport whether or not a scrollbar takes part of it, as tall as the LARGEST viewport (the
       URL bar retracted; 100vh where lvh is unknown), so neither a scrollbar, nor the URL bar, nor
       the phone's keyboard moves or rescales the globe from one page to the next. */
    --pmy-earth-width: 100vw;
    --pmy-earth-height: 100vh;
}

@supports (height: 100lvh) {
    :root { --pmy-earth-height: 100lvh; }
}

html body.dark,
html body.pmy-dark {
    --pmy-theme: #9091ff;
    --pmy-theme-rgb: 144, 145, 255;
    --pmy-on-theme: #000;
    --pmy-link: #9091ff;
    --pmy-primary: #6c98ff;
    --pmy-primary-rgb: 108, 152, 255;
    --pmy-success: #00ff9c;
    --pmy-success-rgb: 0, 255, 156;
    --pmy-info: #00d0fd;
    --pmy-info-rgb: 0, 208, 253;
    --pmy-warning: #ffa926;
    --pmy-warning-rgb: 255, 169, 38;
    --pmy-danger: #ff5454;
    --pmy-danger-rgb: 255, 84, 84;
    --pmy-violet: #d46aff;
    --pmy-violet-rgb: 212, 106, 255;
    --pmy-lime: #a3e635;
    --pmy-lime-rgb: 163, 230, 53;
    --pmy-on-violet: #000;
    --pmy-text: rgba(255, 255, 255, 0.75);
    --pmy-text-strong: #fff;
    --pmy-muted: rgba(255, 255, 255, 0.56);
    --pmy-faint: rgba(255, 255, 255, 0.35);
    --pmy-line: rgba(255, 255, 255, 0.25);
    --pmy-line-soft: rgba(255, 255, 255, 0.15);
    --pmy-line-faint: rgba(255, 255, 255, 0.08);
    --pmy-surface: rgba(255, 255, 255, 0.075);
    --pmy-surface-2: rgba(255, 255, 255, 0.1);
    --pmy-surface-3: rgba(255, 255, 255, 0.15);
    --pmy-strip: rgba(255, 255, 255, 0.19);
    --pmy-value: #9091ff;
    --pmy-menu-icon-bg: rgba(255, 255, 255, 0.15);
    --pmy-menu-icon-hover: rgba(255, 255, 255, 0.25);
    --pmy-surface-4: rgba(255, 255, 255, 0.25);
    --pmy-panel: rgba(18, 28, 31, 0.97);
    --pmy-panel-solid: #121c1f;
    --pmy-field: transparent;
    --pmy-backdrop: rgba(0, 0, 0, 0.72);
    /* The base under the background layers: their own tone, never a black that would show as a band
       wherever the layers are not painted yet (a fast scroll, the bounce past the page's ends). */
    --pmy-page: #071a20;
    --pmy-page-top: rgba(3, 12, 15, 0.95);
    --pmy-page-bottom: rgba(12, 38, 47, 0.95);
    /* Background grid (PMY design): lines every 15px, main ones every 75px, small cross where they meet. */
    --pmy-grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none'%3E%3Cpath d='M7.5 0V75M22.5 0V75M52.5 0V75M67.5 0V75M0 7.5H75M0 22.5H75M0 52.5H75M0 67.5H75' stroke='%23fff' stroke-opacity='.008'/%3E%3Cpath d='M37.5 0V75M0 37.5H75' stroke='%23fff' stroke-opacity='.02'/%3E%3Cpath d='M37.5 32.5v10M32.5 37.5h10' stroke='%23fff' stroke-opacity='.045' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
    --pmy-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    /* The theme's ink (white on the dark theme) and what sits on top of it when solid: the kit's
       "default" buttons, the fields' focus, the translucent bands and menus. */
    --pmy-ink-rgb: 255, 255, 255;
    --pmy-on-ink: #000;
    --pmy-btn-dark: #35434a;
    --pmy-btn-light: #c0cacf;
    --pmy-dropdown: rgba(255, 255, 255, 0.1);
    --pmy-window: rgba(255, 255, 255, 0.15);
    color-scheme: dark;
}

html body:not(.dark):not(.pmy-dark) {
    --pmy-theme: #5254e0;
    --pmy-theme-rgb: 82, 84, 224;
    --pmy-on-theme: #fff;
    --pmy-link: #3f41c4;
    --pmy-primary: #2f5bc9;
    --pmy-primary-rgb: 47, 91, 201;
    --pmy-success: #007a4b;
    --pmy-success-rgb: 0, 122, 75;
    --pmy-info: #00728d;
    --pmy-info-rgb: 0, 114, 141;
    --pmy-warning: #985205;
    --pmy-warning-rgb: 152, 82, 5;
    --pmy-danger: #c02525;
    --pmy-danger-rgb: 192, 37, 37;
    --pmy-violet: #8530b8;
    --pmy-violet-rgb: 133, 48, 184;
    --pmy-lime: #84cc16;
    --pmy-lime-rgb: 132, 204, 22;
    --pmy-on-violet: #fff;
    --pmy-text: rgba(21, 35, 40, 0.82);
    --pmy-text-strong: #0d1b1f;
    --pmy-muted: rgba(21, 35, 40, 0.72);
    --pmy-faint: rgba(21, 35, 40, 0.56);
    --pmy-line: rgba(21, 35, 40, 0.22);
    --pmy-line-soft: rgba(21, 35, 40, 0.14);
    --pmy-line-faint: rgba(21, 35, 40, 0.07);
    --pmy-surface: rgba(255, 255, 255, 0.66);
    --pmy-surface-2: rgba(21, 35, 40, 0.05);
    --pmy-surface-3: rgba(21, 35, 40, 0.09);
    --pmy-strip: rgba(21, 35, 40, 0.13);
    --pmy-value: #3f41c4;
    --pmy-menu-icon-bg: rgba(21, 35, 40, 0.08);
    --pmy-menu-icon-hover: rgba(21, 35, 40, 0.15);
    --pmy-surface-4: rgba(21, 35, 40, 0.14);
    --pmy-panel: rgba(250, 252, 252, 0.97);
    --pmy-panel-solid: #f7fafa;
    --pmy-field: rgba(255, 255, 255, 0.7);
    --pmy-backdrop: rgba(13, 27, 31, 0.45);
    --pmy-page: #e9eff1;
    --pmy-page-top: rgba(238, 244, 246, 0.95);
    --pmy-page-bottom: rgba(222, 232, 235, 0.93);
    --pmy-grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none'%3E%3Cpath d='M7.5 0V75M22.5 0V75M52.5 0V75M67.5 0V75M0 7.5H75M0 22.5H75M0 52.5H75M0 67.5H75' stroke='%23152328' stroke-opacity='.012'/%3E%3Cpath d='M37.5 0V75M0 37.5H75' stroke='%23152328' stroke-opacity='.035'/%3E%3Cpath d='M37.5 32.5v10M32.5 37.5h10' stroke='%23152328' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
    --pmy-shadow: 0 8px 24px rgba(13, 27, 31, 0.12);
    --pmy-ink-rgb: 21, 35, 40;
    --pmy-on-ink: #fff;
    --pmy-btn-dark: #35434a;
    --pmy-btn-light: #dfe5e8;
    --pmy-dropdown: rgba(250, 252, 252, 0.97);
    --pmy-window: rgba(250, 252, 252, 0.97);
    color-scheme: light;
}

/* Colours for small text on coloured veils (badges, states): the tint pulled towards the strong text. */
html body {
    --pmy-theme-ink: color-mix(in srgb, var(--pmy-theme) 62%, var(--pmy-text-strong));
    --pmy-primary-ink: color-mix(in srgb, var(--pmy-primary) 62%, var(--pmy-text-strong));
    --pmy-violet-ink: color-mix(in srgb, var(--pmy-violet) 62%, var(--pmy-text-strong));
    --pmy-danger-ink: color-mix(in srgb, var(--pmy-danger) 62%, var(--pmy-text-strong));
    --pmy-warning-ink: color-mix(in srgb, var(--pmy-warning) 72%, var(--pmy-text-strong));
    --pmy-info-ink: color-mix(in srgb, var(--pmy-info) 72%, var(--pmy-text-strong));
    --pmy-success-ink: color-mix(in srgb, var(--pmy-success) 80%, var(--pmy-text-strong));
}

/* ─── Page: font, background (globe, veil, grid) ────────────────────────── */
html body,
html body.dark,
html body:not(.dark) {
    font-family: var(--pmy-font);
    letter-spacing: 0.75px;
    color: var(--pmy-text);
    background-color: var(--pmy-page);
    background-image:
        var(--pmy-grid-tile),
        linear-gradient(180deg, var(--pmy-page-top), var(--pmy-page-bottom)),
        var(--pmy-bg-image);
    background-size: 75px 75px, cover, cover;
    background-position: center top, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: fixed;
}

/* THE ADMIN PAGES' BACKGROUND IS ITS OWN FIXED LAYER (23/10/2026: a black band while scrolling the
   Dashboard on a phone). A `background-attachment: fixed` background is laid out on the viewport
   the browser had when it painted it: on a phone the visible area grows while scrolling down (the
   URL bar retracts) and the fixed background is repainted on every scroll step, so a strip of the
   bare base colour — black in the dark theme — could show over the content. The same layers now
   sit on a fixed box of their own, as tall as the LARGEST viewport (100lvh: the URL bar retracted;
   100vh where lvh is unknown), so it always covers the visible area and scrolls on the compositor
   without being repainted; the body keeps only the base colour, which in the dark theme is the
   tone of the layer itself rather than black. Same images, sizes and positions as above: the look
   does not change. Since 25/10/2026 the login and PIN pages (body.pmy-access) draw the same layer
   too, so the globe does not change size or place from the login to the dashboard. */
html body[class] {
    background-image: none;
    background-attachment: scroll;
}
/* The login and PIN pages draw the same layer as an element of their own (layouts/partials/
   access-backdrop), their ::before being the corner glows: one rule, so the globe the login shows
   is the very globe of the dashboard — same box, image, veil, size, position and crop. */
html body[class]:not(.pmy-access)::before,
html body.pmy-access .pmy-earth {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: var(--pmy-earth-width);
    height: var(--pmy-earth-height);
    z-index: -1;
    pointer-events: none;
    background-color: var(--pmy-page);
    background-image:
        var(--pmy-grid-tile),
        linear-gradient(180deg, var(--pmy-page-top), var(--pmy-page-bottom)),
        var(--pmy-bg-image);
    background-size: 75px 75px, cover, cover;
    background-position: center top, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
}

/* Headings, fields and buttons inherit the font from the body; here only the components that
   declare their own (Bootstrap tooltips and popovers, charts, calendars). */
html body :is(.popover, .tooltip, .apexcharts-canvas, .apexcharts-tooltip, .apexcharts-legend, .flatpickr-calendar, .fc) {
    font-family: var(--pmy-font);
}

html body a { color: var(--pmy-link); }
html body a:hover { color: var(--pmy-text-strong); }
/* Written without ancestors on purpose: "html body ::selection" made the browser match the rule's
   ancestors for every element at every style recalculation (about 100ms more on the Dashboard's
   load, where the charts force hundreds of them); the colour is the same. */
::selection { background: rgba(var(--pmy-theme-rgb), 0.3); color: var(--pmy-text-strong); }

html body #container .main-container,
html body #container #content,
html body #container .main-content,
html body #container .layout-px-spacing,
html body #container .middle-content,
html body #container .footer-wrapper {
    background: transparent;
}

/* Top bar: fixed, it darkens the content that scrolls beneath it. */
html body[class] .header-container {
    background: transparent;
}

html body[class] .header-container .header.navbar {
    background: linear-gradient(180deg, var(--pmy-page-top) 0%, var(--pmy-page-top) 70%, transparent 100%);
    box-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom-color: transparent;
}

html body[class] .header-container .search-form-control,
html body[class] .header-container .search-bar .form-control {
    background: var(--pmy-surface-3);
    background-color: var(--pmy-surface-3) !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    color: var(--pmy-text) !important;
    box-shadow: none;
}

html body[class] .header-container .search-form-control::placeholder { color: var(--pmy-muted); }
html body[class] .header-container .search-bar svg { color: var(--pmy-muted); stroke: currentColor; }
html body[class] .header-container .search-area .badge {
    background: transparent;
    color: var(--pmy-text-strong);
    border-color: transparent;
    border-radius: 0;
}

/* Top bar icons: the moon and the sun filled like the Last Login icon, in the text colour
   (Cork colours the sun yellow, with long rules). */
html body[class] .header-container .header .header-item .theme-toggle-item .theme-toggle svg:is(.light-mode, .dark-mode) { color: var(--pmy-text); fill: currentColor; stroke: none; }
html body[class] .header-container .header .header-item .theme-toggle-item .theme-toggle:hover svg:is(.light-mode, .dark-mode) { color: var(--pmy-text-strong); }
html body[class] .header-container .btn-toggle svg { color: var(--pmy-text); stroke: currentColor; }
/* The avatar stays round (as in the kit) and its animated ring stays PMY's green circle
   (requested by the client, 22/10/2026): the same greens as the layout. */
html body[class] .header-container .pmy-user-avatar::before {
    background: conic-gradient(from 0deg, #00c9a7, #1bff97, #00ffa6 35%, transparent 55%, transparent 90%, #00c9a7);
}
html body[class] .header-container .pmy-user-avatar {
    background-color: var(--pmy-surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--pmy-line);
}

/* ─── Brand ────────────────────────────────────────────────────────────── */
/* Side menu (entries, icons, footer): a single component in pmy-layout.css. */

/* PMY brand: same text and same version, the theme's colours. */
html body[class] .pmy-brand-text {
    background: linear-gradient(90deg, #fff 0%, var(--pmy-theme) 50%, #fff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

html body[class]:not(.dark) .pmy-brand-text {
    background-image: linear-gradient(90deg, var(--pmy-text-strong) 0%, var(--pmy-theme) 50%, var(--pmy-text-strong) 100%);
}

html body[class] .pmy-brand-version { color: var(--pmy-theme) !important; }
/* PMY in the footer: the solid accent tint instead of the purple gradient. */
html body[class] .pmy-footer-text {
    background: none !important;
    -webkit-text-fill-color: var(--pmy-theme);
    color: var(--pmy-theme);
    animation: none;
}

/* ─── Chip ─────────────────────────────────────────────────────────────── */
html body #container .pmy-chip {
    background: var(--pmy-surface-2);
    color: var(--pmy-text);
    border-color: var(--pmy-line-soft);
    border-radius: 0;
}

/* ─── Cards (theme widgets) ────────────────────────────────────────────── */
html body #container .widget,
html body #container .dashboard-legacy .widget,
html body #container .card,
html body #container .widget-content-area,
html body #container .statbox {
    background-color: var(--pmy-surface);
    background-image: none;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    color: var(--pmy-text);
}

/* Heading strips, titles and sizes of the cards: in pmy-layout.css. */

/* Number tiles (*-stat, .pmy-page-stat, *-new-stat): a single component in pmy-layout.css. */

html body #container .widget .widget-heading h5,
html body #container .widget h5,
html body #container .widget .widget-title,
html body #container .card .card-title,
html body #container .card-header {
    color: var(--pmy-text-strong);
}

html body #container .card-header,
html body #container .card-footer {
    background-color: var(--pmy-strip);
    border-color: transparent;
    border-radius: 0;
}

html body #container .card-footer { background-color: transparent; border-top-color: var(--pmy-line-soft); }

html body #container .card-body { color: var(--pmy-text); }

/* ─── Tables ───────────────────────────────────────────────────────────── */
html body #container .table,
html body #container .dashboard-legacy .legacy-table,
html body #container .table > :not(caption) > * > * {
    --bs-table-color: var(--pmy-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--pmy-line-soft);
    --bs-table-striped-bg: var(--pmy-surface);
    --bs-table-hover-bg: rgba(var(--pmy-theme-rgb), 0.05);
    --bs-table-hover-color: var(--pmy-text-strong);
    color: var(--pmy-text);
    border-color: var(--pmy-line-soft);
}

html body #container .table > thead > tr > th,
html body #container .table thead th,
html body #container .dashboard-legacy .legacy-table > thead > tr > th,
html body #container .legacy-table:not(.channels-table) > thead > tr > th {
    color: var(--pmy-text-strong);
    border-color: var(--pmy-line);
    border-radius: 0;
}

html body #container .table > tbody > tr > td,
html body #container .dashboard-legacy .legacy-table > tbody > tr > td,
html body #container .legacy-table:not(.channels-table) > tbody > tr > td {
    color: var(--pmy-text);
    border-color: var(--pmy-line-soft);
    background-color: transparent;
}

html body #container .table-hover > tbody > tr:hover > *,
html body #container .dashboard-legacy .legacy-table.table-hover > tbody > tr:hover > td {
    background-color: rgba(var(--pmy-theme-rgb), 0.05);
    color: var(--pmy-text-strong);
}

html body #container .table > tfoot > tr > *,
html body #container .dashboard-legacy .legacy-table > tfoot > tr > * {
    color: var(--pmy-text-strong);
    border-color: var(--pmy-line-soft);
}

/* ─── Buttons ──────────────────────────────────────────────────────────────
   As in the kit: primary = the theme accent, success = the success green, the others in the
   demo's palette. Cork colours many buttons with !important: those colours are !important here too. */
html body #container .btn { border-radius: 0; box-shadow: none; }
html body #container .btn:focus-visible { box-shadow: 0 0 0 0.2rem rgba(var(--pmy-theme-rgb), 0.35); }
html body #container .btn.disabled,
html body #container .btn:disabled { opacity: 0.45; }

/* Solid. */
html body #container .btn-primary:not(.btn-outline-primary) { background-color: var(--pmy-theme) !important; border-color: var(--pmy-theme) !important; color: var(--pmy-on-theme) !important; }
html body #container .btn-primary:is(:hover, :focus-visible, :active, .active) { background-color: rgba(var(--pmy-theme-rgb), 0.82) !important; border-color: rgba(var(--pmy-theme-rgb), 0.82) !important; }

/* The glow of the project's button (Insert Coin) on normal and large solid buttons: a thin line and
   a shadow in their colour. The small ones (tables, tabs, strips) stay flat; the keyboard
   focus keeps its ring. */
html body #container .btn.btn-primary:not(.btn-outline-primary):not(.btn-sm):not(:focus-visible),
html body #container .btn.btn-pmy-purple:not(.btn-sm):not(:focus-visible) { box-shadow: 0 0 0 1px var(--pmy-theme), 0 4px 14px rgba(var(--pmy-theme-rgb), 0.25); }
html body #container .btn.btn-success:not(.btn-outline-success):not(.btn-sm):not(:focus-visible) { box-shadow: 0 0 0 1px var(--pmy-success), 0 4px 14px rgba(var(--pmy-success-rgb), 0.22); }
html body #container .btn.btn-danger:not(.btn-sm):not(:focus-visible) { box-shadow: 0 0 0 1px var(--pmy-danger), 0 4px 14px rgba(var(--pmy-danger-rgb), 0.22); }
html body #container .btn.btn-warning:not(.btn-sm):not(:focus-visible) { box-shadow: 0 0 0 1px var(--pmy-warning), 0 4px 14px rgba(var(--pmy-warning-rgb), 0.22); }
html body #container .btn.btn-info:not(.btn-sm):not(:focus-visible) { box-shadow: 0 0 0 1px var(--pmy-info), 0 4px 14px rgba(var(--pmy-info-rgb), 0.22); }

html body #container .btn-pmy-purple,
html body #container .dashboard-legacy .btn.btn-pmy-action {
    background-color: var(--pmy-theme);
    border-color: var(--pmy-theme);
    color: var(--pmy-on-theme);
}

html body #container .btn-pmy-purple:hover,
html body #container .dashboard-legacy .btn.btn-pmy-action:hover {
    background-color: rgba(var(--pmy-theme-rgb), 0.82);
    border-color: rgba(var(--pmy-theme-rgb), 0.82);
    color: var(--pmy-on-theme);
}

/* THE RESET, THE SAME ON EVERY PAGE (by user decision, 23/10/2026): the word "Reset" on the kit's
   purple button (its btn-purple: the theme's violet, black text on the dark theme, white on the
   light one), in the normal size of the project's buttons and as wide as its word, never a
   column-wide bar holding a ↻. Every filter bar's reset carries it; what it does (its link, its
   wire:click) stays the view's. Above the channel pages' "-reset" accent rule. */
html body #container .btn.btn-pmy-reset {
    width: auto;
    white-space: nowrap;
    background-color: var(--pmy-violet) !important;
    border-color: var(--pmy-violet) !important;
    color: var(--pmy-on-violet) !important;
}
html body #container .btn.btn-pmy-reset:is(:hover, :focus-visible, :active) {
    background-color: rgba(var(--pmy-violet-rgb), 0.82) !important;
    border-color: rgba(var(--pmy-violet-rgb), 0.82) !important;
}
html body #container .btn.btn-pmy-reset:not(.btn-sm):not(:focus-visible) { box-shadow: 0 0 0 1px var(--pmy-violet), 0 4px 14px rgba(var(--pmy-violet-rgb), 0.25); }

html body #container .btn-success:not(.btn-outline-success) { background-color: var(--pmy-success) !important; border-color: var(--pmy-success) !important; color: #000 !important; }
html body #container .btn-success:is(:hover, :focus-visible, :active, .active) { background-color: rgba(var(--pmy-success-rgb), 0.82) !important; border-color: rgba(var(--pmy-success-rgb), 0.82) !important; }
html body #container .btn-info { background-color: var(--pmy-info) !important; border-color: var(--pmy-info) !important; color: #000 !important; }
html body #container .btn-warning { background-color: var(--pmy-warning) !important; border-color: var(--pmy-warning) !important; color: #000 !important; }
html body #container .btn-danger { background-color: var(--pmy-danger) !important; border-color: var(--pmy-danger) !important; color: #fff !important; }
/* On the dark theme's light red, black text reads better than white (6:1 versus 3:1). */
html body.dark #container :is(.btn-danger, .btn.warehouse-action-btn.is-danger) { color: #000 !important; }
html body #container .btn-secondary { background-color: var(--pmy-surface-3) !important; border-color: transparent !important; color: var(--pmy-text-strong) !important; }
/* Lime (12/11/2026, Settings → API → Download pmymanager.zip): solid lime, black text on both themes
   (the lighter lime on dark, the deeper one on light), the families' own hover. */
html body #container .btn-lime { background-color: var(--pmy-lime) !important; border-color: var(--pmy-lime) !important; color: #000 !important; }
html body #container .btn-lime:is(:hover, :focus-visible, :active, .active) { background-color: rgba(var(--pmy-lime-rgb), 0.82) !important; border-color: rgba(var(--pmy-lime-rgb), 0.82) !important; color: #000 !important; }

html body #container .btn-dark { background-color: var(--pmy-btn-dark); border-color: var(--pmy-btn-dark); color: #fff; }
html body #container .btn-light { background-color: var(--pmy-btn-light); border-color: var(--pmy-btn-light); color: #000; }

/* Outlined. */
html body #container .btn-outline-primary { background-color: transparent !important; border-color: var(--pmy-theme) !important; color: var(--pmy-theme) !important; }
html body #container .btn-outline-primary:is(:hover, :focus-visible, .active) { background-color: rgba(var(--pmy-theme-rgb), 0.12) !important; }

html body #container .btn.btn-outline-pmy-purple {
    background-color: transparent;
    border-color: var(--pmy-theme);
    color: var(--pmy-theme);
}

html body #container .btn-outline-pmy-purple:hover,
html body #container .btn-outline-pmy-purple.active {
    background-color: rgba(var(--pmy-theme-rgb), 0.12);
    border-color: var(--pmy-theme);
    color: var(--pmy-theme);
}

html body #container .btn-outline-success { background-color: transparent !important; border-color: var(--pmy-success) !important; color: var(--pmy-success) !important; }
html body #container .btn-outline-success:is(:hover, :focus-visible, .active) { background-color: rgba(var(--pmy-success-rgb), 0.12) !important; }
html body #container .btn-outline-danger { background-color: transparent !important; border-color: var(--pmy-danger) !important; color: var(--pmy-danger) !important; }
html body #container .btn-outline-danger:is(:hover, :focus-visible, .active) { background-color: rgba(var(--pmy-danger-rgb), 0.12) !important; }
html body #container .btn-outline-secondary { background-color: transparent !important; border-color: rgba(var(--pmy-ink-rgb), 0.85) !important; color: rgba(var(--pmy-ink-rgb), 0.85) !important; }
html body #container .btn-outline-secondary:is(:hover, :focus-visible, .active) { background-color: rgba(var(--pmy-ink-rgb), 0.85) !important; color: var(--pmy-on-ink) !important; }

/* Segmented choices (x-sync.choice: radio .btn-check + .btn label, e.g. Type + / −): the chosen
   entry is solid in the theme colour, the others stay outlined — you see at once which one applies.
   Specificity above the rule that tints the outlined buttons' text (":not(:hover):not(.active)"). */
html body #container .btn-group > .btn-check:checked + .btn:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger) {
    background-color: var(--pmy-theme) !important;
    border-color: var(--pmy-theme) !important;
    color: var(--pmy-on-theme) !important;
}
html body #container .btn-group > .btn-check:focus-visible + .btn { box-shadow: 0 0 0 0.2rem rgba(var(--pmy-theme-rgb), 0.35); }

html body #container .btn-outline-dark,
html body #container .btn-outline-light {
    background-color: transparent;
    border-color: var(--pmy-line);
    color: var(--pmy-text);
}

html body #container :is(.btn-outline-dark, .btn-outline-light):hover,
html body #container :is(.btn-outline-dark, .btn-outline-light).active {
    background-color: var(--pmy-surface-2);
    border-color: var(--pmy-line);
    color: var(--pmy-text-strong);
}

html body #container .btn-outline-warning { background-color: transparent; border-color: var(--pmy-warning); color: var(--pmy-warning); }
html body #container .btn-outline-info { background-color: transparent; border-color: var(--pmy-info); color: var(--pmy-info); }

/* The theme's "light" variants (soft badges and buttons): coloured text on a veil. */
html body #container .btn-light-primary, html body #container .badge-light-primary { background-color: rgba(var(--pmy-primary-rgb), 0.1); border-color: var(--pmy-primary); color: var(--pmy-primary-ink); }
html body #container .btn-light-success, html body #container .badge-light-success { background-color: rgba(var(--pmy-success-rgb), 0.1); border-color: var(--pmy-success); color: var(--pmy-success-ink); }
html body #container .btn-light-info, html body #container .badge-light-info { background-color: rgba(var(--pmy-info-rgb), 0.1); border-color: var(--pmy-info); color: var(--pmy-info-ink); }
html body #container .btn-light-warning, html body #container .badge-light-warning { background-color: rgba(var(--pmy-warning-rgb), 0.1); border-color: var(--pmy-warning); color: var(--pmy-warning-ink); }
html body #container .btn-light-danger, html body #container .badge-light-danger { background-color: rgba(var(--pmy-danger-rgb), 0.1); border-color: var(--pmy-danger); color: var(--pmy-danger-ink); }
html body #container .btn-light-secondary, html body #container .badge-light-secondary, html body #container .btn-light-dark, html body #container .badge-light-dark { background-color: var(--pmy-surface-2); border-color: var(--pmy-line-soft); color: var(--pmy-text); }

/* ─── Badge ────────────────────────────────────────────────────────────── */
html body #container .badge { border-radius: 0; }
html body #container .badge.bg-primary, html body #container .badge-primary { background-color: rgba(var(--pmy-primary-rgb), 0.15) !important; color: var(--pmy-primary-ink) !important; }
html body #container .badge.bg-success, html body #container .badge-success { background-color: rgba(var(--pmy-success-rgb), 0.15) !important; color: var(--pmy-success-ink) !important; }
html body #container .badge.bg-info, html body #container .badge-info { background-color: rgba(var(--pmy-info-rgb), 0.15) !important; color: var(--pmy-info-ink) !important; }
html body #container .badge.bg-warning, html body #container .badge-warning { background-color: rgba(var(--pmy-warning-rgb), 0.15) !important; color: var(--pmy-warning-ink) !important; }
html body #container .badge.bg-danger, html body #container .badge-danger { background-color: rgba(var(--pmy-danger-rgb), 0.15) !important; color: color-mix(in srgb, var(--pmy-danger) 50%, var(--pmy-text-strong)) !important; }
html body #container .badge.bg-secondary, html body #container .badge-secondary, html body #container .badge.bg-dark, html body #container .badge-dark, html body #container .badge.bg-light {
    background-color: var(--pmy-surface-2) !important;
    color: var(--pmy-text) !important;
}

/* ─── Alerts ───────────────────────────────────────────────────────────── */
html body #container .alert { border-radius: 0; box-shadow: none; }
html body #container .alert-primary, html body #container .alert-light-primary { background-color: rgba(var(--pmy-primary-rgb), 0.1); border-color: rgba(var(--pmy-primary-rgb), 0.6); color: var(--pmy-primary-ink); }
html body #container .alert-success, html body #container .alert-light-success { background-color: rgba(var(--pmy-success-rgb), 0.1); border-color: rgba(var(--pmy-success-rgb), 0.6); color: var(--pmy-success-ink); }
html body #container .alert-info, html body #container .alert-light-info { background-color: rgba(var(--pmy-info-rgb), 0.1); border-color: rgba(var(--pmy-info-rgb), 0.6); color: var(--pmy-info-ink); }
html body #container .alert-warning, html body #container .alert-light-warning { background-color: rgba(var(--pmy-warning-rgb), 0.1); border-color: rgba(var(--pmy-warning-rgb), 0.6); color: var(--pmy-warning-ink); }
html body #container .alert-danger, html body #container .alert-light-danger { background-color: rgba(var(--pmy-danger-rgb), 0.1); border-color: rgba(var(--pmy-danger-rgb), 0.6); color: var(--pmy-danger-ink); }
html body #container .alert-secondary, html body #container .alert-light, html body #container .alert-light-secondary, html body #container .alert-dark, html body #container .alert-light-dark { background-color: var(--pmy-surface-2); border-color: var(--pmy-line-soft); color: var(--pmy-text); }
html body #container .alert :is(strong, b) { color: inherit; }

/* ─── Fields ───────────────────────────────────────────────────────────── */
html body #container .form-control,
html body #container .form-select,
html body #container .input-group-text,
html body #container textarea.form-control {
    background-color: var(--pmy-field);
    border-color: var(--pmy-line);
    border-radius: 0;
    color: var(--pmy-text-strong);
    box-shadow: none;
}

html body #container .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2390a2aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* The file field's button, like the group label: a light background and a line that separates it. */
html body #container .form-control::file-selector-button {
    color: var(--pmy-text-strong);
    background-color: rgba(var(--pmy-ink-rgb), 0.1);
    border-color: var(--pmy-line);
    border-radius: 0;
}

/* The label next to the field (input-group) has the kit's light background. */
html body #container .input-group-text { background-color: rgba(var(--pmy-ink-rgb), 0.1); }

html body #container .form-control::placeholder { color: var(--pmy-faint); }

html body #container .form-control:focus,
html body #container .form-select:focus {
    background-color: var(--pmy-field);
    border-color: rgba(var(--pmy-ink-rgb), 0.5);
    color: var(--pmy-text-strong);
    box-shadow: 0 0 0 3px rgba(var(--pmy-ink-rgb), 0.15);
}

html body #container .form-control:disabled,
html body #container .form-control[readonly]:not(.search-form-control),
html body #container .form-select:disabled {
    background-color: var(--pmy-surface-2);
    color: var(--pmy-muted);
}

html body #container .form-select option { background-color: var(--pmy-panel-solid); color: var(--pmy-text-strong); }
html body #container .form-label,
html body #container label { color: var(--pmy-text); }
html body #container .form-text,
html body #container .text-muted { color: var(--pmy-muted) !important; }

html body #container .form-check-input {
    background-color: transparent;
    border-color: var(--pmy-line);
    box-shadow: none;
}

html body #container .form-check-input[type="checkbox"]:not([role="switch"]) { border-radius: 0; }
html body #container .form-check-input:checked {
    background-color: var(--pmy-theme);
    border-color: var(--pmy-theme);
}

html body #container .form-check-input[type="checkbox"]:checked:not([role="switch"]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

html body #container .form-switch .form-check-input { border-radius: 0 !important; }

html body #container .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3cpath fill='%2390a2aa' d='M-3-3h6v6h-6z'/%3e%3c/svg%3e");
}

html body #container .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3cpath fill='%23000' d='M-3-3h6v6h-6z'/%3e%3c/svg%3e");
}

html body #container .form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--pmy-ink-rgb), 0.15); border-color: rgba(var(--pmy-ink-rgb), 0.5); }
html body #container .is-invalid,
html body #container .was-validated .form-control:invalid { border-color: var(--pmy-danger) !important; }
html body #container .invalid-feedback { color: var(--pmy-danger); }

/* ─── Dropdown menus, tooltips, popovers ────────────────────────────────── */
html body #container .dropdown-menu {
    background-color: var(--pmy-dropdown);
    border-color: transparent;
    border-radius: 0;
    box-shadow: var(--pmy-shadow);
    color: var(--pmy-text);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

html body #container .dropdown-menu .dropdown-item { color: var(--pmy-text); border-radius: 0; }
html body #container .dropdown-menu .dropdown-item:hover,
html body #container .dropdown-menu .dropdown-item:focus { background-color: rgba(var(--pmy-theme-rgb), 0.1); color: var(--pmy-text-strong); }
html body #container .dropdown-menu .dropdown-item.active,
html body #container .dropdown-menu .dropdown-item:active { background-color: var(--pmy-theme); color: var(--pmy-on-theme); }
html body #container .dropdown-divider { border-color: var(--pmy-line-soft); }

/* Modal windows: component in pmy-layout.css. The dark theme's light X applies everywhere. */
html body.dark .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

html body[class] .tooltip .tooltip-inner {
    background-color: var(--pmy-panel-solid);
    color: var(--pmy-text-strong);
    border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--pmy-line);
}

html body[class] .popover {
    background-color: var(--pmy-panel);
    border-color: var(--pmy-line);
    border-radius: 0;
    color: var(--pmy-text);
}

/* ─── Tab navigation, pagination, groups ──────────────────────────────── */
html body #container .nav-tabs { border-color: var(--pmy-line-soft); }
html body #container .nav-tabs .nav-link,
html body #container .nav-pills .nav-link { color: var(--pmy-text); border-radius: 0; }
html body #container .nav-tabs .nav-link:hover { color: var(--pmy-text-strong); border-color: var(--pmy-line-soft); }
html body #container .nav-tabs .nav-link.active {
    color: var(--pmy-theme);
    background-color: transparent;
    border-color: var(--pmy-line-soft) var(--pmy-line-soft) transparent;
}

html body #container .nav-pills .nav-link.active,
html body #container .nav-pills .show > .nav-link {
    background-color: var(--pmy-theme);
    color: var(--pmy-on-theme);
}

html body #container .page-link {
    background-color: var(--pmy-surface-2);
    border-color: var(--pmy-line);
    color: var(--pmy-text);
    border-radius: 0 !important;
}

html body #container .page-item.active .page-link { background-color: var(--pmy-theme); border-color: var(--pmy-theme); color: var(--pmy-on-theme); }
html body #container .page-item.disabled .page-link { background-color: transparent; color: var(--pmy-faint); }

html body #container .list-group-item {
    background-color: transparent;
    border-color: var(--pmy-line);
    color: var(--pmy-text);
}

html body #container .list-group-item-action:is(:hover, :focus) { background-color: rgba(var(--pmy-ink-rgb), 0.1); color: var(--pmy-text-strong); }

html body #container .list-group-item.active { background-color: var(--pmy-theme); border-color: var(--pmy-theme); color: var(--pmy-on-theme); }

html body #container .progress { background-color: var(--pmy-surface-3); border-radius: 0; box-shadow: none; }
html body #container .progress .progress-bar { background-color: var(--pmy-theme); border-radius: 0; }

html body #container hr { border-color: var(--pmy-line); opacity: 1; }
html body #container .border,
html body #container .border-top,
html body #container .border-bottom,
html body #container .border-start,
html body #container .border-end { border-color: var(--pmy-line-soft) !important; }

/* ─── Text utilities ───────────────────────────────────────────────────── */
html body #container .text-primary { color: var(--pmy-primary) !important; }
html body #container .text-success { color: var(--pmy-success) !important; }
html body #container .text-info { color: var(--pmy-info) !important; }
html body #container .text-warning { color: var(--pmy-warning) !important; }
html body #container .text-danger { color: var(--pmy-danger) !important; }
html body.dark .text-white,
html body.dark .text-dark\:800 { color: var(--pmy-text-strong) !important; }

/* ─── Calendar (flatpickr) ─────────────────────────────────────────────────
   Like the kit's datepicker (react-datetime): a veiled panel without border or pointer, the heading
   with the two arrows and the year in the centre, the grid of thin lines; the chosen month on a
   light background, the current month marked by the small triangle in the corner. Only the look:
   the dashboard field stays the month-and-year one (monthSelect plugin), with the same controls. */
/* !important where the dashboard view forces the light-theme calendar with !important. */
html body[class] .flatpickr-calendar {
    padding: 10px;
    background: var(--pmy-dropdown) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0 !important;
    border-radius: 0;
    box-shadow: 0 8px 16px rgba(var(--pmy-ink-rgb), 0.075) !important;
    color: var(--pmy-text) !important;
    font-family: var(--pmy-font);
}

html body[class] .flatpickr-calendar:has(.flatpickr-monthSelect-months) { width: 252px; }
html body[class] .flatpickr-calendar:is(.arrowTop, .arrowBottom)::before,
html body[class] .flatpickr-calendar:is(.arrowTop, .arrowBottom)::after { content: none; }

html body[class] .flatpickr-calendar :is(.flatpickr-months, .flatpickr-month, .flatpickr-weekdays, .flatpickr-weekday, span.flatpickr-weekday) {
    background: transparent;
    color: var(--pmy-text-strong);
    fill: var(--pmy-text-strong);
}

/* Heading: ‹ year › */
html body[class] .flatpickr-calendar .flatpickr-months { position: relative; height: 30px; margin: 0 0 8px; }
html body[class] .flatpickr-calendar .flatpickr-month { height: 30px; }
html body[class] .flatpickr-calendar .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month) {
    top: 0;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--pmy-text) !important;
    fill: var(--pmy-text) !important;
}
html body[class] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month { left: 0; }
html body[class] .flatpickr-calendar .flatpickr-months .flatpickr-next-month { right: 0; }
html body[class] .flatpickr-calendar .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month) svg { width: 11px; height: 11px; fill: currentColor; }
html body[class] .flatpickr-calendar .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month):hover { color: var(--pmy-text-strong) !important; fill: var(--pmy-text-strong) !important; background: rgba(var(--pmy-ink-rgb), 0.1); }
html body[class] .flatpickr-calendar .flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 30px;
}
html body[class] .flatpickr-calendar .flatpickr-current-month .numInputWrapper { width: 6ch; }
html body[class] .flatpickr-calendar .flatpickr-current-month input.cur-year {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    color: var(--pmy-text-strong) !important;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Month grid: three per row, thin lines like the kit's cells. */
html body[class] .flatpickr-calendar .flatpickr-monthSelect-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--pmy-line-soft);
    border-left: 1px solid var(--pmy-line-soft);
}
html body[class] .flatpickr-calendar .flatpickr-monthSelect-month {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 34px;
    margin: 0;
    padding: 0 4px;
    font-size: 12px;
    line-height: 18px;
    color: var(--pmy-text) !important;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--pmy-line-soft);
    border-bottom: 1px solid var(--pmy-line-soft);
    border-radius: 0;
}

html body[class] .flatpickr-calendar :is(.flatpickr-day, .flatpickr-monthSelect-month) { border-radius: 0; }
html body[class] .flatpickr-calendar .flatpickr-day { color: var(--pmy-text); }
html body[class] .flatpickr-calendar :is(.flatpickr-day, .flatpickr-monthSelect-month):is(:hover, :focus) { background: rgba(var(--pmy-ink-rgb), 0.1) !important; border-color: var(--pmy-line-soft) !important; color: var(--pmy-text-strong) !important; outline: 0; }
html body[class] .flatpickr-calendar :is(.flatpickr-day.selected, .flatpickr-monthSelect-month.selected) { background: rgba(var(--pmy-ink-rgb), 0.25) !important; border-color: var(--pmy-line-soft) !important; color: var(--pmy-text-strong) !important; }
html body[class] .flatpickr-calendar .flatpickr-day.selected { border-color: transparent; }
html body[class] .flatpickr-calendar .flatpickr-monthSelect-month.flatpickr-disabled { color: var(--pmy-faint); background: transparent; }

/* The current month: the small triangle in the bottom-right corner, like "today" in the kit. */
html body[class] .flatpickr-calendar :is(.flatpickr-day, .flatpickr-monthSelect-month).today::before {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    border-left: 6px solid transparent;
    border-bottom: 6px solid var(--pmy-text-strong);
}
html body[class] .flatpickr-calendar .flatpickr-day.today { position: relative; border-color: transparent; }

/* ─── ApexCharts charts: surrounding colours only (series and meanings unchanged) ── */
html body #container .apexcharts-canvas text,
html body #container .apexcharts-canvas .apexcharts-text { font-family: var(--pmy-font) !important; }
html body #container .apexcharts-canvas :is(.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-xaxis-title-text, .apexcharts-yaxis-title-text) { fill: var(--pmy-text); }
html body #container .apexcharts-canvas .apexcharts-gridline,
html body #container .apexcharts-canvas .apexcharts-xaxis line,
html body #container .apexcharts-canvas .apexcharts-yaxis line,
html body #container .apexcharts-canvas .apexcharts-xaxis-tick { stroke: var(--pmy-line-soft); }
html body #container .apexcharts-legend-text { color: var(--pmy-text) !important; font-family: var(--pmy-font) !important; }
/* The charts' look (grid bands, axes, square legend, bars, labels): js/admin/pmy-charts.js. */
/* Values written on the bars and in the line charts' boxes: the demo's solid colour (Cork
   replaces it with the dark theme's grey). Black on the dark theme's light tints, white on the
   light theme's dark tints; always black in the line charts' boxes. */
html body.dark #container .apexcharts-bar-series .apexcharts-datalabel { fill: #000 !important; }
html body:not(.dark) #container .apexcharts-bar-series .apexcharts-datalabel { fill: #fff !important; }
html body[class] #container :is(.apexcharts-line-series, .apexcharts-area-series) .apexcharts-datalabel { fill: #000 !important; }

/* ─── Chart tooltips: one look for every chart ──────────────────────────
   Whatever draws it — ApexCharts on the Dashboard, Analytics and the supplier product page, the
   custom Monthly Channels tooltip, the Orders Map — a chart's hover window is the same panel: the
   theme's panel colour (near-opaque, over a blur), a thin line around it, no radius, the theme's
   shadow; its title on the cards' strip in 10px capitals; one row per series at 11px with the
   series' colour in a square (the legends' marker), the name muted and the figure strong. The
   axis tooltips wear the same panel. #container outranks the base theme's dark title band and
   the older per-page tooltip rules. */
html body[class] #container .apexcharts-tooltip,
html body[class] #container .apexcharts-tooltip.apexcharts-theme-dark,
html body[class] #container .apexcharts-tooltip.apexcharts-theme-light,
html body .jvm-tooltip {
    padding: 0;
    font-family: var(--pmy-font) !important;
    font-size: 11px !important;
    line-height: 16.5px;
    letter-spacing: 0.75px;
    color: var(--pmy-text-strong) !important;
    background: var(--pmy-panel) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--pmy-line-soft) !important;
    border-radius: 0 !important;
    box-shadow: var(--pmy-shadow) !important;
}

html body[class] #container .apexcharts-tooltip .apexcharts-tooltip-title {
    margin: 0 !important;
    padding: 4px 10px !important;
    font-family: var(--pmy-font) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 15px !important;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    color: var(--pmy-text-strong) !important;
    background: var(--pmy-strip) !important;
    border: 0 !important;
}

html body[class] #container .apexcharts-tooltip .apexcharts-tooltip-series-group { padding: 0 10px !important; }
html body[class] #container .apexcharts-tooltip .apexcharts-tooltip-series-group.apexcharts-active,
html body[class] #container .apexcharts-tooltip .apexcharts-tooltip-series-group[style*="display: flex"] { padding-top: 2px !important; padding-bottom: 2px !important; }
html body[class] #container .apexcharts-tooltip .apexcharts-tooltip-title ~ .apexcharts-tooltip-series-group:nth-child(2) { margin-top: 4px; }
html body[class] #container .apexcharts-tooltip .apexcharts-tooltip-series-group:last-child { margin-bottom: 4px; }
html body[class] #container .apexcharts-tooltip .apexcharts-tooltip-marker {
    width: 8px !important;
    height: 8px !important;
    margin-right: 6px !important;
    border-radius: 0 !important;
}
html body[class] #container .apexcharts-tooltip :is(.apexcharts-tooltip-text, .apexcharts-tooltip-y-group, .apexcharts-tooltip-z-group, .apexcharts-tooltip-text-y-label, .apexcharts-tooltip-text-y-value) {
    font-family: var(--pmy-font) !important;
    font-size: 11px !important;
    line-height: 16.5px !important;
}
html body[class] #container .apexcharts-tooltip :is(.apexcharts-tooltip-y-group, .apexcharts-tooltip-z-group) { padding: 0 !important; }
html body[class] #container .apexcharts-tooltip :is(.apexcharts-tooltip-text-y-label, .apexcharts-tooltip-text-z-label, .apexcharts-tooltip-text-goals-label) { color: var(--pmy-muted) !important; }
html body[class] #container .apexcharts-tooltip :is(.apexcharts-tooltip-text-y-value, .apexcharts-tooltip-text-z-value, .apexcharts-tooltip-text-goals-value) {
    margin-left: 4px;
    font-weight: 600 !important;
    color: var(--pmy-text-strong) !important;
}

/* The Orders Map's window has one line: the same panel, its text at the rows' size. */
html body .jvm-tooltip { padding: 4px 10px !important; }

html body[class] #container :is(.apexcharts-xaxistooltip, .apexcharts-yaxistooltip) {
    font-family: var(--pmy-font) !important;
    font-size: 10px !important;
    letter-spacing: 0.75px;
    color: var(--pmy-text-strong) !important;
    background: var(--pmy-panel) !important;
    border: 1px solid var(--pmy-line-soft) !important;
    border-radius: 0 !important;
    box-shadow: var(--pmy-shadow) !important;
}
html body[class] #container .apexcharts-xaxistooltip-bottom::before { border-bottom-color: var(--pmy-line-soft) !important; }
html body[class] #container .apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--pmy-panel-solid) !important; }
html body[class] #container .apexcharts-xaxistooltip-top::before { border-top-color: var(--pmy-line-soft) !important; }
html body[class] #container .apexcharts-xaxistooltip-top::after { border-top-color: var(--pmy-panel-solid) !important; }

/* ─── Footer ──────────────────────────────────────────────────────────── */
html body #container .footer-wrapper,
html body #container .footer-wrapper p { color: var(--pmy-muted); }

/* ─── Startup screen (layouts/partials/pmy-loader) ─────────────────────────
   On the page background, a theme card: the title strip, the stage, the percentage, the bar
   of the real loading progress (resources arrived out of resources expected) and the resource
   count with the elapsed time. The scan lines are the kit's "sci-fi" touch (its corner brackets
   were removed on 23/10/2026: they stay on the badges only); the glint that runs along the bar
   and the pulsing indicator are only decoration and stop with prefers-reduced-motion. The bar never animates by itself: it lengthens
   when the value grows. */
html body[class] #load_screen.pmy-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--pmy-font);
    letter-spacing: 0.75px;
    color: var(--pmy-text);
    background-color: var(--pmy-page);
    background-image:
        var(--pmy-grid-tile),
        linear-gradient(180deg, var(--pmy-page-top), var(--pmy-page-bottom)),
        var(--pmy-bg-image);
    background-size: 75px 75px, cover, cover;
    background-position: center top, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
    /* 0.15s, not 0.25s (23/10/2026, pages opening slowly): with the server answering in a tenth of
       a second the fade had become the longest part of an opening; the page is clickable from
       the load event (pointer-events below), the screen still dissolves. */
    transition: opacity 0.15s ease;
}
html body[class] #load_screen.pmy-loader.is-done { opacity: 0; pointer-events: none; }

html body[class] .pmy-loader__panel {
    position: relative;
    width: 340px;
    max-width: 100%;
    background: rgba(var(--pmy-ink-rgb), 0.05);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--pmy-shadow);
}
/* Scan lines, barely hinted at. */
html body[class] .pmy-loader__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(var(--pmy-ink-rgb), 0.035) 0 1px, transparent 1px 3px);
}

html body[class] .pmy-loader__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 25px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    text-transform: uppercase;
    color: var(--pmy-text-strong);
    background-color: var(--pmy-strip);
}
html body[class] .pmy-loader__pulse {
    width: 6px;
    height: 6px;
    background: var(--pmy-theme);
    box-shadow: 0 0 0 3px rgba(var(--pmy-theme-rgb), 0.25);
    animation: pmy-loader-pulse 0.9s ease-in-out infinite alternate;
}

html body[class] .pmy-loader__body { position: relative; padding: 14px 12px 12px; }
html body[class] .pmy-loader__readout {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
html body[class] .pmy-loader__step {
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    text-transform: uppercase;
    color: var(--pmy-text);
}
html body[class] .pmy-loader__value {
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--pmy-theme);
    text-shadow: 0 0 12px rgba(var(--pmy-theme-rgb), 0.45);
}

/* The track with a notch every 10%, and the bar that lengthens over it. */
html body[class] .pmy-loader__track {
    position: relative;
    height: 6px;
    background-color: rgba(var(--pmy-ink-rgb), 0.1);
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(var(--pmy-ink-rgb), 0.3) calc(10% - 1px) 10%);
}
html body[class] .pmy-loader__bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    overflow: hidden;
    background: var(--pmy-theme);
    box-shadow: 0 0 10px rgba(var(--pmy-theme-rgb), 0.8);
    transition: width 0.2s ease-out;
}
html body[class] .pmy-loader__bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: pmy-loader-scan 1.1s linear infinite;
}

html body[class] .pmy-loader__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    font-size: 10px;
    line-height: 15px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--pmy-text);
}
html body[class] .pmy-loader__meta b { font-weight: 600; color: var(--pmy-text-strong); }

@keyframes pmy-loader-scan {
    from { transform: translateX(-60px); }
    to { transform: translateX(340px); }
}
@keyframes pmy-loader-pulse {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html body[class] #load_screen.pmy-loader,
    html body[class] .pmy-loader__bar { transition: none; }
    html body[class] .pmy-loader__pulse { animation: none; }
    html body[class] .pmy-loader__bar::after { display: none; }
}

/* Scrollbars: colours only (the width stays the system's). */
html { scrollbar-color: var(--pmy-line, rgba(255, 255, 255, 0.25)) transparent; }
html body.dark, html body:not(.dark) { scrollbar-color: var(--pmy-line) transparent; }

/* ─── Login and Settings PIN (standalone pages, always dark) ──────────────
   The two pages keep their sizes and animations; colours, radii, shadows change. Their
   background is the inner pages' own (the layer above, the dark theme's veil): from the
   login to the dashboard the globe keeps its size, place and opacity. */
html body.pmy-access {
    color: var(--pmy-text);
}

html body.pmy-access::before {
    background:
        radial-gradient(circle at 15% 10%, rgba(var(--pmy-theme-rgb), 0.1), transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(var(--pmy-info-rgb), 0.1), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(var(--pmy-primary-rgb), 0.08), transparent 32%);
}

/* The login page's animated background (pmy-login-backdrop.js): two canvases of the Earth's
   box, above the background layer and below the card. The wave canvas blends with the image in
   color-dodge: it lights up the circuits' lines and nodes, and leaves the background dark. */
html body.pmy-access .pmy-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--pmy-earth-width);
    height: var(--pmy-earth-height);
    z-index: 0;
    pointer-events: none;
}
html body.pmy-access .pmy-backdrop--glow { mix-blend-mode: color-dodge; }

html body.pmy-access :is(.pmy-login-card, .pin-card) {
    background-color: rgba(10, 26, 30, 0.78);
    background-image:
        linear-gradient(var(--pmy-theme), var(--pmy-theme)), linear-gradient(var(--pmy-theme), var(--pmy-theme)),
        linear-gradient(var(--pmy-theme), var(--pmy-theme)), linear-gradient(var(--pmy-theme), var(--pmy-theme)),
        linear-gradient(var(--pmy-theme), var(--pmy-theme)), linear-gradient(var(--pmy-theme), var(--pmy-theme)),
        linear-gradient(var(--pmy-theme), var(--pmy-theme)), linear-gradient(var(--pmy-theme), var(--pmy-theme));
    background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
    background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
    background-repeat: no-repeat;
    border-color: var(--pmy-line);
    border-radius: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation-name: pmy-access-glow;
}

@keyframes pmy-access-glow {
    0%, 100% { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(144, 145, 255, 0.12), 0 0 22px 2px rgba(144, 145, 255, 0.08); }
    50% { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(144, 145, 255, 0.3), 0 0 48px 8px rgba(144, 145, 255, 0.16); }
}

html body.pmy-access :is(.pmy-login-form-coin, .pin-icon) {
    border-radius: 0;
    background: rgba(var(--pmy-theme-rgb), 0.1);
    border-color: rgba(var(--pmy-theme-rgb), 0.45);
    box-shadow: 0 0 24px rgba(var(--pmy-theme-rgb), 0.18), inset 0 0 0 1px rgba(var(--pmy-theme-rgb), 0.15);
}

html body.pmy-access :is(.pmy-login-form-title, .pin-title) { color: var(--pmy-text-strong); }
html body.pmy-access :is(.pmy-login-form-copy, .pin-copy, .pmy-login-helper) { color: var(--pmy-muted); }

html body.pmy-access .pmy-login-account {
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--pmy-line);
    box-shadow: none;
}

html body.pmy-access .pmy-login-account-icon {
    border-radius: 0;
    color: var(--pmy-on-theme);
    background: var(--pmy-theme);
    border-color: var(--pmy-theme);
}

html body.pmy-access .pmy-login-account-name { color: var(--pmy-text-strong); }

html body.pmy-access :is(.pmy-login-input, .pmy-login-select, .pin-input) {
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--pmy-line);
    color: var(--pmy-text-strong);
}

html body.pmy-access .pmy-login-input.pin:not(:focus),
html body.pmy-access .pin-input:not(:focus) { animation-name: pmy-access-pin; }

html body.pmy-access :is(.pmy-login-input, .pmy-login-select, .pin-input):focus {
    border-color: var(--pmy-theme);
    background: rgba(var(--pmy-theme-rgb), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--pmy-theme-rgb), 0.18);
    color: var(--pmy-text-strong);
}

@keyframes pmy-access-pin {
    0%, 100% { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 0 rgba(144, 145, 255, 0); }
    50% { border-color: rgba(144, 145, 255, 0.55); box-shadow: 0 0 0 3px rgba(144, 145, 255, 0.1); }
}

/* With reduced motion the PIN fields hold still: the rule above, stronger than the views' own
   reduced-motion blocks, would otherwise start them again. */
@media (prefers-reduced-motion: reduce) {
    html body.pmy-access .pmy-login-input.pin:not(:focus),
    html body.pmy-access .pin-input:not(:focus) { animation: none; }
}

html body.pmy-access :is(.pmy-login-button, .pin-button) {
    border-radius: 0;
    background: var(--pmy-theme);
    color: var(--pmy-on-theme);
    box-shadow: 0 0 0 1px var(--pmy-theme), 0 10px 30px rgba(var(--pmy-theme-rgb), 0.25);
}

html body.pmy-access :is(.pmy-login-button, .pin-button):hover,
html body.pmy-access :is(.pmy-login-button, .pin-button):focus {
    color: var(--pmy-on-theme);
    box-shadow: 0 0 0 1px var(--pmy-theme), 0 14px 36px rgba(var(--pmy-theme-rgb), 0.38);
}

html body.pmy-access :is(.pmy-login-error, .pin-error) {
    border-radius: 0;
    background: rgba(var(--pmy-danger-rgb), 0.12);
    color: var(--pmy-danger);
    box-shadow: inset 0 0 0 1px rgba(var(--pmy-danger-rgb), 0.6);
}

/* ─── PMY brand accent → theme accent ─────────────────────────────────────
   The PMY purple is a variable (legacy-table.css, :root): redefined on the body,
   every component that uses it takes the theme's accent, in both themes. */
html body.dark,
html body:not(.dark) {
    --pmy-purple: var(--pmy-theme);
    --pmy-purple-rgb: var(--pmy-theme-rgb);
}

/* ─── Sharp corners on chips, pills, tabs, tiles and controls ────
   The radius does not change the sizes. Only dots, avatars, spinners and
   circles declared as such stay round. */
html body #container :is(
    [class*="chip"], [class*="pill"], [class*="badge"], [class*="stat"], [class*="card"], [class*="tile"],
    [class*="panel"], [class*="btn"], [class*="tag"], [class*="kpi"], [class*="pager"], [class*="selector"],
    [class*="field"], [class*="input"], [class*="alert"], [class*="notice"], [class*="banner"], [class*="box"],
    [class*="summary"], [class*="status"], [class*="seg"], [class*="tab"], [class*="filter"], [class*="toolbar"],
    [class*="overview"], [class*="block"], [class*="group"], [class*="legacy"], [class*="op-"], [class*="sync-"],
    [class*="cockpit"], [class*="catalog"], [class*="note"], [class*="hint"], [class*="dropzone"], [class*="drawer"],
    .widget, .card, .btn, .badge, .form-control, .form-select, .input-group-text, .alert, .dropdown-menu, .list-group-item,
    .nav-link, .page-link, .progress, .progress-bar, .modal-content, th, td, img.rounded, code, kbd, pre, .table, table
):not([class*="dot"]):not([class*="avatar"]):not([class*="spinner"]):not([class*="loader"]):not([class*="circle"]):not([class*="round"]):not(.form-check-input):not(.rounded-circle) {
    border-radius: 0 !important;
}

html body[class] :is(.modal-content, .dropdown-menu, .popover, .tooltip-inner, .flatpickr-calendar, .apexcharts-tooltip, [class*="op-card"], [class*="op-btn"], [class*="qs-"], [class*="profile-"]):not([class*="avatar"]):not([class*="dot"]) {
    border-radius: 0 !important;
}

/* ─── Table scrollbars (the pages colour them blue) ────────────────────────
   Colours and radius only: the width stays the one the page declares. */
html body[class] :is(.legacy-table-wrap, .settings-visibility-scroll, .run-op-table-wrap, .op-item-list, .cm-sidebar-scroll, .cm-list-scroll, .cm-content-scroll)::-webkit-scrollbar-track { background: var(--pmy-line-faint); border-radius: 0; }
html body[class] :is(.legacy-table-wrap, .settings-visibility-scroll, .run-op-table-wrap, .op-item-list, .cm-sidebar-scroll, .cm-list-scroll, .cm-content-scroll)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--pmy-theme-rgb), 0.45), rgba(var(--pmy-theme-rgb), 0.25));
    background-clip: padding-box;
    border-radius: 0;
}
html body[class] :is(.legacy-table-wrap, .settings-visibility-scroll, .run-op-table-wrap, .op-item-list, .cm-sidebar-scroll, .cm-list-scroll, .cm-content-scroll)::-webkit-scrollbar-thumb:hover { background: rgba(var(--pmy-theme-rgb), 0.6); background-clip: padding-box; }

/* ─── Trail (breadcrumb): accent links, current entry in a light colour ─── */
html body #container .breadcrumb .breadcrumb-item,
html body #container .breadcrumb .breadcrumb-item a { color: var(--pmy-theme); }
html body:not(.dark) #container .breadcrumb .breadcrumb-item a { color: var(--pmy-link); }
html body #container .breadcrumb .breadcrumb-item a:hover { color: var(--pmy-text-strong); }
html body #container .breadcrumb .breadcrumb-item.active { color: var(--pmy-text-strong); }
html body #container .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--pmy-faint); }

/* Key values in the accent, like the kit's numbers: overviews, dashboard KPIs,
   the period value, Analytics figures. */
html body #container :is(.pmy-overview-number, .s_o-content h2, .legacy-hero-meta-value, .pmy-analytics-figure-value) { color: var(--pmy-value) !important; }

/* ─── Leftovers of the old accent (from the colour analysis, by class pattern) ─
   The channel pages repeat the same components with the channel's prefix
   (amazon-, prestashop-, redcare-, …): the "↻" button, actions, stat tiles.
   The channel colours (Amazon orange, eBay green, 1000Farmacie blue, the warehouse
   and orders variants) stay: only PMY's generic purple (#805dca) changes, which
   becomes the theme accent. When disabled they stay the same colour, dimmed like
   every disabled button. */
html body #container .btn:is([class*="-reset"], [class*="-price-primary"], [class*="-price-accent"], [class*="-action"]):not(.amazon-price-accent, .ebay-price-accent, .ebay-products-action, .farmacie-action-btn, .warehouse-action-btn:not(.is-purple), .orders-action-btn:not(.is-farmacie, .is-temu)) {
    background: var(--pmy-theme);
    border-color: var(--pmy-theme);
    color: var(--pmy-on-theme);
}

html body #container .btn:is([class*="-reset"], [class*="-price-primary"], [class*="-price-accent"], [class*="-action"]):not(.amazon-price-accent, .ebay-price-accent, .ebay-products-action, .farmacie-action-btn, .warehouse-action-btn:not(.is-purple), .orders-action-btn:not(.is-farmacie, .is-temu)):is(:hover, :focus-visible) {
    background: rgba(var(--pmy-theme-rgb), 0.82);
    border-color: rgba(var(--pmy-theme-rgb), 0.82);
    color: var(--pmy-on-theme);
}

/* Buttons in the channels' colours (Amazon orange, eBay and Shopify greens, 1000Farmacie and info
   blues, PrestaShop orange): the black text of the kit's coloured buttons, legible on light tints.
   The channel colours stay those of the views. */
html body #container .btn:is(.amazon-price-accent, .amazon-accent-btn, .ebay-price-accent, .ebay-products-action, .farmacie-action-btn, .orders-action-btn:is(.is-amazon, .is-ebay, .is-info, .is-shopify, .is-prestashop), .warehouse-action-btn.is-amazon) { color: #000 !important; }

/* Warehouse: add and empty are success and danger actions, in the theme palette. */
html body #container .btn.warehouse-action-btn.is-success { background: var(--pmy-success); border-color: var(--pmy-success); color: #000; }
html body #container .btn.warehouse-action-btn.is-danger { background: var(--pmy-danger); border-color: var(--pmy-danger); color: #fff; }

/* The views' secondary text (notes, hints, dates, metadata): Cork's grey becomes the theme's
   muted text, legible on the surfaces in both themes. */
html body #container :is(
    .api-acc-chevron, .catalog-card-note, .catalog-empty, .catalog-empty-state, .catalog-field-sub, .catalog-hero-empty,
    .catalog-hero-gallery-bar, .catalog-hero-note, .catalog-hero-title--untitled, .catalog-ident, .catalog-lang-reference, .catalog-notes,
    .catalog-thumb-empty, .catalog-title--untitled, .catalog-updated, .cc-head, .cc-key,
    .cg-note, .cg-table th, .cockpit-rules-block__example, .cockpit-rules-intro, .ct-empty, .ct-hint,
    .ebay-defaults-hint, .ebay-product-blockers, .ebay-product-empty, .ebay-product-empty-state, .ebay-product-note, .ebay-product-picture-count,
    .ebay-product-picture-empty, .ebay-product-sub, .ebay-product-title--untitled, .gh-hint, .op-kpi-label, .ops-fn-label,
    .ops-row-empty, .ops-rt-delayed-meta, .ops-rt-meta, .ops-section-hint, .ops-state-idle, .ops-wf-step-time,
    .sd-path, .sup-meta, .sync-card__note, .sync-hint__icon, .sync-schedule__facts, .legacy-inline-note,
    .legacy-muted
) { color: var(--pmy-muted); }

/* Inline code: the theme's purple (Cork colours it with !important). */
html body #container code { color: var(--pmy-violet) !important; }

/* Operations Center: its colour variables become the theme's tokens, in a single place —
   every status, row and badge on the page already reads them. */
html body .ops-center-page,
html body.dark .ops-center-page {
    --ops-purple: var(--pmy-violet);
    --ops-purple-rgb: var(--pmy-violet-rgb);
    --ops-blue: var(--pmy-primary);
    --ops-blue-rgb: var(--pmy-primary-rgb);
    --ops-success: var(--pmy-success);
    --ops-success-rgb: var(--pmy-success-rgb);
    --ops-warning: var(--pmy-warning);
    --ops-warning-rgb: var(--pmy-warning-rgb);
    --ops-danger: var(--pmy-danger);
    --ops-danger-rgb: var(--pmy-danger-rgb);
    --ops-muted: var(--pmy-muted);
    --ops-section-muted: var(--pmy-muted);
    --ops-section-fg: var(--pmy-text);
    --ops-card-bg: var(--pmy-surface);
    --ops-card-border: var(--pmy-line-soft);
    --ops-card-shadow: none;
    --ops-divider: var(--pmy-line-faint);
    --ops-row-bg: var(--pmy-surface-2);
    --ops-row-bg-hover: rgba(var(--pmy-theme-rgb), 0.1);
}
html body #container .ops-rt-bad { color: var(--pmy-danger); }

/* An order's source (All Orders): the background in its channel's colour, the text in the legible
   tint of the same colour (lightened on the dark theme, darkened on the light one). */
html body #container .all-orders-source-badge { color: color-mix(in srgb, var(--pmy-src, currentColor) 58%, var(--pmy-text-strong)); }
html body:not(.dark) #container .all-orders-source-badge { color: color-mix(in srgb, var(--pmy-src, currentColor) 45%, var(--pmy-text-strong)); }
html body #container .all-orders-source-badge.is-amazon { --pmy-src: #e2a03f; }
html body #container .all-orders-source-badge.is-ebay { --pmy-src: #4caf50; }
html body #container .all-orders-source-badge.is-farmacie { --pmy-src: #2196f3; }
html body #container .all-orders-source-badge.is-eprice { --pmy-src: #ff8000; }
html body #container .all-orders-source-badge.is-mediaworld { --pmy-src: #e2001a; }
html body #container .all-orders-source-badge.is-redcare { --pmy-src: #00846c; }
html body #container .all-orders-source-badge.is-worten { --pmy-src: #7b3fe4; }
html body #container .all-orders-source-badge.is-docmorris { --pmy-src: #0b6e99; }
html body #container .all-orders-source-badge.is-kaufland { --pmy-src: #e10915; }
html body #container .all-orders-source-badge.is-shopify { --pmy-src: #1f9d55; }
html body #container .all-orders-source-badge.is-prestashop { --pmy-src: #b45309; }
html body #container .all-orders-source-badge.is-temu { --pmy-src: #e91e63; }

/* Statuses of eBay products and of marketplace assignments: the theme's tints. */
html body #container .ebay-status-badge.is-active { color: var(--pmy-success-ink); background: rgba(var(--pmy-success-rgb), 0.12); }
html body #container .ebay-status-badge.is-inactive { color: var(--pmy-danger-ink); background: rgba(var(--pmy-danger-rgb), 0.12); }
html body #container .ebay-status-badge.is-draft { color: var(--pmy-warning-ink); background: rgba(var(--pmy-warning-rgb), 0.14); }
html body #container .ebay-status-badge.is-item { color: var(--pmy-violet-ink); background: rgba(var(--pmy-violet-rgb), 0.14); }
html body #container .ebay-status-badge.is-missing { color: var(--pmy-text); background: rgba(var(--pmy-ink-rgb), 0.08); }
html body #container .pmy-status-badge--active { color: var(--pmy-success-ink); }
html body #container .pmy-status-badge--disabled { color: var(--pmy-text); }
html body #container .pmy-status-badge--unassigned { color: var(--pmy-primary-ink); }

/* Group titles of the price cockpit and the catalog's locked fields: the legible tints. */
html body #container .cockpit-subgroup-title { color: var(--pmy-theme-ink); }
html body #container .catalog-tab .ct-locked { color: var(--pmy-violet-ink); }

/* The views' coloured text on the light theme: the legible tint (on the dark theme it stays solid). */
html body:not(.dark) #container .text-primary { color: var(--pmy-primary-ink) !important; }
html body:not(.dark) #container .text-success { color: var(--pmy-success-ink) !important; }
html body:not(.dark) #container .text-info { color: var(--pmy-info-ink) !important; }
html body:not(.dark) #container .text-warning { color: var(--pmy-warning-ink) !important; }
html body:not(.dark) #container .text-danger { color: var(--pmy-danger-ink) !important; }

/* Settings: the section descriptions in the theme's muted text. */
html body #container .settings-shell :is(.settings-option-text, .settings-section-description, .text-muted) { color: var(--pmy-muted) !important; }

/* Modules with their own colour variables (cron, mail, calendar): text and states read the
   theme's tokens; surfaces and borders stay as already aligned. */
html body #container .cron-control { --cron-muted: var(--pmy-muted); --cron-link: var(--pmy-link); }
/* The mail client draws everything from its --cm-* palette (Cork's navy and a violet accent): it
   reads the theme's tokens instead, so its panels are PMY's blocks, its accent the theme colour. */
html body #container .pmy-mail-wrap {
    /* The page declares Arial of its own; the theme's font instead (the messages' own HTML keeps theirs). */
    font-family: var(--pmy-font);
    --cm-bg: transparent;
    --cm-surface: var(--pmy-surface);
    --cm-surface-alt: var(--pmy-surface-2);
    --cm-border: var(--pmy-line-soft);
    --cm-shadow: none;
    --cm-panel-shadow: none;
    --cm-text: var(--pmy-text);
    --cm-muted: var(--pmy-muted);
    --cm-accent: var(--pmy-theme);
    --cm-accent-rgb: var(--pmy-theme-rgb);
    --cm-accent-soft: rgba(var(--pmy-theme-rgb), 0.12);
    --cm-accent-strong: var(--pmy-theme);
    --cm-success: var(--pmy-success);
    --cm-danger: var(--pmy-danger);
    --cm-warning: var(--pmy-warning);
    --cm-row-hover: rgba(var(--pmy-theme-rgb), 0.08);
    --cm-row-active: rgba(var(--pmy-theme-rgb), 0.16);
    --cm-row-selected: rgba(var(--pmy-ink-rgb), 0.06);
    --cm-thread-muted: var(--pmy-line);
}
/* Its compose window stays opaque, like every PMY window. */
html body #container .pmy-mail-wrap .cm-compose-modal .modal-content { background: var(--pmy-window) !important; }
html body #container .control-calendar-shell {
    --okc: var(--pmy-success-ink);
    --okbg: rgba(var(--pmy-success-rgb), 0.12);
    --failc: var(--pmy-danger-ink);
    --failbg: rgba(var(--pmy-danger-rgb), 0.12);
    --warnc: var(--pmy-warning-ink);
    --warnbg: rgba(var(--pmy-warning-rgb), 0.14);
    --runc: var(--pmy-primary-ink);
    --runbg: rgba(var(--pmy-primary-rgb), 0.12);
    --pendc: var(--pmy-muted);
    --pendbg: rgba(var(--pmy-ink-rgb), 0.08);
    --manc: var(--pmy-violet-ink);
    --manbg: rgba(var(--pmy-violet-rgb), 0.14);
    --muted: var(--pmy-muted);
}

/* Note filters (Hub): like the kit's tabs — the light tint of the entry's colour and the
   text in its legible tint; the active entry has the fuller tint and the line underneath. */
html body #container .control-notes-shell .notes-tab .note-tab-btn .filter-note { color: color-mix(in srgb, var(--filter-color, #3754db) 62%, var(--pmy-text-strong)); }
html body:not(.dark) #container .control-notes-shell .notes-tab .note-tab-btn .filter-note { color: color-mix(in srgb, var(--filter-color, #3754db) 40%, var(--pmy-text-strong)); }
html body #container .control-notes-shell .notes-tab .note-tab-btn .filter-note:is(:hover, .active)::before { opacity: 0.3; }
/* In the dark theme the active entry has a solid fill: the text is the strong one, not the tint. */
html body.dark #container .control-notes-shell .notes-tab .note-tab-btn .filter-note.active { color: var(--pmy-text-strong); }
html body #container .control-notes-shell .notes-tab .note-tab-btn .filter-note.active { box-shadow: inset 0 -2px 0 var(--filter-color, #3754db); }

/* Light theme: the solid tints are dark, the text of the coloured buttons is white. */
html body:not(.dark) #container :is(.btn-warning, .btn-info, .btn-success:not(.btn-outline-success)) { color: #fff !important; }

/* Outlined buttons in the accent: the text in the legible tint (the border stays the solid colour). */
html body #container :is(.btn-outline-primary, .btn.btn-outline-pmy-purple):not(:hover):not(.active) { color: var(--pmy-theme-ink) !important; }

/* In the new-product tiles, the blacklist entry stays purple. */
html body #container [class*="-new-bl"] { color: var(--pmy-violet); }

/* Cork calls its purple "secondary": the soft secondary badges become neutral. */
html body #container .badge.badge-light-secondary {
    background-color: var(--pmy-surface-2) !important;
    border-color: var(--pmy-line-soft) !important;
    color: var(--pmy-text) !important;
}

/* Order status: the colour comes from the page (inline style, one per status). Like the kit's
   badges it becomes a dark tint of the same colour, which stays solid in a line at the top: a
   veil over the inline background, together with the dropdown's arrow (same position and size). */
html body #container .dashboard-legacy .orders-status-select[style*="background-color"] {
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6edf0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
        linear-gradient(var(--pmy-status-veil, rgba(8, 14, 16, 0.74)), var(--pmy-status-veil, rgba(8, 14, 16, 0.74)));
    background-position: calc(100% - 12px) 50%, left bottom;
    background-size: 16px 12px, 100% calc(100% - 2px);
    background-repeat: no-repeat, no-repeat;
}

html body:not(.dark) #container .dashboard-legacy .orders-status-select[style*="background-color"] {
    --pmy-status-veil: rgba(255, 255, 255, 0.8);
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23152328' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
        linear-gradient(var(--pmy-status-veil), var(--pmy-status-veil));
    color: var(--pmy-text-strong) !important;
}

html body #container .dashboard-legacy .orders-status-readonly[style*="background-color"] {
    background-image: linear-gradient(var(--pmy-status-veil, rgba(8, 14, 16, 0.74)), var(--pmy-status-veil, rgba(8, 14, 16, 0.74)));
    background-position: left bottom;
    background-size: 100% calc(100% - 2px);
    background-repeat: no-repeat;
}

html body:not(.dark) #container .dashboard-legacy .orders-status-readonly[style*="background-color"] {
    --pmy-status-veil: rgba(255, 255, 255, 0.8);
    color: var(--pmy-text-strong) !important;
}

/* ─── Targeted page colours (Operations Center, mail, calendar, catalog, dashboard) ──────────── */
html body #container :is(.sync-chip--current, .sync-scope-chip.sync-chip--current) { color: var(--pmy-primary); border-color: rgba(var(--pmy-primary-rgb), 0.55); }
html body #container :is(.cron-link, .cron-link__caret) { color: var(--pmy-theme); }
html body #container .ops-action-btn { color: var(--pmy-theme); background: rgba(var(--pmy-theme-rgb), 0.12); border-color: rgba(var(--pmy-theme-rgb), 0.4); }
html body #container .ops-action-btn:hover { background: rgba(var(--pmy-theme-rgb), 0.2); color: var(--pmy-theme); }
html body #container .badge-transport { color: var(--pmy-text); background: var(--pmy-surface-2); }
html body #container :is(.ops-badge-orch, .ops-stat.s-run) { color: var(--pmy-primary-ink); background: rgba(var(--pmy-primary-rgb), 0.14); border-color: rgba(var(--pmy-primary-rgb), 0.35); }
/* ─── Badges: ONE look for every badge of the theme (23/10/2026) ─────────────────────────────
   The "MONTH & YEAR INSIGHTS" badge for all of them: a rectangle with sharp corners, a thin line
   around it and four small corner brackets, the text in capitals at its size (9px, 700, 0.75px
   spacing, 2px 8px), sized by its text and wrapping on a narrow screen rather than being cut; its
   display stays the page's (a badge a page hides stays hidden). Each badge keeps its own colours and
   so its meaning — the veil behind it and the colour of its text, green, red, amber or a channel's
   own — and the line and the brackets take that same colour: the text's (currentColor), or
   --pmy-badge-accent where a badge names its solid tint. The brackets and the line are set as
   background-image/box-shadow with !important because the pages colour many badges with the
   `background` shorthand, which would wipe them; the veil (background-color) stays theirs. The
   text and the spacing are the reference's everywhere (!important: several pages size their own
   badges with stronger selectors).
   Clicks, tooltips, counters and active states are each badge's own: only the look is set here.
   BADGES ONLY: never buttons, fields, tabs, KPI tiles or the chips that are links or filters
   (a.sync-chip, .ops-chip, .filter-chip, catalog-chip buttons, .cockpit-pill, .pmy-analytics-chip),
   nor the search bar's key hint (outside #container) or the plain numbers of the tables
   (.num-badge is a badge only in a strip). The list sits in :where(): the rule weighs no more
   than its scope, so a badge's own rule (the reference's solid tint for its brackets, a page's
   sizes) is never outweighed by it. */
html body :is(#container, .pmy-header-modal, .modal) :where(
    .badge, .legacy-period-badge, .legacy-status-badge, .pmy-chip, .widget-heading .num-badge,
    .ebay-status-badge, .pmy-status-badge, .pmy-overview-status, .all-orders-source-badge, .badge-state, .status-badge,
    .cockpit-badge, .cockpit-summary-status__chip, .cm-badge, .cm-row-badge, .cm-content-label-badge, .note-category-badge,
    .ops-period-badge, .ops-rt-badge, .ops-meta-pill, .ops-count-pill, .ops-duration-pill, .ops-badge, .ops-status-badge,
    .ops-state-badge, .ops-transport-pill, .badge-transport, .ops-reco-counter, .ops-stat:not(div),
    span.sync-chip, .cron-chip, .cron-mixed-badge, .cron-wf-partial-badge, span.catalog-pill, span.catalog-chip,
    .run-op-pill, .ownership-pill, .suppliers-supplier-pill, .cm-scope-pill, .roster-badge
) {
    --pmy-badge-accent: currentColor;
    --pmy-badge-line: color-mix(in srgb, currentColor 24%, transparent);
    max-width: 100%;
    padding: 2px 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 15px !important;
    letter-spacing: 0.75px !important;
    text-align: center;
    text-transform: uppercase !important;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
    border: 0 !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(var(--pmy-badge-accent), var(--pmy-badge-accent)),
        linear-gradient(var(--pmy-badge-accent), var(--pmy-badge-accent)),
        linear-gradient(var(--pmy-badge-accent), var(--pmy-badge-accent)),
        linear-gradient(var(--pmy-badge-accent), var(--pmy-badge-accent)),
        linear-gradient(var(--pmy-badge-accent), var(--pmy-badge-accent)),
        linear-gradient(var(--pmy-badge-accent), var(--pmy-badge-accent)),
        linear-gradient(var(--pmy-badge-accent), var(--pmy-badge-accent)),
        linear-gradient(var(--pmy-badge-accent), var(--pmy-badge-accent)) !important;
    background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom !important;
    background-size: 5px 1px, 1px 5px, 5px 1px, 1px 5px, 5px 1px, 1px 5px, 5px 1px, 1px 5px !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 0 0 1px var(--pmy-badge-line) !important;
}
/* A badge whose page gives it no veil wears the reference's: its own colour at 8% (zero
   specificity, so every page's veil wins). */
:where(html body) :where(#container, .pmy-header-modal, .modal) :where(.badge, .pmy-chip, .cron-chip, .cm-badge, .cm-row-badge, .note-category-badge, .roster-badge, .status-badge) {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}
/* The period badge (the reference): the theme's tint, purple for orders, red for refunds; the
   brackets in the solid tint, the line and the veil in its shades. */
html body :is(#container, .pmy-header-modal) .legacy-period-badge {
    --pmy-tag: var(--pmy-theme);
    --pmy-tag-rgb: var(--pmy-theme-rgb);
    --pmy-tag-ink: var(--pmy-theme-ink);
    --pmy-badge-accent: var(--pmy-tag);
    --pmy-badge-line: rgba(var(--pmy-tag-rgb), 0.2);
    color: var(--pmy-tag-ink) !important;
    background-color: rgba(var(--pmy-tag-rgb), 0.08) !important;
}
html body :is(#container, .pmy-header-modal) .legacy-period-badge.is-orders { --pmy-tag: var(--pmy-violet); --pmy-tag-rgb: var(--pmy-violet-rgb); --pmy-tag-ink: var(--pmy-violet-ink); }
html body :is(#container, .pmy-header-modal) .legacy-period-badge.is-refund { --pmy-tag: var(--pmy-danger); --pmy-tag-rgb: var(--pmy-danger-rgb); --pmy-tag-ink: var(--pmy-danger-ink); }
html body #container .num-badge.num-orders { color: var(--pmy-violet-ink); background: rgba(var(--pmy-violet-rgb), 0.14); border-color: rgba(var(--pmy-violet-rgb), 0.35); }
html body #container :is(.cron-icon-btn, .cron-scheduler, .ops-card.ops-pad) { background-color: var(--pmy-surface-2); border-color: var(--pmy-line-soft); }
/* The job counters sit in the title strip: the figure in solid text, the accent in the line above. */
html body #container .stat-card { background: var(--pmy-surface); border-color: transparent; box-shadow: inset 0 2px 0 var(--pmy-theme); color: var(--pmy-text-strong); }
html body #container .stat-card :is(span, div, strong, small, b) { color: inherit; }
html body #container .ebay-inventory-thumb.is-empty { border-color: var(--pmy-line-soft); }
html body #container .channel-icon { background: var(--pmy-surface-2); }
html body #container .filter-chip { border-color: var(--pmy-line); }
html body #container .filter-chip:is(.active, .is-active, [aria-pressed="true"]) { border-color: var(--pmy-theme); color: var(--pmy-theme-ink); }
html body #container .catalog-inline-action { color: var(--pmy-theme); }
html body #container .legacy-hero-icon { background: rgba(var(--pmy-theme-rgb), 0.12); color: var(--pmy-theme); }
html body #container .legacy-hero-icon svg { color: var(--pmy-theme); stroke: currentColor; }
html body #container .cm-primary-link { background: var(--pmy-theme) !important; color: var(--pmy-on-theme) !important; border-color: var(--pmy-theme) !important; }
html body #container .cm-reader-empty-icon { background: rgba(var(--pmy-theme-rgb), 0.12); color: var(--pmy-theme); }
html body #container .nav-link.active:not(.nav-pills .nav-link) { border-color: rgba(var(--pmy-theme-rgb), 0.35); }
html body #container .fc .fc-day-today .fc-daygrid-day-number { background: var(--pmy-theme); color: var(--pmy-on-theme); }

/* Icon tiles (dashboard KPIs, channel and heading icons): sharp corners. */
html body #container :is(.c_l-icon, [class*="-icon"]:not(svg):not(i), [class*="icon-wrap"], [class*="icon-box"]):not([class*="avatar"]):not([class*="circle"]):not([class*="round"]) { border-radius: 0 !important; }