/*--------------------------------------------------------------
# The v3 look (docs/archive/v3_THEME_PLAN.md): the new homepage's glass taken to the app's pages, for the roles Admin → Interface sets
# to v3. _Layout loads this file last, after v3-shell.css, v3-night-base.css and v3-night.css (v3's night base), and puts .v3 on the
# body; it never loads the debossed look or a button style for v3.
#
# The source of every value is docs/mockups/v3_MOCKUP.html (the user's picks, 2026-10-22: veil B, column headings B, quiet buttons B,
# page titles B, modals A with B as "Dim only"): change both together. The glass and the inks are tokens.css's "Glass and
# ink", shared with the new homepage; this file adds only what is v3's own.
#
# Every rule sits under body.shell-v3.v3:not(#_). The :not(#_) gives it an id's weight, so it outranks the class rules
# of v3-shell.css, v3-night-base.css and v3-night.css (which v3 builds on) without !important.
#
#   1. Tokens: the scene's colour for lines and tints, the quiet buttons, the column headings' ground, the veil
#   2. The veil behind the cards
#   3. Page titles
#   4. The grid card, its column headings, its rows, the search box and the pager
#   5. Details / Create / Edit cards and their fields
#   6. Buttons: by class and by hint (data-btn-role, and v3's own data-v3-role); 6b. a page header's frosted keys;
#      6c. the outlined keys (Edit, Delete, Back to List in a header; the blue-glass buttons everywhere); 6d. badges
#      (tinted glass by day and at sunset); 6e. Exports' Orders / Packages badge buttons and their static twin
#   7. Modals: the sign-in window's glass; blur and dim, or dim only
#   8. The Vessel Orders Overview's totals and tiles, and the Packing Visualizer's list of pieces
--------------------------------------------------------------*/

/* ---------- 1. Tokens ---------- */
/* Registered, so a scene change fades the veil and the header's ground (which take it) over the same 1.8s as v3-shell.css's sky
   tokens (its transition is in v3-shell.css's list on body), rather than snapping while the sea fades beneath (2026-10-24). */
@property --v3-veil-tint { syntax: "<color>"; inherits: true; initial-value: #f2f7fc; }

body.shell-v3.v3:not(#_) {
    /* The scene's colour as r, g, b: for hairlines and tints (AL-MA blue by day, plum at sunset, slate at night) */
    --v3-rgb: 48, 79, 127;
    /* Quiet buttons (pick B, "hairline"): the glass itself as the fill, a crisp line in the scene's colour; the hover and
       the active state (the pager's open page too) one shade: a faint tint of that colour */
    --v3-q-bg: rgba(255, 255, 255, 0.30);
    /* The line: lighter than the mockup's B (.55 / .70), a trial a step under its C (.19 / .30) (the user, 2026-10-22: B
       read too strong; go back to C if this is too faint) */
    --v3-q-bd: rgba(var(--v3-rgb), 0.16);
    --v3-q-bg-h: rgba(var(--v3-rgb), 0.10);
    --v3-q-bd-h: rgba(var(--v3-rgb), 0.28);
    --v3-q-ink: #304f7f;
    --v3-q-ink-h: #172b45;
    /* A field on a v3 card: the glass field, with a faint line in the scene's colour (the homepage's white line vanishes
       over the white veil) */
    --v3-field-rim: rgba(var(--v3-rgb), 0.18);
    /* Text links and the text around them (the scene's accent and body ink by day and at sunset; greys at night, below) */
    --v3-link: var(--ink-accent);
    --v3-link-h: var(--ink);
    --v3-text: var(--ink-body);
    --v3-text-dim: var(--ink-soft);
    /* The 2px line under the column headings */
    --v3-th-line: var(--ink-accent);
    /* The arrow of the footer's popups (the cogwheel menu): the glass's colour at its foot, made solid */
    --v3-pop-arrow: #eef4fb;
    /* The page size's open list: the colour its label box shows on the card (measured), made solid, so the list reads as
       the same box and the rows under it don't show through (the pager's own tint is see-through) */
    --v3-pager-menu: #f7fafe;
    /* The column headings' ground: what the glass shows over the opaque veil (its tint, and at night the darkening its
       filter gives what is behind it) */
    --v3-th-tint: rgba(243, 248, 254, 0.48);
    --v3-th-dim: rgba(0, 0, 0, 0);
    /* The veil (the mockup's D, 2026-10-22; B was the first pick): a tint of the scene over most of the window, opaque to
       70% of its height and fading out by 96%, so the sea only shows at the foot */
    --v3-veil-tint: #f2f7fc;
    --v3-veil: linear-gradient(180deg, var(--v3-veil-tint) 0, var(--v3-veil-tint) 70%, transparent 96%);
    /* The tabbed "folder" cards: one flat glass for the panel and its open tab, so they read as one piece */
    --v3-folder: rgba(255, 255, 255, 0.62);
    --v3-folder-shadow: 0 18px 55px #172b451c;
    /* The cards' corners (the homepage's glass); buttons, the search box and the pager keep 7px */
    --v3-card-radius: 14px;
    --v3-radius: 7px;
    /* The "Dim only" modal: no blur, so the dialog is nearly solid */
    --v3-modal-solid: linear-gradient(135deg, #fffffff2, #f3f8fee6);
    --field-border: var(--v3-field-rim);
    /* The frosted key (§6b, §6c): frosted glass lighter at the top, a white rim, a soft shadow; an outlined key's line at
       --v3-key-ol of its colour (under the pointer --v3-key-ol-h) */
    --v3-key: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34));
    --v3-key-h: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.52));
    --v3-key-rim: rgba(255, 255, 255, 0.85);
    --v3-key-rim-h: rgba(var(--v3-rgb), 0.22);
    --v3-key-shadow: 0 1px 2px rgba(var(--v3-rgb), 0.12), inset 0 -1px 0 rgba(var(--v3-rgb), 0.06);
    --v3-key-filter: blur(6px) saturate(140%);
    --v3-key-ol: 0.60;
    --v3-key-ol-h: 0.85;
    /* The grid's search box focused: an AL-MA blue line; at night its ✓ and × buttons' greys */
    --v3-search-focus: #304f7f;
    --v3-search-btn: #2a313c;
    --v3-search-btn-h: #38404d;
}

html[data-v3-scene="sunset"] body.shell-v3.v3:not(#_) {
    --v3-rgb: 123, 63, 99;
    --v3-q-ink: #5b3a5f;
    --v3-q-ink-h: #3a2740;
    --v3-th-tint: rgba(254, 242, 230, 0.48);
    --v3-veil-tint: #fdeee0;
    --v3-folder: rgba(255, 250, 244, 0.62);
    --v3-folder-shadow: 0 18px 55px #42284a1f;
    --v3-pop-arrow: #fcf0e4;
    --v3-pager-menu: #fff6ec;
    --v3-modal-solid: linear-gradient(135deg, #fffaf4f2, #fdeee0e6);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-rgb: 160, 172, 190;
    /* The lines at the homepage's contact card's strength (its rim, --glass-rim, #a0acbe33): the mockup's .48 read too
       bright beside the glass (the user, 2026-10-22) */
    --v3-q-bg: rgba(255, 255, 255, 0.02);
    --v3-q-bd: rgba(160, 172, 190, 0.20);
    --v3-q-bg-h: rgba(255, 255, 255, 0.08);
    --v3-q-bd-h: rgba(160, 172, 190, 0.36);
    --v3-q-ink: #d3d9e1;
    --v3-q-ink-h: #fff;
    --v3-field-rim: #a0acbe40;
    --v3-th-tint: rgba(36, 42, 52, 0.72);
    --v3-th-dim: rgba(0, 0, 0, 0.45);
    --v3-veil-tint: #101f37;
    --v3-folder: rgba(40, 47, 58, 0.80);
    --v3-folder-shadow: 0 6px 20px #00000066;
    /* Text links in greys (the user, 2026-10-22: the light blue was overwhelming in a busy grid): silver links, a darker
       grey for text, darker again for what is disabled; the heading's line a soft grey */
    --v3-link: #d3d9e1;
    --v3-link-h: #fff;
    --v3-text: #a9b3c1;
    --v3-text-dim: #6c7684;
    --v3-th-line: rgba(160, 172, 190, 0.35);
    --v3-pop-arrow: #22283a;
    --v3-pager-menu: #20252f;
    --v3-modal-solid: linear-gradient(180deg, #282f3afa, #1e242ef5);
    --v3-key: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
    --v3-key-h: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
    --v3-key-rim: rgba(255, 255, 255, 0.10);
    --v3-key-rim-h: rgba(255, 255, 255, 0.20);
    --v3-key-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --v3-key-ol: 0.50;
    --v3-key-ol-h: 0.75;
    --v3-search-focus: #3e6db5;
}

/* ---------- 2. The veil behind the cards ---------- */
/* Not on the new homepage (Home/Welcome, which a signed-in user sees inside this layout): it has its own sky, and its
   header melts into that (2026-10-22: the veil's tint left a band under the header there). */
body.shell-v3.v3:not(:has(.alma-landing)):not(#_) .v3-sea-fade {
    background: var(--v3-veil);
}

/* The header melts into the veil: its ground is the veil's tint (v3-shell.css's is the sky's top colour) */
body.shell-v3.v3:not(:has(.alma-landing)):not(#_) #header {
    background: var(--v3-veil-tint);
}

/* ---------- 3. Page titles (pick B): the homepage headings' ink, the icon in the accent. Painted with the text fill,
   which night's silver title (v3-night-base.css: a clipped gradient, its colour !important) does not reach. ---------- */
body.shell-v3.v3:not(#_) .page-header-title {
    background-image: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
}

    body.shell-v3.v3:not(#_) .page-header-title > :is(i, .bi, .bx) {
        -webkit-text-fill-color: var(--ink-accent);
        color: var(--ink-accent);
    }

    /* A badge, a link or a button in the title keeps its own colour */
    body.shell-v3.v3:not(#_) .page-header-title :is(.page-header-badge, .badge, a, button) {
        -webkit-text-fill-color: currentColor;
    }

/* ---------- 4. The grid card ----------
   The card is v3-shell.css's .v3-card-root::before (drawn by v3-grid.js, no markup of its own), so the glass and its blur sit on
   that layer, under the toolbar, the rows and the pager: a backdrop-filter on a wrapper would make it the containing
   block of the rows' fixed menus. */
body.shell-v3.v3:not(#_) .v3-card-root::before {
    box-sizing: border-box;
    border: 1px solid var(--glass-rim);
    border-radius: var(--v3-card-radius);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

/* The rule over the pager, in the scene's colour. (The column headings' line was carried on across the scrollbar
   gutter here, from a position v3-grid.js measured; at 125% display scaling it snapped to a different device pixel
   than the headings' own line and sat a pixel or two off, so it went (the user, 2026-10-23): the headings' line stops
   where the rows do.) */
body.shell-v3.v3:not(#_) .v3-card-root::after {
    background: linear-gradient(rgba(var(--v3-rgb), 0.16), rgba(var(--v3-rgb), 0.16)) 0 var(--v3-rule-2, -10px) / 100% 1px no-repeat;
}

/* The last row without its own hairline: the rule over the pager closes the rows, and the two, a few pixels apart, read
   as a double line once the rows are scrolled to their end (the user, 2026-10-23) */
body.shell-v3.v3:not(#_) .v3-scroll table:not(td table) > tbody > tr:last-child > td {
    border-bottom-color: transparent !important;
}

/* A cell with one of Bootstrap's border utilities (the row number's .border-end) keeps the row's hairline along its foot:
   at night v3-night-base.css paints every side of such a cell in its solid line, !important (for the dividers it means), so
   the number cell drew a brighter piece of the row's rule, and the last row's one stayed (the user, 2026-10-23). */
body.shell-v3.v3:not(#_) .v3-scroll table:not(td table) > tbody > tr:not(:last-child) > td:is(.border, .border-top, .border-bottom, .border-start, .border-end) {
    border-bottom-color: rgba(var(--v3-rgb), 0.12) !important;
}

/* The column headings (pick B): seamless with the card, then the accent's 2px line. Solid, so the rows scrolling under
   them are hidden, and painted as the card's glass is seen there: the glass's own gradient (--glass-bg), laid out over
   the card's whole box (v3-grid.js gives its place in the window, --v3-card-v*) and fixed to the window as the card is,
   so each heading shows the very part of the gradient the card shows beside it; under it what the glass's filter makes
   of the opaque veil behind the card (--v3-th-ground: the veil's tint through --glass-filter, worked out per scene).
   It was a flat tint over the unfiltered veil and sky, a shade off the card, more or less by the screen (the user,
   2026-10-23). */
body.shell-v3.v3:not(#_) {
    --v3-th-ground: #f1f7fd;
}

html[data-v3-scene="sunset"] body.shell-v3.v3:not(#_) {
    --v3-th-ground: #ffeddc;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-th-ground: #0b111a;
}

body.shell-v3.v3:not(#_) .v3-scroll thead th {
    background:
        var(--glass-bg) var(--v3-card-vx, 0px) var(--v3-card-vy, 0px) / var(--v3-card-vw, 100vw) var(--v3-card-vh, 100vh) no-repeat fixed,
        linear-gradient(var(--v3-th-ground), var(--v3-th-ground)) fixed;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 -2px 0 var(--v3-th-line);
    border-radius: 0;
    color: var(--ink-accent);
}

/* The AES / 507 live lists sit on a page card, not a .v3-scroll: the same line under their column headings. */
body.shell-v3.v3:not(#_) .live-grid .table_custom thead th {
    box-shadow: inset 0 -2px 0 var(--v3-th-line);
}

/* iOS Safari ignores a fixed background (it would squeeze the whole sky into the heading): the veil's own colour. */
@supports (-webkit-touch-callout: none) {
    body.shell-v3.v3:not(#_) .v3-scroll thead th {
        background: linear-gradient(var(--v3-th-tint), var(--v3-th-tint)), linear-gradient(var(--v3-th-dim), var(--v3-th-dim)), var(--v3-veil-tint);
    }
}

/* The rows' inks, the grids' own (the rows here and the phone cards, §4b): by day and at sunset the links black and the
   rest of the text a very dark grey, not the scene's blue or plum; at night the near-white links and a light grey,
   as before (the user, 2026-10-23). Under the pointer a link takes the page title icon's colour (white at night). */
body.shell-v3.v3:not(#_) {
    --v3-row-link: #000;
    --v3-row-link-h: var(--ink-accent);
    --v3-row-text: #212529;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-row-link: var(--v3-link);
    --v3-row-link-h: var(--v3-link-h);
    --v3-row-text: var(--v3-text);
}

body.shell-v3.v3:not(#_) .table_custom {
    --bs-table-color: var(--v3-row-text);
    --bs-table-hover-color: var(--v3-row-text);
    --bs-table-hover-bg: rgba(var(--v3-rgb), 0.07);
    --bs-table-border-color: rgba(var(--v3-rgb), 0.12);
}

    body.shell-v3.v3:not(#_) .table_custom td {
        color: var(--v3-row-text);
        border-color: rgba(var(--v3-rgb), 0.12);
    }

/* The rows' scrollbar in the column headings' line colour (the user, 2026-10-23): faint at rest, the line's full colour
   under the pointer. By day and at sunset a lighter shade of the AL-MA blue / the plum at rest and the line's own colour
   under the pointer; at night the slate line at rest and a brighter slate under the pointer. v3-shell.css shapes it (a 4px
   thumb in a transparent gutter). */
body.shell-v3.v3:not(#_) {
    --v3-scroll-thumb: color-mix(in srgb, var(--v3-th-line) 65%, #fff);
    --v3-scroll-thumb-h: var(--v3-th-line);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-scroll-thumb: var(--v3-th-line);
    --v3-scroll-thumb-h: rgba(160, 172, 190, 0.60);
}

body.shell-v3.v3:not(#_) .v3-scroll {
    scrollbar-color: var(--v3-scroll-thumb) transparent;
}

@supports selector(::-webkit-scrollbar) {
    body.shell-v3.v3:not(#_) .v3-scroll {
        scrollbar-color: auto;
    }

    body.shell-v3.v3:not(#_) .v3-scroll::-webkit-scrollbar-thumb,
    body.shell-v3.v3:not(#_) .v3-scroll::-webkit-scrollbar-thumb:horizontal {
        background-color: var(--v3-scroll-thumb);
        background-clip: padding-box;
        box-shadow: none;
    }

    body.shell-v3.v3:not(#_) .v3-scroll::-webkit-scrollbar-thumb:hover,
    body.shell-v3.v3:not(#_) .v3-scroll::-webkit-scrollbar-thumb:active {
        background-color: var(--v3-scroll-thumb-h);
        background-clip: padding-box;
    }
}

    /* The column headings and their sort links in the page title icon's colour, in every scene (the user, 2026-10-22):
       the AL-MA blue by day, the plum at sunset, the light blue at night (--ink-accent) */
    body.shell-v3.v3:not(#_) .table_custom thead th,
    body.shell-v3.v3:not(#_) .table_custom thead th a {
        color: var(--ink-accent);
    }

/* 1804 Create / Edit: the invoices table's heading row with no ground (Bootstrap's .table-light grey, at night
   v3-night-base.css's navy), its text the grids' headings' colour */
body.shell-v3.v3:not(#_) .d1804-invoice-rows > thead {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-accent);
}

    body.shell-v3.v3:not(#_) .d1804-invoice-rows > thead > tr > th {
        background-color: transparent;
        color: var(--ink-accent);
    }

/* ---------- 4b. The grid as cards (below md: .grid-cards, components.css §6) ----------
   Each record a piece of the grid card's glass on the veil (the user, 2026-10-23: they were plain white, the blue night's
   navy at night): the glass's tint and rim, a soft shadow of the scene to lift it off the veil (no blur: behind it is
   the flat veil, so a backdrop-filter on every card would cost a phone and show nothing), the rows' inks (§4:
   --v3-row-text, --v3-row-link). The record (the card's first row) heads it on a faint band of the scene's colour with a hairline under
   it, in place of components.css's left stripe (the user, 2026-10-23, option B of docs/mockups/v3_CARDS_MOCKUP.html): the card pads its rows,
   not itself, so the band runs to its edges. A card of one row has no band. */
body.shell-v3.v3:not(#_) {
    --v3-tile-shadow: 0 1px 2px rgba(var(--v3-rgb), 0.10), 0 4px 12px -4px rgba(var(--v3-rgb), 0.22);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px -4px rgba(0, 0, 0, 0.55);
}

body.shell-v3.v3:not(#_) .grid-card {
    --alma-blue: var(--v3-row-link);
    --alma-muted: var(--v3-text-dim);
    overflow: hidden;
    border: 1px solid var(--glass-rim);
    border-radius: 12px;
    background: var(--glass-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--v3-tile-shadow);
    color: var(--v3-row-text);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .grid-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--v3-tile-shadow);
}

    /* Its rows padded by the card's own sides; the first and last a little more at the card's top and foot. Only a card
       of rows (or of an Imports item's parts): a card of bare text ("nothing to display", Imports Details' "goods not
       retrieved") keeps components.css's padding. */
    body.shell-v3.v3:not(#_) .grid-card:not(.grid-card-empty):has(> *) {
        gap: 0;
        padding: 0;
    }

    body.shell-v3.v3:not(#_) .grid-card:not(.grid-card-empty) > * {
        padding: .2rem .65rem;
    }

        body.shell-v3.v3:not(#_) .grid-card:not(.grid-card-empty) > :first-child {
            padding-top: .4rem;
        }

        body.shell-v3.v3:not(#_) .grid-card:not(.grid-card-empty) > :last-child {
            padding-bottom: .45rem;
        }

        /* The record's band */
        body.shell-v3.v3:not(#_) .grid-card:not(.grid-card-empty) > :first-child:not(:last-child) {
            margin-bottom: .2rem;
            padding-bottom: .4rem;
            border-bottom: 1px solid rgba(var(--v3-rgb), 0.12);
            background: rgba(var(--v3-rgb), 0.07);
        }

    /* The dark data a card reads at a glance (the client before its vessel, an MRN, a job's total) in the links' ink */
    body.shell-v3.v3:not(#_) .grid-card :is(a.grid-card-text.is-quiet, .grid-card-aside.is-code, .jobs-card-total) {
        color: var(--v3-row-link);
    }

    /* "Nothing to display" in its red */
    body.shell-v3.v3:not(#_) .grid-card.grid-card-empty {
        color: #dc3545;
    }

    body.shell-v3.v3:not(#_) .grid-card-menu-btn:is(:hover, [aria-expanded="true"]) {
        background-color: var(--v3-q-bg-h);
    }

/* The chips in a card, as the badges (§6d): by day and at sunset a piece of tinted glass (the frosted ground, the colour
   over it lighter at the top, a line of it, a white highlight, its dark shade as the text); a static one (a count, a
   company) and one with no state the plain frosted glass with the quiet line. At night v3-night's tints (light text on
   a faint fill). A chip that opens something (an order's pieces, an export's orders) is the blue key of §6e.
   The quick views' and Details pages' chips (.mm-chip: a state, a company, the record's kind) are the same pieces of
   glass (the user, 2026-10-23: they were modal-modern's flat tints and a solid blue); .is-alma (the record's kind,
   AL-MA, Issued, MRN allocated) is the blue one, as a card's .is-primary. */
body.shell-v3.v3:not(#_) :is(.grid-card-chip, .mm-chip)                     { --v3-bdg: 71, 84, 103;  --v3-bdg-ink: #475467; }
body.shell-v3.v3:not(#_) :is(.grid-card-chip, .mm-chip).is-success          { --v3-bdg: 25, 135, 84;  --v3-bdg-ink: #146c43; }
body.shell-v3.v3:not(#_) :is(.grid-card-chip, .mm-chip).is-warning          { --v3-bdg: 214, 160, 0;  --v3-bdg-ink: #7a5300; }
body.shell-v3.v3:not(#_) :is(.grid-card-chip, .mm-chip).is-danger           { --v3-bdg: 220, 53, 69;  --v3-bdg-ink: #b42318; }
body.shell-v3.v3:not(#_) :is(.grid-card-chip.is-primary, .mm-chip.is-alma)  { --v3-bdg: 48, 79, 127;  --v3-bdg-ink: #304f7f; }
body.shell-v3.v3:not(#_) .grid-card-chip.is-dark                            { --v3-bdg: 31, 41, 55;   --v3-bdg-ink: #1f2937; }

html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) :is(span, a).grid-card-chip:is(.is-success, .is-warning, .is-danger, .is-primary, .is-muted, .is-dark),
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .mm-chip:is(.is-success, .is-warning, .is-danger, .is-alma, .is-muted) {
    border: 1px solid rgba(var(--v3-bdg), 0.30);
    background-color: var(--v3-bdg-ground);
    background-image: linear-gradient(180deg, rgba(var(--v3-bdg), 0.17), rgba(var(--v3-bdg), 0.09));
    box-shadow: inset 0 1px 0 var(--v3-bdg-hi), 0 1px 1.5px rgba(var(--v3-bdg), 0.10);
    color: var(--v3-bdg-ink);
}

html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) :is(span, a).grid-card-chip:not(.is-success, .is-warning, .is-danger, .is-primary, .is-muted, .is-dark),
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .mm-chip:not(.is-success, .is-warning, .is-danger, .is-alma, .is-muted) {
    border: 1px solid var(--v3-q-bd);
    background-color: var(--v3-bdg-ground);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
    box-shadow: inset 0 1px 0 var(--v3-bdg-hi), 0 1px 1.5px rgba(var(--v3-rgb), 0.08);
    color: var(--v3-q-ink);
}

/* At night: the badges' night tints, no line; the plain ones a faint light glass with the quiet line */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(:is(span, a).grid-card-chip, .mm-chip) {
    border: 1px solid rgba(160, 172, 190, 0.20);
    background: rgba(255, 255, 255, 0.05);
    color: #d3d9e1;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(:is(span, a).grid-card-chip, .mm-chip).is-success { border-color: transparent; background: rgba(67, 178, 126, 0.18); color: #5cc795; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(:is(span, a).grid-card-chip, .mm-chip).is-warning { border-color: transparent; background: rgba(186, 150, 69, 0.20); color: #d4b062; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(:is(span, a).grid-card-chip, .mm-chip).is-danger  { border-color: transparent; background: rgba(255, 139, 130, 0.16); color: #ff8b82; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(:is(span, a).grid-card-chip.is-primary, .mm-chip.is-alma) { border-color: transparent; background: rgba(140, 180, 240, 0.16); color: #b5d2ff; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(:is(span, a).grid-card-chip, .mm-chip):is(.is-muted, .is-dark) { border-color: transparent; background: rgba(255, 255, 255, 0.09); color: #c9d1dc; }

/* A chip that opens something: the blue key (§6e's tokens), raised by its shadow and highlight, firmer under the finger */
body.shell-v3.v3:not(#_) button.grid-card-chip {
    border: 1px solid rgba(var(--v3-bb), var(--v3-bb-line));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.20)), rgba(var(--v3-bb), var(--v3-bb-tint));
    box-shadow: var(--v3-bb-shadow);
    color: var(--v3-bb-ink);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) button.grid-card-chip {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(var(--v3-bb), var(--v3-bb-tint));
}

    body.shell-v3.v3:not(#_) button.grid-card-chip:is(:hover, :focus-visible) {
        border-color: rgba(var(--v3-bb), var(--v3-bb-line-h));
        background-color: rgba(var(--v3-bb), var(--v3-bb-tint-h));
        box-shadow: var(--v3-bb-shadow-h);
        color: var(--v3-bb-ink-h);
    }

/* The header's menu button: the same 28px icon at every width (the user, 2026-10-23). At 26px, as it was at 768px and
   under, its top and bottom bars land on half pixels and smear over three rows of a 1x screen, thinner and paler
   than the middle one; at 28px the three bars are alike and the icon sits on whole pixels in the smaller buttons too. */
body.shell-v3.v3:not(#_) .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 28px;
}

    /* Centred in its circle: the button's own padding left the 28px icon too little room in the 34px button (it ran
       off to one side), and the icon font's baseline shift sat it low (the user, 2026-10-23: the hover circle was off) */
    body.shell-v3.v3:not(#_) .menu-toggle > .bi {
        display: block;
        line-height: 1;
    }

        body.shell-v3.v3:not(#_) .menu-toggle > .bi::before {
            display: block;
        }

/* Text links, one colour wherever they are (the user, 2026-10-22: some were still the light blue at night): a grid's
   rows, the glass cards and the modern modals; the link-styled buttons (the modals' and Details pages' .mm-link /
   .mm-link-button, which v3-night-base.css paints the light blue: an order's supplier; the grids' .grid-link-button, which
   components.css paints the site's old link blue in every scene: Orders' "Multiple"); and a section's collapse toggle
   (Order Details' Stock List). The grids' own links (a row's, a phone card's) take the rows' ink: below. */
body.shell-v3.v3:not(#_) .table_custom td a:not(.btn),
body.shell-v3.v3:not(#_) :is(.detail-card, .detail-section, .v3-panel, .modal-modern .modal-body) a:not(.btn, .mm-btn, .dropdown-item, .badge, .mm-chip, .mm-count),
body.shell-v3.v3:not(#_) :is(.mm-link, .mm-link-button, .grid-link-button),
body.shell-v3.v3:not(#_) .mm-group-toggle,
body.shell-v3.v3:not(#_) .mm-group-toggle > :is(.mm-group-title, .bi) {
    color: var(--v3-link);
}

    body.shell-v3.v3:not(#_) .table_custom td a:not(.btn):hover,
    body.shell-v3.v3:not(#_) :is(.detail-card, .detail-section, .v3-panel, .modal-modern .modal-body) a:not(.btn, .mm-btn, .dropdown-item, .badge, .mm-chip, .mm-count):hover,
    body.shell-v3.v3:not(#_) :is(.mm-link, .mm-link-button, .grid-link-button):is(:hover, :focus-visible),
    body.shell-v3.v3:not(#_) .mm-group-toggle:is(:hover, :focus-visible),
    body.shell-v3.v3:not(#_) .mm-group-toggle:is(:hover, :focus-visible) > :is(.mm-group-title, .bi) {
        color: var(--v3-link-h);
    }

/* Under the pointer or the keyboard every text link is underlined, as the modals' and Details pages' .mm-link already
   were (modal-modern.css); a grid's own links had none (the user, 2026-10-22). The chip-like counts (.mm-count) and the
   column headings' sort links keep theirs. */
body.shell-v3.v3:not(#_) .table_custom td a:not(.btn, .badge):is(:hover, :focus-visible),
body.shell-v3.v3:not(#_) :is(.detail-card, .detail-section, .v3-panel, .modal-modern .modal-body) a:not(.btn, .mm-btn, .dropdown-item, .badge, .mm-chip, .mm-count):is(:hover, :focus-visible),
body.shell-v3.v3:not(#_) :is(.mm-link, .mm-link-button, .grid-link-button):is(:hover, :focus-visible) {
    text-decoration: underline;
}

body.shell-v3.v3:not(#_) .table_custom thead th a:is(:hover, :focus-visible) {
    text-decoration: none;
}

/* The grids' own links in the rows' link ink (§4: black by day and at sunset, the near-white at night): a row's links
   and link-buttons, and a phone card's (its quiet client link and its MRN / total too) */
body.shell-v3.v3:not(#_) .table_custom td :is(a:not(.btn), .grid-link-button),
body.shell-v3.v3:not(#_) .grid-card a:is(.grid-card-title, .grid-card-text, .grid-card-aside, .grid-card-icon, .grid-card-main),
body.shell-v3.v3:not(#_) .grid-card .grid-card-aside.is-code,
body.shell-v3.v3:not(#_) .grid-card .jobs-card-total {
    color: var(--v3-row-link);
}

    body.shell-v3.v3:not(#_) .table_custom td :is(a:not(.btn), .grid-link-button):is(:hover, :focus-visible),
    body.shell-v3.v3:not(#_) .grid-card a:is(.grid-card-title, .grid-card-text, .grid-card-aside, .grid-card-icon, .grid-card-main):is(:hover, :focus-visible) {
        color: var(--v3-row-link-h);
    }

/* The rows' inks on the Details pages and in the quick view (the user, 2026-10-23), by day and at sunset: the links
   black, the text the very dark grey, as in a grid's rows, not the scene's navy / plum and its blue / plum links. At
   night they keep their own (already the grids' near-white and grey family; the row tokens are night's link tokens
   there, so redefining one from the other would be a loop). The cards' inks are redefined, so every rule that reads
   them follows: --mm-ink (a fact's value, a description, an amount, a contact, the record's title), --v3-link /
   --v3-link-h (the text links above, the .mm-link buttons). Labels (--mm-muted), section titles (--mm-blue), chips and
   badges keep theirs. The Details page's own header (title, actions) is outside the cards. The cards of the Details
   pages not yet on .detail-card (Customs, Persons, Supplier Invoices: .wms-form-shadow; Jobs: .page-card, .job-panel)
   are named, and their links take the same rule. A table on .table_custom already has the rows' inks (§4). */
html:not([data-v3-scene="night"]) body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.detail-card, .detail-section, .v3-panel, .wms-form-shadow, .boxshadowdiv, .job-panel),
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) #quickViewModal .modal-body {
    --mm-ink: var(--v3-row-text);
    --v3-link: var(--v3-row-link);
    --v3-link-h: var(--v3-row-link-h);
    color: var(--v3-row-text);
}

    /* A value in a definition list (Persons, Supplier Invoices, a quick view's facts): §5's dd and §7's .mm-fact dd
       paint it the scene's ink outright, so it doesn't inherit the card's */
    html:not([data-v3-scene="night"]) body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.detail-card, .detail-section, .v3-panel, .wms-form-shadow, .boxshadowdiv, .job-panel) dd,
    html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) #quickViewModal .modal-body dd {
        color: var(--v3-row-text);
    }

    /* At night the same dd (Persons, Supplier Invoices) in the near-white of every other Details value (the cards'
       --mm-ink, v3-night's #e1e6ed outside an .mm-scope), not §5's dimmer --ink-body */
    html[data-v3-scene="night"] body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.wms-form-shadow, .boxshadowdiv, .job-panel) dd {
        color: var(--mm-ink, #e1e6ed);
    }

html:not([data-v3-scene="night"]) body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.wms-form-shadow, .boxshadowdiv, .job-panel) a:not(.btn, .mm-btn, .dropdown-item, .badge, .mm-chip, .mm-count, .nav-link, .page-link, .list-group-item) {
    color: var(--v3-link);
}

    html:not([data-v3-scene="night"]) body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.wms-form-shadow, .boxshadowdiv, .job-panel) a:not(.btn, .mm-btn, .dropdown-item, .badge, .mm-chip, .mm-count, .nav-link, .page-link, .list-group-item):is(:hover, :focus-visible) {
        color: var(--v3-link-h);
        text-decoration: underline;
    }

/* The labels on the Details pages and in the quick view, one colour in every scene (the user, 2026-10-23): a party
   panel's "Client" / "Vessel" / "Supplier", a table's "Phone" / "Date IN", a fact's dt, a section's title ("Packing",
   "Supplier Invoice") and the folded Stock List's title with its vessel, a totals row's names, a row's number. By day
   and at sunset the party labels' --ink-muted; at night v3-night-base's label blue (--n-label, "Date IN"'s), where v3's
   dt / .detail-block-label rule had put the party labels in a greyer --ink-muted. Before, a section title was the
   scene's navy (the near-white at night), the Stock List toggle a link (black), a table's labels modal-modern's grey.
   Everything that reads --mm-muted follows. A grid's own column headings (.table_custom, the 1804 invoice list) stay
   the grids' (§4). Under the pointer the Stock List toggle still takes the link's hover ink. */
body.shell-v3.v3:not(#_) {
    --v3-label: var(--ink-muted);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-label: #8aa6cf;
}

body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.detail-card, .detail-section, .v3-panel, .wms-form-shadow, .boxshadowdiv, .job-panel),
body.shell-v3.v3:not(#_) #quickViewModal .modal-content {
    --mm-muted: var(--v3-label);
}

    body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.detail-card, .detail-section, .v3-panel, .wms-form-shadow, .boxshadowdiv, .job-panel) :is(th, dt, summary, .detail-block-label, .detail-line-label, .mm-group-title, .mm-title-label, .mm-group-toggle, .mm-group-toggle > .bi):not(.table_custom *),
    body.shell-v3.v3:not(#_) #quickViewModal .modal-content :is(th, dt, summary, .detail-block-label, .detail-line-label, .mm-group-title, .mm-title-label, .mm-group-toggle, .mm-group-toggle > .bi):not(.table_custom *) {
        color: var(--v3-label);
    }

    body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.detail-card, .detail-section, .v3-panel, .wms-form-shadow, .boxshadowdiv, .job-panel) .mm-group-toggle:is(:hover, :focus-visible) :is(.mm-group-title, .bi),
    body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.detail-card, .detail-section, .v3-panel, .wms-form-shadow, .boxshadowdiv, .job-panel) .mm-group-toggle:is(:hover, :focus-visible),
    body.shell-v3.v3:not(#_) #quickViewModal .modal-content .mm-group-toggle:is(:hover, :focus-visible) :is(.mm-group-title, .bi),
    body.shell-v3.v3:not(#_) #quickViewModal .modal-content .mm-group-toggle:is(:hover, :focus-visible) {
        color: var(--v3-link-h);
    }

/* Sentences, not labels, in the values' ink (the user, 2026-10-23): an empty state ("Not Available - Order is Pending",
   "No orders on this export."), a note (an order's, a job's remarks; not a warning's or an error's), the line under a
   value ("Storage Duration: 17 days", a row's date on a phone) and its Details twin after a date in a panel's table
   (an order's "· 5 Days left until readiness", an 1804's "(4 days)"). They read --mm-muted, which is the labels' colour
   above; Orders Details' empty lines and the twins are Bootstrap's .text-muted, !important, hence the !important. A
   coloured state (.mm-state-text, a .text-danger inside) keeps its own. */
body.shell-v3.v3.page-details:not(#_) > .container-responsive :is(.detail-card, .detail-section, .v3-panel, .wms-form-shadow, .boxshadowdiv, .job-panel) :is(.mm-empty, .mm-state, .mm-note:not(.is-warning, .is-danger), .mm-under, .detail-line.text-muted, .detail-table td .text-muted),
body.shell-v3.v3:not(#_) #quickViewModal .modal-content :is(.mm-empty, .mm-state, .mm-note:not(.is-warning, .is-danger), .mm-under) {
    color: var(--mm-ink, currentColor) !important;
}

/* A list's quiet state (the Stock List's "In Progress") in the grid's own (its .text-secondary, --v3-text-dim), not the
   labels' colour it took from --mm-muted; in every scene. Not on the Vessel Orders Overview tooltip (its own). */
body.shell-v3.v3:not(#_) .mm-state-text.is-muted:not(.vo-tip *) {
    color: var(--v3-text-dim);
}

/* Disabled or secondary text in a row, and a pager cell that can't be used */
body.shell-v3.v3:not(#_) .table_custom td :is(.text-muted, .text-secondary) {
    color: var(--v3-text-dim) !important;
}

/* A bold "Pending" (Orders, 1804, Jobs, Remittances): a honey yellow by day and at sunset, the day version of the
   night's #BA9645 (v3-night-base.css), which it leaves alone; site.css's #b45309 read brown on the glass (the user, 2026-10-23). */
/* The same honey for a list's warning state (the Stock List's "Pending" in an order's quick view and on its Details page,
   a job's "Open"; the user, 2026-10-23): modal-modern's #b54708 differed from the grid's. At night both are already
   v3-night-base's #BA9645. Not on the dark Vessel Orders Overview tooltip, which has its own light amber. */
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .text-warning-dark,
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .mm-state-text.is-warning:not(.vo-tip *) {
    color: #9a7b00 !important;
}

/* The search box: flat, the glass's field, its line the quiet buttons' */
body.shell-v3.v3:not(#_) .grid-search {
    border-color: var(--v3-q-bd);
    border-radius: var(--v3-radius);
    background-color: var(--glass-field);
    color: var(--ink);
}

    body.shell-v3.v3:not(#_) .grid-search-input {
        background: transparent;
        color: var(--ink);
    }

        body.shell-v3.v3:not(#_) .grid-search-input::placeholder {
            color: var(--ink-muted);
        }

    body.shell-v3.v3:not(#_) .grid-search-btn {
        color: var(--ink-muted);
    }

    /* Focused (the user, 2026-10-22): an AL-MA blue line, no ring; the rule above outranks components.css's own
       :focus-within. At night the lighter AL-MA blue: #304f7f vanishes on the dark glass. */
    body.shell-v3.v3:not(#_) .grid-search:focus-within {
        border-color: var(--v3-search-focus);
    }

    /* At night the ✓ and × are a dark slate grey, a lighter grey under the pointer (they kept the blue night's navy field),
       the line between them the night lines' slate */
    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .grid-search-btn {
        background-color: var(--v3-search-btn);
        color: #d3d9e1;
    }

        html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .grid-search-btn:is(:hover, :focus-visible) {
            background-color: var(--v3-search-btn-h);
            color: #fff;
        }

        html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .grid-search-btn.is-reset {
            border-left-color: rgba(160, 172, 190, 0.20);
        }

/* The company switch (.grid-switch: Remittances, Tax Invoices, Invoices, Expenses; the toolbar's and the filter panel's) in
   the search box's look: its glass field, its line and corners; the companies not chosen in the quiet ink. By day and
   at sunset the chosen one keeps the solid AL-MA blue; at night it is the search buttons' lighter slate, not the blue
   night's navy and blue (the user, 2026-10-23). */
body.shell-v3.v3:not(#_) .grid-switch {
    border-radius: var(--v3-radius);
    background-color: var(--glass-field);
}

    body.shell-v3.v3:not(#_) .grid-switch-btn:not(.is-active) {
        border-color: var(--v3-q-bd);
        color: var(--v3-q-ink);
    }

        body.shell-v3.v3:not(#_) .grid-switch-btn:not(.is-active):hover {
            background-color: var(--v3-q-bg-h);
            color: var(--v3-q-ink-h);
        }

    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .grid-switch-btn.is-active {
        border-color: var(--v3-search-btn-h);
        background-color: var(--v3-search-btn-h);
        color: #fff;
    }

    body.shell-v3.v3:not(#_) .grid-search-pill {
        border-color: var(--v3-q-bd);
        background: var(--v3-q-bg-h);
        color: var(--v3-q-ink);
    }

/* The pager: the quiet buttons' strip, its open page in their hover shade */
body.shell-v3.v3:not(#_) :is(.grid-pager, .grid-pager-mobile) {
    --pager-face: var(--v3-q-bg);
    --pager-face-label: var(--v3-q-bg);
    --pager-edge: var(--v3-q-bd);
    --pager-divider: rgba(var(--v3-rgb), 0.18);
    --pager-ink: var(--v3-q-ink);
    --pager-muted: var(--v3-text-dim);
    --bs-pagination-disabled-color: var(--v3-text-dim);
    --pager-hover: var(--v3-q-bg-h);
    --pager-active-face: var(--v3-q-bg-h);
    --pager-active-ink: var(--v3-q-ink-h);
    --pager-radius: var(--v3-radius);
}

    /* The grids mark the open page on its <li> (LazZiya's markup), which site.css paints solid blue (#106eea under the
       pointer); components.css's open-page rule only reaches a link carrying the class. Both the hover shade here. */
    body.shell-v3.v3:not(#_) :is(.grid-pager, .grid-pager-mobile) .pagination > .page-item.pagination-active-page,
    body.shell-v3.v3:not(#_) :is(.grid-pager, .grid-pager-mobile) .pagination > .page-item.pagination-active-page:hover {
        background: var(--pager-active-face);
        border-color: transparent;
        color: var(--pager-active-ink);
    }

        body.shell-v3.v3:not(#_) :is(.grid-pager, .grid-pager-mobile) .pagination > .page-item.pagination-active-page > .page-link {
            color: var(--pager-active-ink);
            font-weight: 600;
        }

    /* The page size's open list (the user, 2026-10-22: it was almost see-through over the rows) */
    body.shell-v3.v3:not(#_) .grid-pager-size .dropdown-menu {
        background: var(--v3-pager-menu);
        box-shadow: 0 8px 22px rgba(23, 43, 69, 0.14);
    }

    /* As wide as the value button beside it (the number and its arrow), not the whole control (the user, 2026-10-22):
       index-grid.js puts the button's width in --pager-value-w as the list opens; the numbers centred in it */
    body.shell-v3.v3:not(#_) .grid-pager-size .dropdown-menu {
        min-width: var(--pager-value-w, 0);
        width: var(--pager-value-w, auto);
    }

        body.shell-v3.v3:not(#_) .grid-pager-size .dropdown-item {
            padding-left: 0;
            padding-right: 0;
        }

    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .grid-pager-size .dropdown-menu {
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    }

/* The grid's other dropdowns, the toolbar's Menu and the column picker, in the page size's colours (the user,
   2026-10-22: the three must match; at night the page size's slate, not the blue night's navy): its solid ground, its
   line and its shadow, through v3-shell.css's --v3-drop-* tokens, set on the toolbar so other dropdowns keep theirs. Solid,
   so no blur and no sheen. */
body.shell-v3.v3:not(#_) .grid-toolbar {
    --v3-drop-bg: var(--v3-pager-menu);
    --v3-drop-sheen: transparent;
    --v3-drop-edge: var(--v3-q-bd);
    --v3-drop-shadow: 0 8px 22px rgba(23, 43, 69, 0.14);
    --v3-drop-ink: var(--v3-q-ink);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .grid-toolbar {
    --v3-drop-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

    /* The page size's choices in the same ink (its open choice keeps its own) */
    body.shell-v3.v3:not(#_) .grid-pager-size .dropdown-item:not(.active, :active) {
        color: var(--v3-q-ink);
    }

    body.shell-v3.v3:not(#_) .grid-toolbar .dropdown-menu {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

/* The column picker a size up (the user, 2026-10-22: too compact): the old 13px text in 23px rows becomes 14px in 30px
   rows, with more room round the checkbox and the edge */
body.shell-v3.v3:not(#_) .grid-toolbar-tools .dropdown-menu {
    padding: 6px !important;
}

    body.shell-v3.v3:not(#_) .grid-toolbar-tools .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-header {
        margin: 0 2px 4px;
        padding: 3px 8px 6px;
        font-size: 0.7rem;
    }

    body.shell-v3.v3:not(#_) .grid-toolbar-tools .dropdown-menu > li > label {
        gap: 9px;
        padding: 5px 12px 5px 10px;
        border-radius: 6px;
        font-size: 14px;
    }

        body.shell-v3.v3:not(#_) .grid-toolbar-tools .dropdown-menu > li > label > input {
            width: 15px;
            height: 15px;
        }

/* A menu item that can't be used (a rule switched it off: Orders' Packing Information with no vessel chosen) in a faded
   ink, as a disabled quiet button, with no hover, so it reads apart from the items that can be clicked */
body.shell-v3.v3:not(#_) .dropdown-menu .dropdown-item:is(:disabled, .disabled, [aria-disabled="true"]),
body.shell-v3.v3:not(#_) .dropdown-menu .dropdown-item:is(:disabled, .disabled, [aria-disabled="true"]) > :is(i, .bi) {
    background: transparent;
    color: rgba(var(--v3-rgb), 0.45);
    cursor: default;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .dropdown-menu .dropdown-item:is(:disabled, .disabled, [aria-disabled="true"]),
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .dropdown-menu .dropdown-item:is(:disabled, .disabled, [aria-disabled="true"]) > :is(i, .bi) {
    color: rgba(211, 217, 225, 0.38);
}

    /* The row (as in docs/mockups/v3_MOCKUP.html): the page links on the left; on the right the counts as plain text ("1 pages · 7
       records", LazZiya's two badges without their fills), then the page size, last. components.css already pushes the
       counts right (order 2, margin-left auto) and shows them from xl only; the page size follows them here. */
    body.shell-v3.v3:not(#_) .grid-pager > .grid-pager-size {
        order: 3;
    }

    body.shell-v3.v3:not(#_) .grid-pager > .pagination-sm > .col-2 {
        display: flex;
        align-items: center;
        margin-right: 12px;
    }

    @media (max-width: 1199.98px) {
        body.shell-v3.v3:not(#_) .grid-pager > .pagination-sm > .col-2 {
            display: none;
        }

        body.shell-v3.v3:not(#_) .grid-pager > .grid-pager-size {
            margin-left: auto;
        }
    }

    body.shell-v3.v3:not(#_) .grid-pager > .pagination-sm > .col-2 > .badge {
        padding: 0;
        border-radius: 0;
        background: none !important;
        color: var(--ink-muted) !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
    }

        body.shell-v3.v3:not(#_) .grid-pager > .pagination-sm > .col-2 > .badge + .badge::before {
            content: "\00B7";
            margin: 0 6px;
        }

/* ---------- 5. Details / Create / Edit cards ----------
   The shell's outer cards (the list v3-night-base.css raises at night; the older ones from 577px, where v3-shell.css makes
   them cards). Not
   inside a modal or an offcanvas panel, which have grounds of their own. The glass is a layer under the card, as the grid
   card's is: the card is positioned for it but makes no stacking context, so a dropdown inside it still opens over the
   next card. */
body.shell-v3.v3:not(#_) :is(.v3-panel, .detail-card, .detail-section, .prealert-editor-panel):not(.modal *, .offcanvas *) {
    position: relative;
    border-radius: var(--v3-card-radius);
    background: transparent;
    box-shadow: none;
}

    body.shell-v3.v3:not(#_) :is(.v3-panel, .detail-card, .detail-section, .prealert-editor-panel):not(.modal *, .offcanvas *)::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        box-sizing: border-box;
        border: 1px solid var(--glass-rim);
        border-radius: inherit;
        background: var(--glass-bg);
        box-shadow: var(--glass-shadow);
        -webkit-backdrop-filter: var(--glass-filter);
        backdrop-filter: var(--glass-filter);
        pointer-events: none;
    }

@media (min-width: 577px) {
    body.shell-v3.v3:not(#_) .container-responsive :is(.wms-form-shadow, .boxshadowdiv, .form-card):not(.modal *, .offcanvas *) {
        position: relative;
        border-radius: var(--v3-card-radius);
        background: transparent;
        box-shadow: none;
    }

        body.shell-v3.v3:not(#_) .container-responsive :is(.wms-form-shadow, .boxshadowdiv, .form-card):not(.modal *, .offcanvas *)::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            box-sizing: border-box;
            border: 1px solid var(--glass-rim);
            border-radius: inherit;
            background: var(--glass-bg);
            box-shadow: var(--glass-shadow);
            -webkit-backdrop-filter: var(--glass-filter);
            backdrop-filter: var(--glass-filter);
            pointer-events: none;
        }
}

/* Their text: labels in the muted ink, data in the body ink */
body.shell-v3.v3:not(#_) :is(dt, .detail-block-label, .form-label) {
    color: var(--ink-muted);
}

body.shell-v3.v3:not(#_) dd {
    color: var(--ink-body);
}

/* The audit line under a Details / Edit page (_AuditFooter, .record-audit: id, created, modified), outside the cards on
   the veil: by day and at sunset in the body text's ink (a dark slate blue, the plum at sunset) instead of the modals'
   grey, which read faintly there at its small size (the user, 2026-10-23). Night keeps v3-night-base's light blue. */
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .record-audit {
    color: var(--ink-body);
}

/* Their fields (and the folders' and the filter panel's): the glass field (a field that can't be edited keeps its grey) */
body.shell-v3.v3:not(#_) :is(.v3-panel, .detail-card, .detail-section, .prealert-editor-panel, .wms-form-shadow, .boxshadowdiv, .form-card, .customs-form .tab-content, #calculatorsTabContent, .filter-offcanvas) :is(.form-control:not([readonly]):not(:disabled), .form-select:not(:disabled)) {
    background-color: var(--glass-field);
    border-color: var(--v3-field-rim);
    color: var(--glass-field-ink);
}

body.shell-v3.v3:not(#_) :is(.v3-panel, .detail-card, .detail-section, .prealert-editor-panel, .wms-form-shadow, .boxshadowdiv, .form-card, .customs-form .tab-content, #calculatorsTabContent, .filter-offcanvas) .form-floating > label {
    color: var(--ink-muted);
}

/* ---------- 5b-fields. One field standard per scene (the user, 2026-10-23) ----------
   Editable: the glass field above, in a window's body too, and for select2's box and an unticked checkbox (they kept
   the white of the old look by day and the blue night's navy at night). Read-only, disabled (and select2 disabled) and
   an input group's addon: a muted version of the same field: a faint tint of the scene's colour (--field-readonly-bg,
   which components.css and v3-night-base already read) instead of Bootstrap's grey or the night's navy, a fainter line and
   muted text that still reads. A chosen field (Exports' ticked orders, .is-chosen) keeps its green, which v3-night-base's
   read-only navy had covered at night. select2's open list: the solid surface of v3's other menus (the page size's). */
body.shell-v3.v3:not(#_) {
    --field-readonly-bg: rgba(var(--v3-rgb), 0.07);
    --v3-field-off-rim: rgba(var(--v3-rgb), 0.12);
    --v3-field-off-ink: var(--ink-muted);
    --v3-option-on: rgba(var(--v3-rgb), 0.10);
    --v3-option-hover: var(--alma-blue);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --field-readonly-bg: rgba(160, 172, 190, 0.07);
    --v3-field-off-rim: rgba(160, 172, 190, 0.14);
    --v3-field-off-ink: var(--v3-text);
    --v3-option-on: rgba(160, 172, 190, 0.12);
    --v3-option-hover: var(--v3-search-btn-h);
}

body.shell-v3.v3:not(#_) .modal-body :is(.form-control:not([readonly]):not(:disabled), .form-select:not(:disabled)) {
    background-color: var(--glass-field);
    border-color: var(--v3-field-rim);
    color: var(--glass-field-ink);
}

body.shell-v3.v3:not(#_) :is(.form-control[readonly], .form-control:disabled, .form-select:disabled):not(.is-chosen) {
    background-color: var(--field-readonly-bg);
    border-color: var(--v3-field-off-rim);
    color: var(--v3-field-off-ink);
}

body.shell-v3.v3:not(#_) .form-control.is-chosen[readonly] {
    background-color: var(--field-chosen-bg);
    border-color: var(--field-chosen-border);
    color: var(--glass-field-ink);
}

body.shell-v3.v3:not(#_) .input-group-text {
    background-color: var(--field-readonly-bg);
    border-color: var(--v3-field-rim);
    color: var(--v3-field-off-ink);
}

body.shell-v3.v3:not(#_) .form-check-input:not(:checked) {
    background-color: var(--glass-field);
    border-color: var(--v3-field-rim);
}

/* select2's box: the glass field (its chevron is the background image, left alone) */
body.shell-v3.v3:not(#_) .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    background-color: var(--glass-field);
    border-color: var(--v3-field-rim);
}

    body.shell-v3.v3:not(#_) .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--glass-field-ink);
    }

    body.shell-v3.v3:not(#_) .select2-container--default .select2-selection--single :is(.select2-selection__placeholder, .select2-selection__clear) {
        color: var(--ink-muted);
    }

    body.shell-v3.v3:not(#_) .select2-container--default .select2-selection--multiple .select2-selection__choice {
        border-color: var(--v3-field-rim);
        background-color: var(--v3-option-on);
        color: var(--glass-field-ink);
    }

    body.shell-v3.v3:not(#_) .select2-container--default.select2-container--open :is(.select2-selection--single, .select2-selection--multiple) {
        border-color: var(--field-focus);
    }

body.shell-v3.v3:not(#_) .select2-container--default.select2-container--disabled :is(.select2-selection--single, .select2-selection--multiple) {
    background-color: var(--field-readonly-bg);
    border-color: var(--v3-field-off-rim);
}

    body.shell-v3.v3:not(#_) .select2-container--default.select2-container--disabled .select2-selection__rendered {
        color: var(--v3-field-off-ink);
    }

/* Its open list and the search box in it */
body.shell-v3.v3:not(#_) .select2-dropdown {
    background-color: var(--v3-pager-menu);
    color: var(--glass-field-ink);
}

    body.shell-v3.v3:not(#_) .select2-container--default .select2-search--dropdown .select2-search__field {
        border-color: var(--v3-field-rim);
        background-color: var(--glass-field);
        color: var(--glass-field-ink);
    }

    body.shell-v3.v3:not(#_) .select2-container--default .select2-results__option {
        color: var(--glass-field-ink);
    }

    body.shell-v3.v3:not(#_) .select2-container--default :is(.select2-results__option[aria-selected=true], .select2-results__option--selected) {
        background-color: var(--v3-option-on);
    }

    body.shell-v3.v3:not(#_) .select2-container--default :is(.select2-results__option--highlighted[aria-selected], .select2-results__option--highlighted.select2-results__option--selectable) {
        background-color: var(--v3-option-hover);
        color: #fff;
    }

    body.shell-v3.v3:not(#_) .select2-container--default .select2-results__option--disabled {
        color: var(--v3-field-off-ink);
        opacity: 0.6;
    }

/* The panels inside a Details card (an order's supplier, client and dates): by day and at sunset a shade of the glass
   card itself, the quick view's facts block (§7: a faint tint of the scene's colour), not the opaque grey surface
   (the user, 2026-10-23); at night a faint grey on the slate glass, not the blue night's navy (the user, 2026-10-22). */
/* A form's sections (.form-section: Exports' Orders In-Stock and Packages, an order's packing) the same, without their
   line (the user, 2026-10-23: the grey by day and the navy at night, beside the Details panels' convention). */
body.shell-v3.v3:not(#_) :is(.detail-block, .form-section) {
    background: rgba(var(--v3-rgb), 0.06);
}

body.shell-v3.v3:not(#_) .form-section {
    border-color: transparent;
}

    /* What sits in them, a package's box (.form-item) and an in-stock order's tile (.form-option): the glass field and
       its line, not the white of the old look or the night's navy; a ticked tile keeps its green */
    body.shell-v3.v3:not(#_) :is(.form-item, .form-option:not(:has(.form-check-input:checked))) {
        border-color: var(--v3-field-rim);
        background-color: var(--glass-field);
        color: var(--glass-field-ink);
    }

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(.detail-block, .form-section) {
    background: rgba(255, 255, 255, 0.05);
}

/* A note (.mm-note: an order's or a job's remarks): a deeper shade than the card it sits on (the facts and the panels are
   a shade of it), the card's 12px corners, and its accent the left border itself, curving with the corners, in the
   scene's label colour (--v3-label, the header labels above it) instead of the squared blue edge on a grey tint. A
   warning's or a danger's keeps its own colour. */
body.shell-v3.v3:not(#_) .mm-note:not(.is-warning, .is-danger) {
    border-left: 4px solid var(--v3-label);
    border-radius: 12px;
    background: rgba(var(--v3-rgb), 0.11);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .mm-note:not(.is-warning, .is-danger) {
    background: rgba(0, 0, 0, 0.22);
}

/* The XML exchange dialog (_MessagesModal) and the 507 progress dialog: the viewer a shade of the scene on the glass
   (day, sunset), the pale blue v3-night-base paints it at night kept but with the card's corners; the states and directions
   in the grid's inks at night. */
body.shell-v3.v3:not(#_) .modal-modern .xml-viewer-target {
    background: rgba(var(--v3-rgb), 0.07);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .modal-modern .xml-viewer-target {
    background: #dce8f8;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .modal-modern .mm-state-text.is-danger {
    color: #f2a19a;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .modal-modern :is(.mm-state-text.is-success, .mm-dir.is-received) {
    color: #7fd1a8;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .modal-modern .mm-dir.is-sent {
    color: var(--v3-label);
}

/* Customs Details' cards (AES status, Message Data, Export Operation, ...) at night: a dark grey, its header a shade
   lighter, not the blue night's navy (the user, 2026-10-23). */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .customs-details .card {
    background-color: #1f242c;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .customs-details .card-header {
    background-color: #2a313c;
    border-color: rgba(255, 255, 255, 0.08);
}

/* 1804 Details' invoice found by an Invoice Search (Tools, the 1804 grid's): a green glass tint over the row in place of
   Bootstrap's light yellow (.table-warning), the row's own ink kept, a green line under it; its moment's glow green too.
   At night the tint is stronger, so it shows on the slate (the user, 2026-10-23: light yellow under light text). */
body.shell-v3.v3:not(#_) tr.invoice-highlight-target {
    --v3-hl: 25, 135, 84;
    --v3-hl-tint: 0.10;
    --bs-table-bg: transparent;
    --bs-table-accent-bg: rgba(var(--v3-hl), var(--v3-hl-tint));
    --bs-table-color: inherit;
    --bs-table-border-color: rgba(var(--v3-hl), 0.35);
    color: inherit;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) tr.invoice-highlight-target {
    --v3-hl: 67, 178, 126;
    --v3-hl-tint: 0.16;
}

    body.shell-v3.v3:not(#_) tr.invoice-highlight-target > td {
        background-color: transparent;
        box-shadow: inset 0 0 0 9999px rgba(var(--v3-hl), var(--v3-hl-tint));
    }

    body.shell-v3.v3:not(#_) tr.invoice-highlight-target.is-flash {
        box-shadow: 0 0 0 .2rem rgba(var(--v3-hl), 0.35);
    }

/* AES Notifications' exported MRNs (CC599C): the same green glass tint in place of Bootstrap's opaque .table-success,
   which was a light green slab with dark text at night. The tint is the row's, not the cells': the row number's cell is
   faded (opacity, components.css) and would have shown a paler patch. The hover's tint goes over it as on any row. */
body.shell-v3.v3:not(#_) tr.aes-exported {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-color: var(--v3-row-text);
    --bs-table-hover-bg: rgba(var(--v3-rgb), 0.07);
    --bs-table-hover-color: var(--v3-row-text);
    --bs-table-border-color: rgba(var(--v3-rgb), 0.12);
    background-color: rgba(25, 135, 84, 0.10);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) tr.aes-exported {
    background-color: rgba(67, 178, 126, 0.16);
}

/* Pre-Alert's editor panel (prealert.css) is one of the glass cards above (the user, 2026-10-23: it was the blue
   night's navy panel). At night its sections (the shipment's details, the message) are the Details panels' faint grey,
   not the raised navy, and the message's editor and HTML preview the glass field; the picked PDFs a slate card. */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .prealert-editor-panel :is(.shipment-detail-card, .message-card) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .prealert-editor-panel :is(.basic-editor-shell, .html-preview-pane:not(.is-as-sent)) {
    background: var(--glass-field);
    border-color: var(--v3-field-rim) !important;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .prealert-editor-panel .attachment-card {
    background: #1f242c;
    border-color: rgba(255, 255, 255, 0.10);
}

    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .prealert-editor-panel .attachment-card :is(.filename, .thumb) {
        background: #2a313c;
        color: var(--v3-q-ink);
    }

/* Its four mode controls at night: the main part (icon and label) the slate grey of the search box's buttons, not the
   navy; the upload segment keeps v3-night-base's blue, and the chosen mode its AL-MA blue (the user, 2026-10-23). */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .prealert-mode:not(.is-active) {
    --pm-rim: rgba(160, 172, 190, 0.20);
    --pm-main: #2a313c;
    --pm-main-hover: #38404d;
    --pm-ink: #d3d9e1;
}

/* The message's format picker (a native select): its open list on the dropdowns' solid ground (the page size's list,
   --v3-pager-menu) in the field's ink, not the browser's lighter grey at night. */
body.shell-v3.v3:not(#_) .prealert-format-select option,
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) select.form-control:not([readonly]):not(:disabled) option {
    background-color: var(--v3-pager-menu);
    color: var(--glass-field-ink);
}

/* Job Create / Edit at night: the expense and charge rows' selects (Type, Vendor, VAT, company; Bootstrap's
   .form-select, locked ones too) open on the same solid dark grey as the Job Type list, and the "% of ALMA net" menu
   takes that ground as well; the card tables' column headings in the field labels' muted ink (below, all scenes;
   the user, 2026-10-24). */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .job-panel select.form-select option,
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .job-panel select.form-select optgroup {
    background-color: var(--v3-pager-menu);
    color: var(--glass-field-ink);
}

/* The filter panel's selects at night: the open list on the closed field's own colour (the user, 2026-10-29), not the
   browser's grey. A list can't be see-through, so --v3-filter-option is the glass field (#0f1622 at 45%) worked out
   solid over the panel's glass; Fast Mode's solid field (fast.css) is already that colour. */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-filter-option: #1b222e;
}

html.fast[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-filter-option: var(--glass-field);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .filter-offcanvas select.form-select option,
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .filter-offcanvas select.form-select optgroup {
    background-color: var(--v3-filter-option);
    color: var(--glass-field-ink);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .job-panel .dropdown-menu {
    --bs-dropdown-bg: var(--v3-pager-menu);
    --bs-dropdown-link-color: var(--glass-field-ink);
    background-color: var(--v3-pager-menu);
}

/* Every scene: the card tables' column headings in the field labels' muted ink (--ink-muted), not the tint-clashing blue
   or the full-strength ink, so the data (near-white at night, black by day) stands out against them. */
body.shell-v3.v3:not(#_) .job-panel .job-rows-table thead th {
    color: var(--ink-muted);
}

/* ---------- 5b. The tabbed "folder" cards (Customs Create / Edit, Tools' calculators) ----------
   The panel and its open tab are one flat glass (--v3-folder), so they read as one piece; the panel's glass is a layer
   under it, as the other cards'; the tabs not open are faint tabs of the scene's colour behind it. */
body.shell-v3.v3:not(#_) :is(.customs-form .tab-content, #calculatorsTabContent) {
    position: relative;
    /* The markup's rounded-bottom (Bootstrap's radius, !important) on all four corners (the user, 2026-10-23) */
    border-radius: var(--bs-border-radius);
    background: transparent;
    box-shadow: none;
}

    body.shell-v3.v3:not(#_) :is(.customs-form .tab-content, #calculatorsTabContent)::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        box-sizing: border-box;
        border: 1px solid var(--glass-rim);
        /* No line along the top: it showed through the open tab, which carries its own line above */
        border-top-color: transparent;
        border-radius: inherit;
        background: var(--v3-folder);
        /* The glass's shadow without its inset top highlight: through the open tab it read as a hairline under it */
        box-shadow: var(--v3-folder-shadow);
        -webkit-backdrop-filter: var(--glass-filter);
        backdrop-filter: var(--glass-filter);
        pointer-events: none;
    }

/* The tabs start inside the panel's top-left curve, so all four corners keep the same radius (the user, 2026-10-23: the
   first tab at the panel's edge stood on the rounded corner). Customs' px-2 is !important, so this is too. */
body.shell-v3.v3:not(#_) :is(.customs-form .nav-tabs, #calculatorsTab) {
    padding-left: var(--v3-card-radius) !important;
}

    /* v3-shell.css squares the calculators' corner with the first tab open, in a selector that outweighs the one above */
    body.shell-v3.v3:not(#_):not(#_) #calculatorsTabContent {
        border-top-left-radius: var(--bs-border-radius);
    }

body.shell-v3.v3:not(#_) :is(.customs-form .nav-tabs, #calculatorsTab, .aes-tabs) .nav-link.active {
    border: 1px solid var(--glass-rim);
    border-bottom-color: transparent;
    border-radius: var(--v3-radius) var(--v3-radius) 0 0;
    background: var(--v3-folder);
    box-shadow: none;
    color: var(--ink);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

body.shell-v3.v3:not(#_) :is(.customs-form .nav-tabs, #calculatorsTab, .aes-tabs) .nav-link:not(.active) {
    border-color: transparent;
    border-radius: var(--v3-radius) var(--v3-radius) 0 0;
    background: rgba(var(--v3-rgb), 0.07);
    box-shadow: none;
    color: var(--v3-q-ink);
}

    body.shell-v3.v3:not(#_) :is(.customs-form .nav-tabs, #calculatorsTab, .aes-tabs) .nav-link:not(.active):is(:hover, :focus-visible) {
        background: var(--v3-q-bg-h);
        color: var(--v3-q-ink-h);
    }

/* ---------- 5c. The main menu (the header's slide-in panel) and the filter panel ----------
   The sign-in window's glass (--glass-modal), on a layer under each: both are fixed panels holding menus and pickers.
   Their links keep the AL-MA blue key under the pointer. */
body.shell-v3.v3:not(#_) :is(.custom-panel, .filter-offcanvas) {
    background: transparent;
    border-left: 1px solid var(--glass-modal-rim);
    box-shadow: -8px 0 30px rgba(23, 43, 69, 0.18);
    color: var(--ink);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(.custom-panel, .filter-offcanvas) {
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.45);
}

    body.shell-v3.v3:not(#_) :is(.custom-panel, .filter-offcanvas)::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--glass-modal);
        -webkit-backdrop-filter: var(--glass-modal-filter);
        backdrop-filter: var(--glass-modal-filter);
        pointer-events: none;
    }

    body.shell-v3.v3.v3-modal-dim:not(#_) :is(.custom-panel, .filter-offcanvas)::before {
        background: var(--v3-modal-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.shell-v3.v3:not(#_) :is(.custom-panel-header, .filter-offcanvas .offcanvas-header, .filter-offcanvas .offcanvas-footer) {
        border-color: rgba(var(--v3-rgb), 0.16);
        background: rgba(var(--v3-rgb), 0.05);
    }

    body.shell-v3.v3:not(#_) :is(.custom-panel-header h5, .filter-offcanvas .offcanvas-title) {
        color: var(--ink);
    }

    body.shell-v3.v3:not(#_) :is(.custom-panel-header .close-panel, .filter-offcanvas .btn-close) {
        color: var(--ink-muted);
    }

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .filter-offcanvas .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

    body.shell-v3.v3:not(#_) .custom-panel-body ul li a,
    body.shell-v3.v3:not(#_) .custom-panel .dropdown > a,
    body.shell-v3.v3:not(#_) .custom-panel .dropdown > ul > li a,
    body.shell-v3.v3:not(#_) .custom-panel .icon-row a {
        color: var(--ink-accent);
        border-color: rgba(var(--v3-rgb), 0.14);
    }

        body.shell-v3.v3:not(#_) .custom-panel-body ul li a:hover,
        body.shell-v3.v3:not(#_) .custom-panel .dropdown > a:hover,
        body.shell-v3.v3:not(#_) .custom-panel .dropdown.open > a,
        body.shell-v3.v3:not(#_) .custom-panel .dropdown > ul > li a:hover,
        body.shell-v3.v3:not(#_) .custom-panel .icon-row a:hover {
            background-color: #304f7f;
            color: #fff;
        }

    /* The footer's round keys (profile, language, settings) as the quiet glass keys, in the scene's colour; the hairlines
       above them and under the icon row in the scene's colour too. Sign Out is the red glass (data-v3-role="red"). */
    body.shell-v3.v3:not(#_) .menu-footer { border-top-color: rgba(var(--v3-rgb), 0.18); }
    body.shell-v3.v3:not(#_) .custom-panel .icon-row { border-bottom-color: rgba(var(--v3-rgb), 0.18); }

    body.shell-v3.v3:not(#_) .menu-footer .menu-round {
        border: 1px solid var(--v3-q-bd);
        background: var(--v3-q-bg);
        color: var(--v3-q-ink);
        -webkit-backdrop-filter: var(--v3-key-filter);
        backdrop-filter: var(--v3-key-filter);
        box-shadow: var(--v3-key-shadow);
    }

        body.shell-v3.v3:not(#_) .menu-footer .menu-round:is(:hover, :focus-visible, [aria-expanded="true"]) {
            border-color: var(--v3-q-bd-h);
            background: var(--v3-q-bg-h);
            color: var(--v3-q-ink-h);
        }

    /* Sign Out as a tinted key without the outline, in every scene (the user, 2026-10-24); the tint steps up on hover and press */
    body.shell-v3.v3:not(#_) .menu-footer .btn.logout-button {
        --btn-x-bd: transparent;
        --btn-x-bd-h: transparent;
        --btn-x-bd-a: transparent;
        --btn-x-bg: rgba(220, 53, 69, 0.16);
    }

    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .menu-footer .btn.logout-button {
        --btn-x-bg: rgba(242, 161, 154, 0.16);
    }

    body.shell-v3.v3:not(#_) .custom-panel .dropdown > ul > li a.menu-deprecated:not(:hover) {
        color: var(--ink-soft);
    }

    /* At night the links are the light ink and their icons keep the light blue, as the grid's column headings over its
       blue links (the user, 2026-10-22). By day both are the accent. */
    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .custom-panel-body ul li a:not(:hover),
    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .custom-panel .dropdown:not(.open) > a:not(:hover),
    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .custom-panel .dropdown > ul > li a:not(.menu-deprecated):not(:hover) {
        color: var(--ink);
    }

        html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .custom-panel-body ul li a:not(:hover) > :is(i, .bi, .bx),
        html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .custom-panel .dropdown:not(.open) > a:not(:hover) > :is(i, .bi, .bx),
        html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .custom-panel .icon-row a:not(:hover) {
            color: var(--ink-accent);
        }

/* ---------- 5d. The footer's popups: the bell's notifications and the cogwheel menu ----------
   The sign-in window's glass, straight on the panel (each already blurs what is behind it and holds no menu of its own).
   Their blue heads, rows and arrows to the head keep their looks; the cogwheel menu's arrow, under its foot, takes the
   glass's colour. A trial (the user, 2026-10-22): they may go back if the screen reads too busy. */
body.shell-v3.v3:not(#_) :is(#notifPanel.notif-panel, .footer-menu) {
    border: 1px solid var(--glass-modal-rim);
    background: var(--glass-modal);
    box-shadow: var(--glass-modal-shadow);
    -webkit-backdrop-filter: var(--glass-modal-filter);
    backdrop-filter: var(--glass-modal-filter);
    color: var(--ink);
}

body.shell-v3.v3.v3-modal-dim:not(#_) :is(#notifPanel.notif-panel, .footer-menu) {
    background: var(--v3-modal-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

    body.shell-v3.v3:not(#_) .footer-menu::after {
        border-top-color: var(--v3-pop-arrow);
    }

    body.shell-v3.v3:not(#_) #notifPanel :is(.notif-msg, .notif-time) {
        color: var(--ink-muted);
    }

    body.shell-v3.v3:not(#_) #notifPanel .notif-title {
        color: var(--ink);
    }

    body.shell-v3.v3:not(#_) #notifPanel .notif-row {
        border-color: rgba(var(--v3-rgb), 0.12);
    }

/* Behind the open main menu, the modals' setting too: the light blur, or a plain dim. The panel lives in the header
   (sticky, z-index 997, so its own stacking context), so the veil is the header's layer, just under the panel (1050),
   fixed to the window. A click on it is outside the panel and closes it, as a click on the page did. */
body.shell-v3.v3:not(#_) #header:has(#customPanel.show)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1049;
    animation: v3-veil-in 0.25s ease-out both;
}

body.shell-v3.v3.v3-modal-blur:not(#_) #header:has(#customPanel.show)::after {
    background-color: rgba(15, 28, 46, 0.22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.shell-v3.v3.v3-modal-dim:not(#_) #header:has(#customPanel.show)::after {
    background-color: rgba(15, 28, 46, 0.42);
}

html[data-v3-scene="night"] body.shell-v3.v3.v3-modal-dim:not(#_) #header:has(#customPanel.show)::after {
    background-color: rgba(3, 7, 14, 0.55);
}

@keyframes v3-veil-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.shell-v3.v3:not(#_) #header:has(#customPanel.show)::after {
        animation: none;
    }
}

/* The filter panel's backdrop follows the modals' setting: the sign-in window's light blur, or a plain dim. Its opacity
   stays 1 (a backdrop-filter is painted through its element's opacity); the colour's alpha dims instead. Bootstrap puts an
   offcanvas's backdrop beside the panel (inside its form), not under <body>. */
body.shell-v3.v3.v3-modal-blur:not(#_) .offcanvas-backdrop.show {
    opacity: 1;
    background-color: rgba(15, 28, 46, 0.22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.shell-v3.v3.v3-modal-dim:not(#_) .offcanvas-backdrop.show {
    opacity: 1;
    background-color: rgba(15, 28, 46, 0.42);
}

html[data-v3-scene="night"] body.shell-v3.v3.v3-modal-dim:not(#_) .offcanvas-backdrop.show {
    background-color: rgba(3, 7, 14, 0.55);
}

    body.shell-v3.v3:not(#_) .form-floating > label::after {
        background-color: transparent;
    }

/* ---------- 5e. The footer strip (_FooterV3) ----------
   As Welcome's strip (landing.css, .landing-footer): every item has its icon (the language its globe, which switches it
   too, the terms the ribbon, the profile the person), in one bright sky blue in place of the old cyan, with the role, the
   EN / EL switch and the cogwheel; white under the pointer. The blue is the same in every scene: the strip sits on the
   sea's dark band in each (navy, plum, near-black), and it reads on all three (the user, 2026-10-23). From md up the
   strip runs to the cards' edge (14px past the container, v3-shell.css .page-card), so its first and last items line up with
   the cards above. Below 1024px it is icons only (the language the globe alone), with the role, the bell and its count
   and the cogwheel kept: it fits in one row at 360px. */
body.shell-v3.v3:not(#_) {
    --v3-footer-accent: #7ecafd;
}

/* Welcome's own strip (landing.css paints its icons, the role, EN / EL and the cogwheel in --aqua) in the same blue, so
   the two footers match (the user, 2026-10-23). Only the strip: --aqua stays teal on the rest of the page. */
body.shell-v3.v3:not(#_) .landing-footer {
    --aqua: var(--v3-footer-accent);
}

body.shell-v3.v3:not(#_) .footer-v3-inner :is(a:not(.notif-panel a, .footer-menu-item) > i, .lang-globe > i, .footer-cog-btn > i),
body.shell-v3.v3:not(#_) .footer-v3-inner .footer-user b {
    color: var(--v3-footer-accent);
}

/* The EN / EL switch is text, so it takes the colour of the "Language:" label beside it (v3-shell.css's strip colour); only
   the icons are blue. */
body.shell-v3.v3:not(#_) .footer-v3-inner .lang-switch .lang-code {
    color: #dcebf7;
}

    body.shell-v3.v3:not(#_) .footer-v3-inner .lang-switch .lang-code:is(:hover, :focus-visible) {
        color: #fff;
    }

    body.shell-v3.v3:not(#_) .footer-v3-inner :is(a:not(.notif-panel a, .footer-menu-item):hover > i, .lang-globe:is(:hover, :focus-visible) > i, .footer-cog-btn:is(:hover, :focus-visible, [aria-expanded="true"]) > i) {
        color: #fff;
    }

body.shell-v3.v3:not(#_) .footer-v3-inner .lang-switch .lang-globe {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

body.shell-v3.v3:not(#_) .footer-v3-inner a:not(.notif-panel a, .footer-menu-item) > i,
body.shell-v3.v3:not(#_) .footer-cog-btn {
    font-size: 15px;
}

/* The strip drawn the same on every page: where it lands depends on the page's height, often a fraction of a pixel (more
   so under Windows' 125% / 150% scaling), and each icon and its text were rounded to the screen's pixels on their own,
   so the text moved up to 2 device pixels against its icon, higher on one page than another (the user, 2026-10-23:
   Remittances vs 1804 Details). As a layer of its own the strip is placed on whole device pixels, so its icons and
   text always meet the same way (a layer per item did not hold: tested 2026-10-23). The layer is also the box the
   bell's panel and the cogwheel's menu (position: fixed, inside it) are placed against: notifications.js and
   v3-footer.js measure it (they opened off the right edge until they did). */
body.shell-v3.v3:not(#_) .footer-v3-inner {
    will-change: transform;
}

    /* The profile link: the person and the name, the name cut short before the role */
    body.shell-v3.v3:not(#_) .footer-v3-inner .footer-user a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    body.shell-v3.v3:not(#_) .footer-v3-inner .footer-user-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.shell-v3.v3:not(#_) .footer-v3-inner .footer-user a:hover .footer-user-name {
        text-decoration: underline;
    }

@media (min-width: 768px) {
    body.shell-v3.v3:not(#_) .footer-v3-inner {
        max-width: calc(90% + 28px);
    }

    html.v3-wide body.shell-v3.v3:not(#_) .footer-v3-inner {
        max-width: calc(95% + 28px);
    }
}

@media (max-width: 1023.98px) {
    body.shell-v3.v3:not(#_) .footer-v3-inner {
        flex-wrap: nowrap;
        gap: 14px;
    }

        /* v3-shell.css hides the email and the phone on a phone; here they stay, as icons */
        body.shell-v3.v3:not(#_) .footer-v3-inner > a {
            display: inline-flex;
        }

            body.shell-v3.v3:not(#_) .footer-v3-inner > a > span,
            body.shell-v3.v3:not(#_) .footer-v3-inner .lang-switch > :is(span, .lang-code),
            body.shell-v3.v3:not(#_) .footer-v3-inner .footer-user-name {
                display: none;
            }

        body.shell-v3.v3:not(#_) .footer-v3-inner .footer-user {
            gap: 8px;
        }

            /* Two roles or more cut short rather than push the bell and the cogwheel off the row */
            body.shell-v3.v3:not(#_) .footer-v3-inner .footer-user b {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        body.shell-v3.v3:not(#_) .footer-v3-inner .footer-user + .footer-tools {
            margin-left: -6px;
        }
}

@media (max-width: 399.98px) {
    body.shell-v3.v3:not(#_) .footer-v3-inner {
        gap: 12px;
    }
}

/* ---------- 6. Buttons ----------
   Locked 2026-10-22 (docs/archive/v3_THEME_PLAN.md §4b, the LOCKED table; docs/mockups/v3_MOCKUP.html "The locked set"):
   - Solid AL-MA blue: Add New, Save, Apply, a record's main actions and the send-email buttons (btn-alma, the primary
     role).
   - Glass tints (a tint of the colour, its line and its text in it): green for the submissions (the submit role),
     Approve and the record steps (btn-success, btn-outline-success, data-v3-role="green"); amber for a warning
     (btn-warning, data-v3-role="amber"); red for every remover on a page (btn-danger, btn-outline-danger, the danger
     roles, data-v3-role="red"); the AL-MA blue for the secondary actions (the sync role, data-v3-role="glass").
   - Solid red only for the last click: a Delete inside a window, or data-v3-role="confirm".
   - The admin purple: btn-admin, data-v3-role="admin". Every other button quiet: Filters, the column picker, Menu, the
     menu tier, Cancel / Back to List, btn-light and the documents.
   - A page header's buttons (6b): the quiet ones frosted keys; Edit, Delete and Back to List the key with an AL-MA blue,
     red and grey outline (6c). The blue-glass buttons (glass, sync) are the blue outlined key everywhere (6c).
   data-v3-role is v3's own hint, read by nothing else (style A and button style B never see it), and it wins over
   data-btn-role. The 507 status buttons (btn-success / btn-warning) keep their colour as a tint. */
body.shell-v3.v3:not(#_) {
    --btn-primary-bg: #304f7f;  --btn-primary-fg: #fff;    --btn-primary-bd: #304f7f;   --btn-primary-bg-h: #3e6db5; --btn-primary-fg-h: #fff;  --btn-primary-bd-h: #3e6db5; --btn-primary-bg-a: #29446d; --btn-primary-bd-a: #29446d;
    --btn-admin-bg: #ece6f6;    --btn-admin-fg: #4a3478;   --btn-admin-bd: #ece6f6;     --btn-admin-bg-h: #ddd2ef;   --btn-admin-fg-h: #3a2862; --btn-admin-bd-h: #ddd2ef;  --btn-admin-bg-a: #cfc0e7;  --btn-admin-bd-a: #cfc0e7;
    /* The quiet tiers: one value */
    --btn-filter-bg: var(--v3-q-bg);  --btn-filter-fg: var(--v3-q-ink);  --btn-filter-bd: var(--v3-q-bd);  --btn-filter-bg-h: var(--v3-q-bg-h);  --btn-filter-fg-h: var(--v3-q-ink-h);  --btn-filter-bd-h: var(--v3-q-bd-h);  --btn-filter-bg-a: var(--v3-q-bg-h);  --btn-filter-bd-a: var(--v3-q-bd-h);
    --btn-neutral-bg: var(--v3-q-bg); --btn-neutral-fg: var(--v3-q-ink); --btn-neutral-bd: var(--v3-q-bd); --btn-neutral-bg-h: var(--v3-q-bg-h); --btn-neutral-fg-h: var(--v3-q-ink-h); --btn-neutral-bd-h: var(--v3-q-bd-h); --btn-neutral-bg-a: var(--v3-q-bg-h); --btn-neutral-bd-a: var(--v3-q-bd-h);
    --btn-menu-bg: var(--v3-q-bg);    --btn-menu-fg: var(--v3-q-ink);    --btn-menu-bd: var(--v3-q-bd);    --btn-menu-bg-h: var(--v3-q-bg-h);    --btn-menu-fg-h: var(--v3-q-ink-h);    --btn-menu-bd-h: var(--v3-q-bd-h);    --btn-menu-bg-a: var(--v3-q-bg-h);    --btn-menu-bd-a: var(--v3-q-bd-h);
    --btn-cancel-bg: var(--v3-q-bg);  --btn-cancel-fg: var(--v3-q-ink);  --btn-cancel-bd: var(--v3-q-bd);  --btn-cancel-bg-h: var(--v3-q-bg-h);  --btn-cancel-fg-h: var(--v3-q-ink-h);  --btn-cancel-bd-h: var(--v3-q-bd-h);  --btn-cancel-bg-a: var(--v3-q-bg-h);  --btn-cancel-bd-a: var(--v3-q-bd-h);
    --btn-light-bg: var(--v3-q-bg);   --btn-light-fg: var(--v3-q-ink);   --btn-light-bd: var(--v3-q-bd);   --btn-light-bg-h: var(--v3-q-bg-h);   --btn-light-fg-h: var(--v3-q-ink-h);   --btn-light-bd-h: var(--v3-q-bd-h);   --btn-light-bg-a: var(--v3-q-bg-h);   --btn-light-bd-a: var(--v3-q-bd-h);
    --btn-quiet-bg: var(--v3-q-bg);   --btn-quiet-fg: var(--v3-q-ink);   --btn-quiet-bd: var(--v3-q-bd);   --btn-quiet-bg-h: var(--v3-q-bg-h);   --btn-quiet-fg-h: var(--v3-q-ink-h);   --btn-quiet-bd-h: var(--v3-q-bd-h);   --btn-quiet-bg-a: var(--v3-q-bg-h);   --btn-quiet-bd-a: var(--v3-q-bd-h);
    /* The glass tints: green (the submissions, Approve, the record steps), amber (a warning), red (a remover on a page),
       the AL-MA blue (the secondary actions) */
    --btn-success-bg: rgba(25, 135, 84, 0.10);  --btn-success-fg: #146c43; --btn-success-bd: rgba(25, 135, 84, 0.34);  --btn-success-bg-h: rgba(25, 135, 84, 0.18);  --btn-success-fg-h: #0f5132; --btn-success-bd-h: rgba(25, 135, 84, 0.52);  --btn-success-bg-a: rgba(25, 135, 84, 0.24);  --btn-success-bd-a: rgba(25, 135, 84, 0.56);
    --btn-warning-bg: rgba(214, 160, 0, 0.10);  --btn-warning-fg: #7a5300; --btn-warning-bd: rgba(214, 160, 0, 0.34);  --btn-warning-bg-h: rgba(214, 160, 0, 0.18);  --btn-warning-fg-h: #4d3500; --btn-warning-bd-h: rgba(214, 160, 0, 0.52);  --btn-warning-bg-a: rgba(214, 160, 0, 0.24);  --btn-warning-bd-a: rgba(214, 160, 0, 0.56);
    --btn-danger-bg: rgba(220, 53, 69, 0.10);   --btn-danger-fg: #b42318;  --btn-danger-bd: rgba(220, 53, 69, 0.34);   --btn-danger-bg-h: rgba(220, 53, 69, 0.18);   --btn-danger-fg-h: #912018;  --btn-danger-bd-h: rgba(220, 53, 69, 0.52);   --btn-danger-bg-a: rgba(220, 53, 69, 0.24);   --btn-danger-bd-a: rgba(220, 53, 69, 0.56);
    --btn-glass-bg: rgba(48, 79, 127, 0.10);    --btn-glass-fg: #304f7f;   --btn-glass-bd: rgba(48, 79, 127, 0.32);    --btn-glass-bg-h: rgba(48, 79, 127, 0.18);    --btn-glass-fg-h: #172b45;   --btn-glass-bd-h: rgba(48, 79, 127, 0.50);    --btn-glass-bg-a: rgba(48, 79, 127, 0.24);    --btn-glass-bd-a: rgba(48, 79, 127, 0.55);
    /* The soft roles are their colour's tint */
    --btn-success-soft-bg: var(--btn-success-bg); --btn-success-soft-fg: var(--btn-success-fg); --btn-success-soft-bd: var(--btn-success-bd); --btn-success-soft-bg-h: var(--btn-success-bg-h); --btn-success-soft-fg-h: var(--btn-success-fg-h); --btn-success-soft-bd-h: var(--btn-success-bd-h); --btn-success-soft-bg-a: var(--btn-success-bg-a); --btn-success-soft-bd-a: var(--btn-success-bd-a);
    --btn-danger-soft-bg: var(--btn-danger-bg);   --btn-danger-soft-fg: var(--btn-danger-fg);   --btn-danger-soft-bd: var(--btn-danger-bd);   --btn-danger-soft-bg-h: var(--btn-danger-bg-h);   --btn-danger-soft-fg-h: var(--btn-danger-fg-h);   --btn-danger-soft-bd-h: var(--btn-danger-bd-h);   --btn-danger-soft-bg-a: var(--btn-danger-bg-a);   --btn-danger-soft-bd-a: var(--btn-danger-bd-a);
    /* The last click of a delete: solid red */
    --btn-confirm-bg: #dc3545;  --btn-confirm-fg: #fff;    --btn-confirm-bd: #dc3545;   --btn-confirm-bg-h: #bb2d3b; --btn-confirm-fg-h: #fff;  --btn-confirm-bd-h: #bb2d3b; --btn-confirm-bg-a: #b02a37; --btn-confirm-bd-a: #b02a37;
    /* The documents' file-type icons (a quiet button's only colour), as in style B */
    --doc-pdf: #c0392b;         --doc-xls: #1d7a46;        --doc-xml: #b26a00;          --doc-invoice: #198754;      --doc-action: #304f7f;
    /* The modern modals' pills: the AL-MA blue, the quiet one quiet, the red solid (a window's Delete is the last click),
       the soft red the red tint */
    --pill-primary-bg: #304f7f; --pill-primary-fg: #fff;   --pill-primary-bg-h: #3e6db5;
    --pill-quiet-bg: var(--v3-q-bg); --pill-quiet-fg: var(--v3-q-ink); --pill-quiet-bg-h: var(--v3-q-bg-h); --pill-quiet-fg-h: var(--v3-q-ink-h);
    --pill-danger-bg: #dc3545;  --pill-danger-fg: #fff;    --pill-danger-bg-h: #bb2d3b;
    --pill-danger-quiet-bg: rgba(220, 53, 69, 0.10); --pill-danger-quiet-fg: #b42318; --pill-danger-quiet-bg-h: rgba(220, 53, 69, 0.18); --pill-danger-quiet-fg-h: #912018;
}

/* At night: the tints in the night inks, the admin purple at style B's night values, the solid red softer; the AL-MA
   blue as by day */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --btn-admin-bg: #362d4d;    --btn-admin-fg: #d6c9f2;   --btn-admin-bd: #362d4d;     --btn-admin-bg-h: #43385f;   --btn-admin-fg-h: #fff;     --btn-admin-bd-h: #43385f;  --btn-admin-bg-a: #504470;  --btn-admin-bd-a: #504470;
    --btn-success-bg: rgba(111, 214, 163, 0.10); --btn-success-fg: #6fd6a3; --btn-success-bd: rgba(111, 214, 163, 0.34); --btn-success-bg-h: rgba(111, 214, 163, 0.18); --btn-success-fg-h: #9be6c1; --btn-success-bd-h: rgba(111, 214, 163, 0.52); --btn-success-bg-a: rgba(111, 214, 163, 0.24); --btn-success-bd-a: rgba(111, 214, 163, 0.56);
    --btn-warning-bg: rgba(245, 196, 94, 0.10);  --btn-warning-fg: #f5c45e; --btn-warning-bd: rgba(245, 196, 94, 0.34);  --btn-warning-bg-h: rgba(245, 196, 94, 0.18);  --btn-warning-fg-h: #ffd88a; --btn-warning-bd-h: rgba(245, 196, 94, 0.52);  --btn-warning-bg-a: rgba(245, 196, 94, 0.24);  --btn-warning-bd-a: rgba(245, 196, 94, 0.56);
    --btn-danger-bg: rgba(242, 161, 154, 0.10);  --btn-danger-fg: #f2a19a;  --btn-danger-bd: rgba(242, 161, 154, 0.34);  --btn-danger-bg-h: rgba(242, 161, 154, 0.18);  --btn-danger-fg-h: #ffc2bd;  --btn-danger-bd-h: rgba(242, 161, 154, 0.52);  --btn-danger-bg-a: rgba(242, 161, 154, 0.24);  --btn-danger-bd-a: rgba(242, 161, 154, 0.56);
    --btn-glass-bg: rgba(140, 180, 240, 0.12);   --btn-glass-fg: #c6dbf7;   --btn-glass-bd: rgba(140, 180, 240, 0.32);   --btn-glass-bg-h: rgba(140, 180, 240, 0.20);   --btn-glass-fg-h: #fff;      --btn-glass-bd-h: rgba(140, 180, 240, 0.50);   --btn-glass-bg-a: rgba(140, 180, 240, 0.26);   --btn-glass-bd-a: rgba(140, 180, 240, 0.55);
    --btn-confirm-bg: #a83a47;  --btn-confirm-bd: #a83a47; --btn-confirm-bg-h: #b8404e; --btn-confirm-bd-h: #b8404e; --btn-confirm-bg-a: #b8404e; --btn-confirm-bd-a: #b8404e;
    --doc-pdf: #ff8b82;         --doc-xls: #6fd6a3;        --doc-xml: #f5b45e;          --doc-invoice: #6fd6a3;      --doc-action: #8cb4f0;
    --pill-danger-bg: #a83a47;  --pill-danger-bg-h: #b8404e;
    --pill-danger-quiet-bg: rgba(242, 161, 154, 0.12); --pill-danger-quiet-fg: #f2a19a; --pill-danger-quiet-bg-h: rgba(242, 161, 154, 0.22); --pill-danger-quiet-fg-h: #ffc2bd;
}

/* The night sheets (v3-night.css, v3-night-base.css) set the pills on .modal-modern itself: v3's win there too */
body.shell-v3.v3:not(#_) .modal-modern {
    --pill-primary-bg: #304f7f; --pill-primary-fg: #fff;   --pill-primary-bg-h: #3e6db5;
    --pill-quiet-bg: var(--v3-q-bg); --pill-quiet-fg: var(--v3-q-ink); --pill-quiet-bg-h: var(--v3-q-bg-h); --pill-quiet-fg-h: var(--v3-q-ink-h);
    --pill-danger-bg: #dc3545;  --pill-danger-fg: #fff;    --pill-danger-bg-h: #bb2d3b;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .modal-modern {
    --pill-danger-bg: #a83a47;  --pill-danger-bg-h: #b8404e;
}

    /* The quiet pill carries the quiet buttons' line */
    body.shell-v3.v3:not(#_) .modal-modern .mm-btn.is-quiet:not(.is-danger) {
        box-shadow: inset 0 0 0 1px var(--v3-q-bd);
    }

/* Roles by hint: data-btn-role (which button style B reads too) and data-v3-role (v3's own, which wins). The role v3
   gives it, whatever the button's class. */
body.shell-v3.v3:not(#_) .btn:is([data-btn-role], [data-v3-role]) {
    --bs-btn-color: var(--btn-x-fg);
    --bs-btn-bg: var(--btn-x-bg);
    --bs-btn-border-color: var(--btn-x-bd);
    --bs-btn-hover-color: var(--btn-x-fg-h);
    --bs-btn-hover-bg: var(--btn-x-bg-h);
    --bs-btn-hover-border-color: var(--btn-x-bd-h);
    --bs-btn-active-color: var(--btn-x-fg-h);
    --bs-btn-active-bg: var(--btn-x-bg-a);
    --bs-btn-active-border-color: var(--btn-x-bd-a);
    --bs-btn-disabled-color: var(--btn-x-fg);
    --bs-btn-disabled-bg: var(--btn-x-bg);
    --bs-btn-disabled-border-color: var(--btn-x-bd);
}

body.shell-v3.v3:not(#_) .btn[data-btn-role="primary"] { --btn-x-bg: var(--btn-primary-bg); --btn-x-fg: var(--btn-primary-fg); --btn-x-bd: var(--btn-primary-bd); --btn-x-bg-h: var(--btn-primary-bg-h); --btn-x-fg-h: var(--btn-primary-fg-h); --btn-x-bd-h: var(--btn-primary-bd-h); --btn-x-bg-a: var(--btn-primary-bg-a); --btn-x-bd-a: var(--btn-primary-bd-a); }
body.shell-v3.v3:not(#_) .btn:is([data-btn-role="filter"], [data-btn-role="neutral"], [data-btn-role="cancel"], [data-btn-role="doc"], [data-btn-role="aes"], [data-btn-role="job"], [data-btn-role="job-soft"]) { --btn-x-bg: var(--btn-quiet-bg); --btn-x-fg: var(--btn-quiet-fg); --btn-x-bd: var(--btn-quiet-bd); --btn-x-bg-h: var(--btn-quiet-bg-h); --btn-x-fg-h: var(--btn-quiet-fg-h); --btn-x-bd-h: var(--btn-quiet-bd-h); --btn-x-bg-a: var(--btn-quiet-bg-a); --btn-x-bd-a: var(--btn-quiet-bd-a); }
body.shell-v3.v3:not(#_) .btn[data-btn-role="admin"] { --btn-x-bg: var(--btn-admin-bg); --btn-x-fg: var(--btn-admin-fg); --btn-x-bd: var(--btn-admin-bd); --btn-x-bg-h: var(--btn-admin-bg-h); --btn-x-fg-h: var(--btn-admin-fg-h); --btn-x-bd-h: var(--btn-admin-bd-h); --btn-x-bg-a: var(--btn-admin-bg-a); --btn-x-bd-a: var(--btn-admin-bd-a); }
body.shell-v3.v3:not(#_) .btn:is([data-btn-role="danger"], [data-btn-role="danger-soft"]) { --btn-x-bg: var(--btn-danger-bg); --btn-x-fg: var(--btn-danger-fg); --btn-x-bd: var(--btn-danger-bd); --btn-x-bg-h: var(--btn-danger-bg-h); --btn-x-fg-h: var(--btn-danger-fg-h); --btn-x-bd-h: var(--btn-danger-bd-h); --btn-x-bg-a: var(--btn-danger-bg-a); --btn-x-bd-a: var(--btn-danger-bd-a); }
body.shell-v3.v3:not(#_) .btn:is([data-btn-role="success"], [data-btn-role="success-soft"], [data-btn-role="submit"]) { --btn-x-bg: var(--btn-success-bg); --btn-x-fg: var(--btn-success-fg); --btn-x-bd: var(--btn-success-bd); --btn-x-bg-h: var(--btn-success-bg-h); --btn-x-fg-h: var(--btn-success-fg-h); --btn-x-bd-h: var(--btn-success-bd-h); --btn-x-bg-a: var(--btn-success-bg-a); --btn-x-bd-a: var(--btn-success-bd-a); }
body.shell-v3.v3:not(#_) .btn[data-btn-role="warning"] { --btn-x-bg: var(--btn-warning-bg); --btn-x-fg: var(--btn-warning-fg); --btn-x-bd: var(--btn-warning-bd); --btn-x-bg-h: var(--btn-warning-bg-h); --btn-x-fg-h: var(--btn-warning-fg-h); --btn-x-bd-h: var(--btn-warning-bd-h); --btn-x-bg-a: var(--btn-warning-bg-a); --btn-x-bd-a: var(--btn-warning-bd-a); }
body.shell-v3.v3:not(#_) .btn[data-btn-role="sync"] { --btn-x-bg: var(--btn-glass-bg); --btn-x-fg: var(--btn-glass-fg); --btn-x-bd: var(--btn-glass-bd); --btn-x-bg-h: var(--btn-glass-bg-h); --btn-x-fg-h: var(--btn-glass-fg-h); --btn-x-bd-h: var(--btn-glass-bd-h); --btn-x-bg-a: var(--btn-glass-bg-a); --btn-x-bd-a: var(--btn-glass-bd-a); }

/* v3's own hints, after data-btn-role's at the same weight, so they win on a button carrying both */
body.shell-v3.v3:not(#_) .btn[data-v3-role="glass"] { --btn-x-bg: var(--btn-glass-bg); --btn-x-fg: var(--btn-glass-fg); --btn-x-bd: var(--btn-glass-bd); --btn-x-bg-h: var(--btn-glass-bg-h); --btn-x-fg-h: var(--btn-glass-fg-h); --btn-x-bd-h: var(--btn-glass-bd-h); --btn-x-bg-a: var(--btn-glass-bg-a); --btn-x-bd-a: var(--btn-glass-bd-a); }
body.shell-v3.v3:not(#_) .btn[data-v3-role="green"] { --btn-x-bg: var(--btn-success-bg); --btn-x-fg: var(--btn-success-fg); --btn-x-bd: var(--btn-success-bd); --btn-x-bg-h: var(--btn-success-bg-h); --btn-x-fg-h: var(--btn-success-fg-h); --btn-x-bd-h: var(--btn-success-bd-h); --btn-x-bg-a: var(--btn-success-bg-a); --btn-x-bd-a: var(--btn-success-bd-a); }
body.shell-v3.v3:not(#_) .btn[data-v3-role="amber"] { --btn-x-bg: var(--btn-warning-bg); --btn-x-fg: var(--btn-warning-fg); --btn-x-bd: var(--btn-warning-bd); --btn-x-bg-h: var(--btn-warning-bg-h); --btn-x-fg-h: var(--btn-warning-fg-h); --btn-x-bd-h: var(--btn-warning-bd-h); --btn-x-bg-a: var(--btn-warning-bg-a); --btn-x-bd-a: var(--btn-warning-bd-a); }
body.shell-v3.v3:not(#_) .btn[data-v3-role="red"] { --btn-x-bg: var(--btn-danger-bg); --btn-x-fg: var(--btn-danger-fg); --btn-x-bd: var(--btn-danger-bd); --btn-x-bg-h: var(--btn-danger-bg-h); --btn-x-fg-h: var(--btn-danger-fg-h); --btn-x-bd-h: var(--btn-danger-bd-h); --btn-x-bg-a: var(--btn-danger-bg-a); --btn-x-bd-a: var(--btn-danger-bd-a); }
body.shell-v3.v3:not(#_) .btn[data-v3-role="admin"] { --btn-x-bg: var(--btn-admin-bg); --btn-x-fg: var(--btn-admin-fg); --btn-x-bd: var(--btn-admin-bd); --btn-x-bg-h: var(--btn-admin-bg-h); --btn-x-fg-h: var(--btn-admin-fg-h); --btn-x-bd-h: var(--btn-admin-bd-h); --btn-x-bg-a: var(--btn-admin-bg-a); --btn-x-bd-a: var(--btn-admin-bd-a); }
body.shell-v3.v3:not(#_) .btn[data-v3-role="confirm"] { --btn-x-bg: var(--btn-confirm-bg); --btn-x-fg: var(--btn-confirm-fg); --btn-x-bd: var(--btn-confirm-bd); --btn-x-bg-h: var(--btn-confirm-bg-h); --btn-x-fg-h: var(--btn-confirm-fg-h); --btn-x-bd-h: var(--btn-confirm-bd-h); --btn-x-bg-a: var(--btn-confirm-bg-a); --btn-x-bd-a: var(--btn-confirm-bd-a); }

/* A Delete inside a window is the last click: solid red (the page's own Delete, which opened it, is the tint) */
body.shell-v3.v3:not(#_) .modal .btn:is(.btn-danger:not([data-btn-role], [data-v3-role]), [data-btn-role="danger"]:not([data-v3-role])) {
    --bs-btn-color: var(--btn-confirm-fg);         --bs-btn-bg: var(--btn-confirm-bg);         --bs-btn-border-color: var(--btn-confirm-bd);
    --bs-btn-hover-color: var(--btn-confirm-fg-h); --bs-btn-hover-bg: var(--btn-confirm-bg-h); --bs-btn-hover-border-color: var(--btn-confirm-bd-h);
    --bs-btn-active-color: var(--btn-confirm-fg-h); --bs-btn-active-bg: var(--btn-confirm-bg-a); --bs-btn-active-border-color: var(--btn-confirm-bd-a);
    --bs-btn-disabled-color: var(--btn-confirm-fg); --bs-btn-disabled-bg: var(--btn-confirm-bg); --bs-btn-disabled-border-color: var(--btn-confirm-bd);
}

/* Night's midnight rim (v3-night-base.css, !important, on every button without a role class) must not reach a hinted one */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn:is([data-btn-role], [data-v3-role]) { border-color: var(--bs-btn-border-color) !important; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn:is([data-btn-role], [data-v3-role]):is(:hover, :focus-visible) { border-color: var(--bs-btn-hover-border-color) !important; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn:is([data-btn-role], [data-v3-role]):active { border-color: var(--bs-btn-active-border-color) !important; }

/* The documents' file type on the icon, and the record actions' icon in the AL-MA blue, as in style B */
body.shell-v3.v3:not(#_) .btn[data-btn-role="doc"] :is(.bi-file-earmark-pdf, .bi-filetype-pdf) { color: var(--doc-pdf); }
body.shell-v3.v3:not(#_) .btn[data-btn-role="doc"] :is(.bi-file-earmark-excel, .bi-filetype-xlsx) { color: var(--doc-xls); }
body.shell-v3.v3:not(#_) .btn[data-btn-role="doc"] :is(.bi-filetype-xml, .bi-file-earmark-code) { color: var(--doc-xml); }
body.shell-v3.v3:not(#_) .btn:is([data-btn-role="aes"], [data-btn-role="job"], [data-btn-role="job-soft"]) > .bi,
body.shell-v3.v3:not(#_) .btn[data-btn-role="doc"] > :is(.bi-camera, .bi-cloud-arrow-up, .bi-cloud-arrow-up-fill) { color: var(--doc-action); }
body.shell-v3.v3:not(#_) .btn[data-btn-role="doc"] > .bi-receipt { color: var(--doc-invoice); }

/* Shape: 7px corners (the pager's page size keeps the strip's) */
body.shell-v3.v3:not(#_) .btn:not(.grid-pager-size .btn) {
    --bs-btn-border-radius: var(--v3-radius);
}

/* A disabled quiet button: its line and ink faded, not the whole button (opacity would show the glass through it twice) */
body.shell-v3.v3:not(#_) .btn:is(.btn-alma-filter, .btn-alma-light, .btn-alma-menu, .btn-secondary, .btn-light):disabled,
body.shell-v3.v3:not(#_) .btn:is(.btn-alma-filter, .btn-alma-light, .btn-alma-menu, .btn-secondary, .btn-light).disabled {
    opacity: 1;
    color: rgba(var(--v3-rgb), 0.45);
    background-color: rgba(var(--v3-rgb), 0.03);
    border-color: rgba(var(--v3-rgb), 0.15);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn:is(.btn-alma-filter, .btn-alma-light, .btn-alma-menu, .btn-secondary, .btn-light):is(:disabled, .disabled) {
    color: rgba(211, 217, 225, 0.38);
}

/* ---------- 6b. A page header's buttons: frosted keys ----------
   The quiet ones (Back to List, Print, PDF / Documents, Open / Create Job, Convert to AES, the archive, the phone Menu)
   are small pieces of frosted glass, lighter at the top, a white rim and a soft shadow (--v3-key*). Edit, Delete and Back
   to List are the same key with a coloured outline (§6c). Every other header button keeps its role (Copy and Sync now
   the blue outlined key, Submit green, Save solid). The blur sits on the button itself: it holds no menu (a dropdown's menu is its sibling). */
body.shell-v3.v3:not(#_) .page-header .btn:is(
    [data-btn-role="filter"], [data-btn-role="neutral"], [data-btn-role="cancel"], [data-btn-role="doc"], [data-btn-role="aes"], [data-btn-role="job"], [data-btn-role="job-soft"],
    :is(.btn-alma-filter, .btn-alma-light, .btn-alma-menu, .btn-secondary, .btn-light):not([data-btn-role], [data-v3-role])) {
    --bs-btn-bg: transparent;            --bs-btn-hover-bg: transparent;           --bs-btn-active-bg: rgba(var(--v3-rgb), 0.10);
    --bs-btn-border-color: var(--v3-key-rim); --bs-btn-hover-border-color: var(--v3-key-rim-h); --bs-btn-active-border-color: var(--v3-key-rim-h);
    --bs-btn-color: var(--v3-q-ink);     --bs-btn-hover-color: var(--v3-q-ink-h);  --bs-btn-active-color: var(--v3-q-ink-h);
    --bs-btn-disabled-bg: transparent;   --bs-btn-disabled-border-color: var(--v3-key-rim); --bs-btn-disabled-color: var(--v3-q-ink);
    background-image: var(--v3-key);
    box-shadow: var(--v3-key-shadow);
    -webkit-backdrop-filter: var(--v3-key-filter);
    backdrop-filter: var(--v3-key-filter);
}

    body.shell-v3.v3:not(#_) .page-header .btn:is(
        [data-btn-role="filter"], [data-btn-role="neutral"], [data-btn-role="cancel"], [data-btn-role="doc"], [data-btn-role="aes"], [data-btn-role="job"], [data-btn-role="job-soft"],
        :is(.btn-alma-filter, .btn-alma-light, .btn-alma-menu, .btn-secondary, .btn-light):not([data-btn-role], [data-v3-role])):is(:hover, :focus-visible, .show) {
        background-image: var(--v3-key-h);
    }

/* ---------- 6c. Outlined keys ----------
   The frosted key with a line of a colour round it (the user, 2026-10-22): in a page header Edit (the AL-MA blue pencil)
   with an AL-MA blue line and label, Delete (or a reversal: Withdraw, Credit note, Discard) a red one, Back to List a grey
   line with the quiet ink; and every blue-glass button, wherever it is (data-v3-role="glass" and the sync role: Copy,
   Docs, Track, Sync now…), as Edit. --v3-ol is the line's r, g, b, --v3-ol-ink the label; the line's strength
   --v3-key-ol (under the pointer --v3-key-ol-h). */
body.shell-v3.v3:not(#_) :is(.btn[data-v3-role="glass"], .btn[data-btn-role="sync"]:not([data-v3-role]), .page-header .btn.btn-alma:has(> .bi-pencil-square):not([data-btn-role], [data-v3-role])) {
    --v3-ol: 48, 79, 127;      --v3-ol-ink: #304f7f;        --v3-ol-ink-h: #172b45;
}

body.shell-v3.v3:not(#_) .page-header .btn:is(.btn-danger:not([data-btn-role], [data-v3-role]), [data-btn-role="danger"]:not([data-v3-role])) {
    --v3-ol: 220, 53, 69;      --v3-ol-ink: #b42318;        --v3-ol-ink-h: #912018;
}

body.shell-v3.v3:not(#_) .page-header .btn:is(.btn-secondary:not([data-btn-role], [data-v3-role]), [data-btn-role="cancel"]:not([data-v3-role])) {
    --v3-ol: 108, 117, 125;    --v3-ol-ink: var(--v3-q-ink); --v3-ol-ink-h: var(--v3-q-ink-h);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(.btn[data-v3-role="glass"], .btn[data-btn-role="sync"]:not([data-v3-role]), .page-header .btn.btn-alma:has(> .bi-pencil-square):not([data-btn-role], [data-v3-role])) {
    --v3-ol: 140, 180, 240;    --v3-ol-ink: #c6dbf7;        --v3-ol-ink-h: #fff;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .page-header .btn:is(.btn-danger:not([data-btn-role], [data-v3-role]), [data-btn-role="danger"]:not([data-v3-role])) {
    --v3-ol: 242, 161, 154;    --v3-ol-ink: #f2a19a;        --v3-ol-ink-h: #ffc2bd;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .page-header .btn:is(.btn-secondary:not([data-btn-role], [data-v3-role]), [data-btn-role="cancel"]:not([data-v3-role])) {
    --v3-ol: 160, 172, 190;
}

body.shell-v3.v3:not(#_) :is(.btn[data-v3-role="glass"], .btn[data-btn-role="sync"]:not([data-v3-role]),
    .page-header .btn:is(.btn-alma:has(> .bi-pencil-square):not([data-btn-role], [data-v3-role]),
        .btn-danger:not([data-btn-role], [data-v3-role]), [data-btn-role="danger"]:not([data-v3-role]),
        .btn-secondary:not([data-btn-role], [data-v3-role]), [data-btn-role="cancel"]:not([data-v3-role]))) {
    --bs-btn-bg: transparent;            --bs-btn-hover-bg: transparent;           --bs-btn-active-bg: rgba(var(--v3-ol), 0.12);
    --bs-btn-border-color: rgba(var(--v3-ol), var(--v3-key-ol)); --bs-btn-hover-border-color: rgba(var(--v3-ol), var(--v3-key-ol-h)); --bs-btn-active-border-color: rgba(var(--v3-ol), var(--v3-key-ol-h));
    --bs-btn-color: var(--v3-ol-ink);    --bs-btn-hover-color: var(--v3-ol-ink-h); --bs-btn-active-color: var(--v3-ol-ink-h);
    --bs-btn-disabled-bg: transparent;   --bs-btn-disabled-border-color: rgba(var(--v3-ol), 0.30); --bs-btn-disabled-color: var(--v3-ol-ink);
    background-image: var(--v3-key);
    box-shadow: var(--v3-key-shadow);
    -webkit-backdrop-filter: var(--v3-key-filter);
    backdrop-filter: var(--v3-key-filter);
}

    body.shell-v3.v3:not(#_) :is(.btn[data-v3-role="glass"], .btn[data-btn-role="sync"]:not([data-v3-role]),
        .page-header .btn:is(.btn-alma:has(> .bi-pencil-square):not([data-btn-role], [data-v3-role]),
            .btn-danger:not([data-btn-role], [data-v3-role]), [data-btn-role="danger"]:not([data-v3-role]),
            .btn-secondary:not([data-btn-role], [data-v3-role]), [data-btn-role="cancel"]:not([data-v3-role]))):is(:hover, :focus-visible, .show) {
        background-image: var(--v3-key-h);
    }

/* The quick view's footer (_QuickViewActions) as a Details page's header (the user, 2026-10-23): its quiet pills (Print,
   Create / Open Job, an area's links, Orders / Invoices) frosted keys (§6b), Edit the key with the AL-MA blue line and
   Delete the red one (§6c); Full details and 1804's Convert to AES stay the solid AL-MA blue, the window's way on. They
   keep modal-modern's pill shape (the user, 2026-10-23: v3's 7px corners read too square here). A key's 1px rim takes
   1px of its padding, so the footer keeps its height. */
body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn:is(.is-quiet, .is-danger) {
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid var(--v3-key-rim);
    background: transparent var(--v3-key);
    box-shadow: var(--v3-key-shadow);
    -webkit-backdrop-filter: var(--v3-key-filter);
    backdrop-filter: var(--v3-key-filter);
    color: var(--v3-q-ink);
    transition: color 0.15s ease, border-color 0.15s ease, background-image 0.15s ease;
}

    body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn:is(.is-quiet, .is-danger):is(:hover, :focus-visible) {
        border-color: var(--v3-key-rim-h);
        background: transparent var(--v3-key-h);
        color: var(--v3-q-ink-h);
    }

    body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn:is(.is-quiet, .is-danger):active {
        background-color: rgba(var(--v3-rgb), 0.10);
    }

/* Edit and Delete: the outlined keys */
body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn.is-quiet:has(> .bi-pencil-square) {
    --v3-ol: 48, 79, 127;      --v3-ol-ink: #304f7f;        --v3-ol-ink-h: #172b45;
}

body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn.is-danger {
    --v3-ol: 220, 53, 69;      --v3-ol-ink: #b42318;        --v3-ol-ink-h: #912018;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn.is-quiet:has(> .bi-pencil-square) {
    --v3-ol: 140, 180, 240;    --v3-ol-ink: #c6dbf7;        --v3-ol-ink-h: #fff;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn.is-danger {
    --v3-ol: 242, 161, 154;    --v3-ol-ink: #f2a19a;        --v3-ol-ink-h: #ffc2bd;
}

body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn:is(.is-danger, .is-quiet:has(> .bi-pencil-square)) {
    border-color: rgba(var(--v3-ol), var(--v3-key-ol));
    color: var(--v3-ol-ink);
}

    body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn:is(.is-danger, .is-quiet:has(> .bi-pencil-square)):is(:hover, :focus-visible) {
        border-color: rgba(var(--v3-ol), var(--v3-key-ol-h));
        color: var(--v3-ol-ink-h);
    }

    body.shell-v3.v3:not(#_) #quickViewModal .modal-footer .mm-btn:is(.is-danger, .is-quiet:has(> .bi-pencil-square)):active {
        background-color: rgba(var(--v3-ol), 0.12);
    }

/* ---------- 6d. Badges ----------
   By day and at sunset a state badge (Bootstrap's bg-* / text-bg-*, 1804's invoice counts) is a piece of tinted glass,
   not paint (the user, 2026-10-23: the solid fills looked flat): a frosted white ground with the colour over it, lighter
   at the top, a line of the colour, a white highlight on its top edge and the colour's dark shade as its text, as the
   tinted buttons (§6). --v3-bdg is the colour's r, g, b, --v3-bdg-ink the text. Night keeps v3-night.css's tints (light
   text on a faint fill), which already read as glass on the dark surfaces. The pager's counts (§4) are left alone. */
body.shell-v3.v3:not(#_) {
    --v3-bdg-ground: rgba(255, 255, 255, 0.55);
    --v3-bdg-hi: rgba(255, 255, 255, 0.75);
}

html[data-v3-scene="sunset"] body.shell-v3.v3:not(#_) {
    --v3-bdg-ground: rgba(255, 250, 244, 0.55);
}

body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(.bg-success, .text-bg-success)                 { --v3-bdg: 25, 135, 84;  --v3-bdg-ink: #146c43; }
body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(.bg-warning, .text-bg-warning)                 { --v3-bdg: 214, 160, 0;  --v3-bdg-ink: #7a5300; }
body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(.bg-danger, .text-bg-danger)                   { --v3-bdg: 220, 53, 69;  --v3-bdg-ink: #b42318; }
body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(.bg-info, .text-bg-info)                       { --v3-bdg: 14, 140, 170; --v3-bdg-ink: #0b6378; }
body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(.bg-primary, .text-bg-primary)                 { --v3-bdg: 48, 79, 127;  --v3-bdg-ink: #304f7f; }
body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(.bg-secondary, .text-bg-secondary, .badge-dark) { --v3-bdg: 71, 84, 103;  --v3-bdg-ink: #475467; }
body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(.bg-dark, .text-bg-dark)                       { --v3-bdg: 31, 41, 55;   --v3-bdg-ink: #1f2937; }
/* A badge with no colour of its own (site.css's AL-MA blue) is the blue's */
body.shell-v3.v3:not(#_) .badge:not([class*="bg-"], .badge-dark, .badge-transparent, .badge-static) { --v3-bdg: 48, 79, 127; --v3-bdg-ink: #304f7f; }

html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(
    .bg-success, .text-bg-success, .bg-warning, .text-bg-warning, .bg-danger, .text-bg-danger, .bg-info, .text-bg-info,
    .bg-primary, .text-bg-primary, .bg-secondary, .text-bg-secondary, .badge-dark, .bg-dark, .text-bg-dark,
    .badge:not([class*="bg-"], .badge-dark, .badge-transparent, .badge-static)):not(.grid-pager .badge) {
    background-color: var(--v3-bdg-ground) !important;
    background-image: linear-gradient(180deg, rgba(var(--v3-bdg), 0.17), rgba(var(--v3-bdg), 0.09));
    border: 1px solid rgba(var(--v3-bdg), 0.30);
    box-shadow: inset 0 1px 0 var(--v3-bdg-hi), 0 1px 1.5px rgba(var(--v3-bdg), 0.10);
    color: var(--v3-bdg-ink) !important;
    font-weight: 600;
}

/* A neutral badge (bg-light: the Imports family, the exchange rates, a count's pill; the pollers' bg-outline-secondary,
   which no sheet defines): the plain frosted glass, the quiet buttons' line and ink */
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) :is(.badge, .invoice-badge):is(.bg-light, .text-bg-light, .bg-outline-secondary):not(.grid-pager .badge) {
    background-color: var(--v3-bdg-ground) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
    border: 1px solid var(--v3-q-bd);
    box-shadow: inset 0 1px 0 var(--v3-bdg-hi), 0 1px 1.5px rgba(var(--v3-rgb), 0.08);
    color: var(--v3-q-ink) !important;
    font-weight: 600;
}

/* An Index's filter badge beside its title ("In Stock & Pending"): the same tinted glass, keeping its pill shape and size
   (components.css). Blue by default, .is-warning / .is-success / .is-info take the matching badge's colour. Night keeps
   v3-night.css's tints. */
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .page-header-badge {
    --v3-bdg: 48, 79, 127;  --v3-bdg-ink: #304f7f;
    background-color: var(--v3-bdg-ground);
    background-image: linear-gradient(180deg, rgba(var(--v3-bdg), 0.17), rgba(var(--v3-bdg), 0.09));
    border: 1px solid rgba(var(--v3-bdg), 0.30);
    box-shadow: inset 0 1px 0 var(--v3-bdg-hi), 0 1px 1.5px rgba(var(--v3-bdg), 0.10);
    color: var(--v3-bdg-ink);
    font-weight: 600;
}

html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .page-header-badge.is-warning { --v3-bdg: 214, 160, 0;  --v3-bdg-ink: #7a5300; }
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .page-header-badge.is-success { --v3-bdg: 25, 135, 84;  --v3-bdg-ink: #146c43; }
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .page-header-badge.is-info    { --v3-bdg: 14, 140, 170; --v3-bdg-ink: #0b6378; }

/* The submissions' poll dots (AES and 507 rows, pollWorkerStatus.js colours them with .text-*): a bead of the badges'
   tinted glass instead of a flat disc, in the colour of the state's badge (warning = polling, danger = needs attention,
   info = ready, success = done, muted = not polled yet). The icon's glyph is hidden; the dot is its own round box. */
body.shell-v3.v3:not(#_) :is([id^="pollRow_"], [id^="cc507PollRow_"]).bi-circle-fill {
    --v3-bdg: 71, 84, 103;
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    vertical-align: -0.1rem;
    font-size: 0 !important;
    border-radius: 50%;
    background-color: var(--v3-bdg-ground);
    background-image:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(var(--v3-bdg), 0.62), rgba(var(--v3-bdg), 0.34));
    border: 1px solid rgba(var(--v3-bdg), 0.55);
    box-shadow: inset 0 1px 0 var(--v3-bdg-hi), 0 1px 2px rgba(var(--v3-bdg), 0.28);
}

    body.shell-v3.v3:not(#_) :is([id^="pollRow_"], [id^="cc507PollRow_"]).bi-circle-fill::before {
        display: none;
    }

body.shell-v3.v3:not(#_) :is([id^="pollRow_"], [id^="cc507PollRow_"]).bi-circle-fill.text-success { --v3-bdg: 25, 135, 84; }
body.shell-v3.v3:not(#_) :is([id^="pollRow_"], [id^="cc507PollRow_"]).bi-circle-fill.text-warning { --v3-bdg: 214, 160, 0; }
body.shell-v3.v3:not(#_) :is([id^="pollRow_"], [id^="cc507PollRow_"]).bi-circle-fill.text-danger  { --v3-bdg: 220, 53, 69; }
body.shell-v3.v3:not(#_) :is([id^="pollRow_"], [id^="cc507PollRow_"]).bi-circle-fill.text-info    { --v3-bdg: 14, 140, 170; }

/* ---------- 6e. A badge that opens something (Exports' Orders / Packages) and its static twin ----------
   The button is the blue outlined key (§6c) at a badge's size, with the list's icon before its count: Orders' box,
   Packages' boxes. The static count (packages typed in, no list behind them) is information, not a button: no key, no
   line, a faint tint of the scene and the rows' text, the same icon dimmed, so the eye goes to what can be clicked (it
   was the other way round: a grey box by day, a navy fill at night, both louder than the buttons). */
/* Raised by its shadow and top highlight, not by a line (the user, 2026-10-23: the .60 line made a busy grid busier);
   the line is a faint hairline that only firms up under the pointer */
body.shell-v3.v3:not(#_) {
    --v3-bb: 48, 79, 127;  --v3-bb-ink: #304f7f;  --v3-bb-ink-h: #172b45;
    --v3-bb-line: 0.16;    --v3-bb-line-h: 0.38;  --v3-bb-tint: 0.05;  --v3-bb-tint-h: 0.10;
    --v3-bb-shadow: 0 1px 2px rgba(48, 79, 127, 0.20), 0 2px 5px rgba(48, 79, 127, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --v3-bb-shadow-h: 0 2px 4px rgba(48, 79, 127, 0.22), 0 3px 8px rgba(48, 79, 127, 0.10), inset 0 1px 0 #fff;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) {
    --v3-bb: 140, 180, 240; --v3-bb-ink: #c6dbf7; --v3-bb-ink-h: #fff;
    --v3-bb-line: 0.14;     --v3-bb-line-h: 0.34; --v3-bb-tint: 0.08; --v3-bb-tint-h: 0.16;
    --v3-bb-shadow: 0 1px 2px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --v3-bb-shadow-h: 0 2px 4px rgba(0, 0, 0, 0.55), 0 3px 9px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.shell-v3.v3:not(#_) .badge.badge-transparent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid rgba(var(--v3-bb), var(--v3-bb-line));
    border-radius: 6px;
    background-color: rgba(var(--v3-bb), var(--v3-bb-tint));
    background-image: var(--v3-key);
    box-shadow: var(--v3-bb-shadow);
    color: var(--v3-bb-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

    body.shell-v3.v3:not(#_) .badge.badge-transparent.grid-badge-button {
        display: flex;
    }

    body.shell-v3.v3:not(#_) .badge.badge-transparent:is(:hover, :focus-visible) {
        border-color: rgba(var(--v3-bb), var(--v3-bb-line-h));
        background-color: rgba(var(--v3-bb), var(--v3-bb-tint-h));
        background-image: var(--v3-key-h);
        box-shadow: var(--v3-bb-shadow-h);
        color: var(--v3-bb-ink-h);
    }

    body.shell-v3.v3:not(#_) .badge.badge-transparent:focus-visible {
        outline: 2px solid rgba(var(--v3-bb), 0.45);
        outline-offset: 1px;
    }

    /* Pressed: the lift goes */
    body.shell-v3.v3:not(#_) .badge.badge-transparent:active {
        background-color: rgba(var(--v3-bb), calc(var(--v3-bb-tint-h) * 2));
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
    }

/* Night's midnight rim (v3-night-base.css, !important on every badge) must not reach the key's blue line */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .badge.badge-transparent {
    border-color: rgba(var(--v3-bb), var(--v3-bb-line)) !important;
}

    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .badge.badge-transparent:is(:hover, :focus-visible) {
        border-color: rgba(var(--v3-bb), var(--v3-bb-line-h)) !important;
    }

body.shell-v3.v3:not(#_) .badge.badge-static,
body.shell-v3.v3:not(#_) .badge.badge-static:hover {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid transparent !important;
    border-radius: 6px;
    background-color: rgba(var(--v3-rgb), 0.06);
    color: var(--v3-text);
    font-weight: 500;
    letter-spacing: 0.02em;
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(.badge.badge-static, .badge.badge-static:hover) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* An order's counts (the quick view and Details): "Orders: 72" beside the client or the vessel opens the Orders grid
   filtered by it, so it is §6e's blue key at the count's size, raised by its shadow and top highlight, a hairline that
   firms up under the pointer; the Stock List's "Total Orders: 4" is information, the static twin (a faint tint of the
   scene, the rows' text). They were modal-modern's flat grey (the user, 2026-10-23). */
body.shell-v3.v3:not(#_) a.mm-count {
    border: 1px solid rgba(var(--v3-bb), var(--v3-bb-line));
    border-radius: 6px;
    background-color: rgba(var(--v3-bb), var(--v3-bb-tint));
    background-image: var(--v3-key);
    box-shadow: var(--v3-bb-shadow);
    color: var(--v3-bb-ink);
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

    body.shell-v3.v3:not(#_) a.mm-count:is(:hover, :focus-visible) {
        border-color: rgba(var(--v3-bb), var(--v3-bb-line-h));
        background-color: rgba(var(--v3-bb), var(--v3-bb-tint-h));
        background-image: var(--v3-key-h);
        box-shadow: var(--v3-bb-shadow-h);
        color: var(--v3-bb-ink-h);
    }

    body.shell-v3.v3:not(#_) a.mm-count:focus-visible {
        outline: 2px solid rgba(var(--v3-bb), 0.45);
        outline-offset: 1px;
    }

    body.shell-v3.v3:not(#_) a.mm-count:active {
        background-color: rgba(var(--v3-bb), calc(var(--v3-bb-tint-h) * 2));
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
    }

body.shell-v3.v3:not(#_) span.mm-count {
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: rgba(var(--v3-rgb), 0.06);
    color: var(--v3-row-text);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) span.mm-count {
    background-color: rgba(255, 255, 255, 0.05);
}

/* The list's icon before the count */
body.shell-v3.v3:not(#_) :is(.badge.badge-transparent, .badge.badge-static)::before {
    font-family: bootstrap-icons !important;
    font-weight: normal;
    font-size: 1.1em;
    line-height: 1;
    content: "\f685";
}

body.shell-v3.v3:not(#_) .badge.badge-transparent[data-export-list="orders"]::before {
    content: "\f1c7";
}

body.shell-v3.v3:not(#_) .badge.badge-static::before {
    opacity: 0.6;
}

/* ---------- 6f. The AES Exports grid's 507 button (Views/AesExportSubmissions/_SubmissionRow / _SubmissionCard) ----------
   One colour per state (the user, 2026-10-23, option A of docs/mockups/v3_507_MOCKUP.html), named by data-cc507-state: by day and
   at sunset a piece of tinted glass as the badges (§6d's recipe), at night the night's tints (light text on a faint
   fill). The two that can't be sent grey and faded (Blocked struck through, as before); Ready, the one that sends, the
   solid AL-MA blue; Submitted slate; CC521 Rejected red (it shared CC561's amber); CC926 Registered teal; CC561 Under
   control amber; CC525 Released green. The btn-* class stays for the other looks; the button's own rules (v3's roles,
   the disabled look, night's !important rim) are outweighed here, hence !important. */
body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state] {
    --c507: 107, 118, 134; --c507-ink: #6b7686;
    font-weight: 600;
}

body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="submitted"]  { --c507: 71, 84, 103;  --c507-ink: #475467; }
body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="rejected"]   { --c507: 220, 53, 69;  --c507-ink: #b42318; }
body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="registered"] { --c507: 14, 140, 170; --c507-ink: #0b6378; }
body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="control"]    { --c507: 214, 160, 0;  --c507-ink: #7a5300; }
body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="released"]   { --c507: 25, 135, 84;  --c507-ink: #146c43; }

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state]                     { --c507: 160, 172, 190; --c507-ink: #8f99a6; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="submitted"]  { --c507: 201, 209, 220; --c507-ink: #c9d1dc; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="rejected"]   { --c507: 255, 139, 130; --c507-ink: #ff8b82; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="registered"] { --c507: 99, 199, 230;  --c507-ink: #7fd3ec; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="control"]    { --c507: 186, 150, 69;  --c507-ink: #d4b062; }
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="released"]   { --c507: 67, 178, 126;  --c507-ink: #5cc795; }

/* By day and at sunset: the tinted glass */
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state]:not([data-cc507-state="ready"]) {
    border: 1px solid rgba(var(--c507), 0.30) !important;
    background-color: var(--v3-bdg-ground) !important;
    background-image: linear-gradient(180deg, rgba(var(--c507), 0.17), rgba(var(--c507), 0.09)) !important;
    box-shadow: inset 0 1px 0 var(--v3-bdg-hi), 0 1px 1.5px rgba(var(--c507), 0.10) !important;
    color: var(--c507-ink) !important;
}

    html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state]:not([data-cc507-state="ready"], :disabled):is(:hover, :focus-visible) {
        border-color: rgba(var(--c507), 0.55) !important;
        box-shadow: inset 0 1px 0 var(--v3-bdg-hi), 0 1px 3px rgba(var(--c507), 0.25) !important;
    }

/* At night: the tints */
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state]:not([data-cc507-state="ready"]) {
    border: 1px solid transparent !important;
    background: rgba(var(--c507), 0.17) !important;
    box-shadow: none !important;
    color: var(--c507-ink) !important;
}

    html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state]:not([data-cc507-state="ready"], :disabled):is(:hover, :focus-visible) {
        background: rgba(var(--c507), 0.28) !important;
    }

/* Ready: the send, solid AL-MA blue in every scene */
body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="ready"] {
    border: 1px solid var(--btn-primary-bg) !important;
    background: var(--btn-primary-bg) !important;
    box-shadow: 0 1px 2px rgba(23, 43, 69, 0.25) !important;
    color: var(--btn-primary-fg) !important;
}

    body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="ready"]:is(:hover, :focus-visible) {
        border-color: var(--btn-primary-bg-h) !important;
        background: var(--btn-primary-bg-h) !important;
    }

/* The two that can't be sent, faded; Blocked's strike in its own ink (site.css draws it grey) */
body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state]:disabled {
    opacity: 0.6 !important;
}

body.shell-v3.v3:not(#_) .btn.cc507-btn[data-cc507-state="blocked"]::after {
    background-color: currentColor;
    opacity: 0.7;
}

/* ---------- 7. Modals ----------
   Glass (Admin → Interface → Modals (v3) → Windows: Glass): the modern modals take the sign-in window's glass, with no
   line across the top and no footer band. */
body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern {
    --mm-ink: var(--ink);
    --mm-blue: var(--ink-accent);
    --mm-muted: var(--ink-muted);
    --mm-line: rgba(var(--v3-rgb), 0.14);
}

    body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .modal-content {
        border: 1px solid var(--glass-modal-rim);
        border-radius: 16px;
        background: var(--glass-modal);
        box-shadow: var(--glass-modal-shadow);
        -webkit-backdrop-filter: var(--glass-modal-filter);
        backdrop-filter: var(--glass-modal-filter);
        color: var(--ink);
    }

        body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .modal-content::before {
            display: none;
        }

    body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .modal-footer {
        background: transparent;
    }

    body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .modal-title:not(.text-danger) {
        color: var(--ink);
    }

    body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .mm-facts {
        background: rgba(var(--v3-rgb), 0.06);
        box-shadow: none;
    }

    body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .mm-fact dt {
        color: var(--ink-muted);
    }

    body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .mm-fact dd {
        color: var(--ink);
    }

    body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .mm-close {
        color: var(--ink-muted);
    }

    /* A search window's sticky column labels (the 1804 Bulk update, Invoice Search…): frosted glass with the facts' faint
       tint in every scene, not modal-modern.css's white by day or the night's blue band. The rows blur as they pass under. */
    body.shell-v3.v3.v3-modal-glass:not(#_) .modal-modern .mm-results-scroll thead th {
        background: rgba(var(--v3-rgb), 0.06);
        color: var(--mm-muted);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

/* Behind them, Blur and dim: the sign-in window's own backdrop (landing.css), lighter than modal-modern.css's */
body.shell-v3.v3.v3-modal-blur.mm-backdrop:not(#_) > .modal-backdrop {
    background-color: rgba(15, 28, 46, 0.22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Dim only (faster): no blur anywhere, behind the dialog or in its own glass; a deeper dim and a nearly solid dialog */
body.shell-v3.v3.v3-modal-dim.mm-backdrop:not(#_) > .modal-backdrop {
    background-color: rgba(15, 28, 46, 0.42);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html[data-v3-scene="night"] body.shell-v3.v3.v3-modal-dim.mm-backdrop:not(#_) > .modal-backdrop {
    background-color: rgba(3, 7, 14, 0.55);
}

body.shell-v3.v3.v3-modal-glass.v3-modal-dim:not(#_) .modal-modern .modal-content {
    background: var(--v3-modal-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

    /* The labels then on the dialog's own solid (fixed, so the gradient runs on across the cells) under the same tint */
    body.shell-v3.v3.v3-modal-glass.v3-modal-dim:not(#_) .modal-modern .mm-results-scroll thead th {
        background: linear-gradient(rgba(var(--v3-rgb), 0.06), rgba(var(--v3-rgb), 0.06)), var(--v3-modal-solid) fixed;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

/* ---------- 8. Vessel Orders Overview (Views/Orders/VesselOrdersOverview.cshtml) and the Packing Visualizer's list ----------
   The totals and the vessel tiles are pieces of the grid card's glass (§4b's way: its tint and rim, the scene's soft
   shadow, no backdrop-filter, as there can be a hundred tiles over the flat veil), their inks the scene's. The cards
   themselves sit on the grid cards' edge (the view's .page-bleed), as the header does. The state colours stay. */
body.shell-v3.v3:not(#_) .vo-page {
    --alma-ink: var(--ink);
    --alma-muted: var(--ink-muted);
    --vo-card-line: rgba(var(--v3-rgb), 0.14);
}

body.shell-v3.v3:not(#_) :is(.vo-kpi, .vo-tile) {
    border-color: var(--glass-rim);
    border-radius: var(--v3-card-radius);
    background: var(--glass-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--v3-tile-shadow);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) :is(.vo-kpi, .vo-tile) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--v3-tile-shadow);
}

/* The totals' top edge keeps its colour: the state's, the scene's accent for the rest */
body.shell-v3.v3:not(#_) .vo-kpi                { border-top-color: var(--ink-accent); }
body.shell-v3.v3:not(#_) .vo-kpi.is-stock       { border-top-color: var(--vo-stock); }
body.shell-v3.v3:not(#_) .vo-kpi.is-progress    { border-top-color: var(--vo-progress); }
body.shell-v3.v3:not(#_) .vo-kpi.is-pending     { border-top-color: var(--vo-pending); }

body.shell-v3.v3:not(#_) .vo-tile:hover {
    border-color: rgba(var(--v3-rgb), 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px -8px rgba(var(--v3-rgb), 0.38);
}

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .vo-tile:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px -8px rgba(0, 0, 0, 0.7);
}

/* The pile's ground: a faint tint of the scene by day and at sunset (night keeps v3-night-base.css's deep navy, which the
   pile's blues are drawn for) */
html:not([data-v3-scene="night"]) body.shell-v3.v3:not(#_) :is(.vo-stage, .vo-window-stage) {
    background: rgba(var(--v3-rgb), 0.05);
    box-shadow: inset 0 0 0 1px rgba(var(--v3-rgb), 0.10);
}

body.shell-v3.v3:not(#_) .vo-stage-chip {
    background: var(--glass-field);
}

body.shell-v3.v3:not(#_) .vo-bar {
    background: rgba(var(--v3-rgb), 0.12);
}

/* The state filter as the company switch (§4): the glass field, the quiet ink, the hover shade; the chosen one the solid
   AL-MA blue, at night the search buttons' slate */
body.shell-v3.v3:not(#_) .vo-segment {
    --vo-segment-radius: var(--v3-radius);
    border-color: var(--v3-field-rim);
    background: var(--glass-field);
}

    body.shell-v3.v3:not(#_) .vo-segment > button {
        color: var(--v3-q-ink);
    }

        body.shell-v3.v3:not(#_) .vo-segment > button:not(.is-active):hover {
            background: var(--v3-q-bg-h);
            color: var(--v3-q-ink-h);
        }

        body.shell-v3.v3:not(#_) .vo-segment > button.is-active {
            background: var(--alma-blue);
            color: #fff;
        }

html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .vo-segment > button.is-active {
    background: var(--v3-search-btn-h);
}

/* The toolbar's search, client and sort sit on the veil, outside §5b's containers, so they kept Bootstrap's white (out of
   place at sunset, the user, 2026-10-29): the glass field the state filter beside them already wears. A list can't be
   see-through, so the selects' open lists take the page size's solid menu colour. */
body.shell-v3.v3:not(#_) .vo-toolbar :is(.form-control, .form-select) {
    border-radius: var(--v3-radius);
    background-color: var(--glass-field);
    border-color: var(--v3-field-rim);
    color: var(--glass-field-ink);
}

    body.shell-v3.v3:not(#_) .vo-toolbar .form-control::placeholder {
        color: var(--ink-muted);
    }

    body.shell-v3.v3:not(#_) .vo-toolbar .form-select :is(option, optgroup) {
        background-color: var(--v3-pager-menu);
        color: var(--glass-field-ink);
    }

/* The Packing Visualizer's list of pieces: the hover and the clicked box's row in the quiet buttons' shade (the
   scene's colour at .10: slate at night), the text the window's own ink, so it reads in every scene (the clicked row was
   a solid #e7f1ff under the night's white text, 2026-10-26) */
body.shell-v3.v3:not(#_) .pv-labels {
    border-right-color: rgba(var(--v3-rgb), 0.20);
}

body.shell-v3.v3:not(#_) .pv-label:hover {
    background: rgba(var(--v3-rgb), 0.07);
}

body.shell-v3.v3:not(#_) .pv-label.is-active {
    background: rgba(var(--v3-rgb), 0.16);
    color: var(--ink);
}