/*--------------------------------------------------------------
# Button style B (Admin → Interface → "Button style"; style A, the default, is tokens.css / components.css §3 /
# v2-night.css / v2-night2.css as they are).
#
# Style B of v2_BUTTONS_STYLE_MOCKUP.html, the user's picks (2026-10-14): Save / Add New / Edit and Delete solid, every
# other role a soft tint of its colour with the colour as text; at night every role a dark tint except the AL-MA blue.
# Convert to AES and Open / Create Job wear the Documents slate with an AL-MA blue icon (2026-10-15; Open Job was a solid
# plum). No role wears a rim. 8px corners, a 500 label. The same in both night themes.
#
# _Layout loads this file last (after v2-night2.css) and puts .btn-style-b on the body, both only when the setting is B,
# so every rule here sits under body.btn-style-b and style A never reads it. A further style is one more file like
# this one (buttons-c.css, body.btn-style-c) and one more entry in UiShellService.ButtonStyles.
#
# How it works:
#   1. Tokens: B's values for the role tokens components.css §3 already reads (--btn-{role}-*, --pill-*), and the tokens
#      of the roles only B has (doc, submit, aes, job, job-soft, sync).
#   2. Roles by hint: a button whose role in B differs from its class (style A keeps the class it always had) carries
#      data-btn-role="…" in its markup; §2 maps it to that role's tokens. Values: primary, filter, neutral, cancel,
#      admin, danger, danger-soft, success, success-soft, warning, doc, submit, aes, job, job-soft, sync.
#   3. Shape: 8px corners and a 500 label on every role class and every hinted button.
#   4. The Convert to AES pills take the Convert to AES teal.
#   5. Menu (btn-alma-menu): no tokens of its own in B, so the menu tier's light blue.
#   6. With the debossed grid look, the grid toolbars' buttons embossed: the mockup's option E (trial).
# V2_STYLE_REFERENCE.md §4b is the table; change a value here, there and in the mockup together.
--------------------------------------------------------------*/

/* ---------- 1. Tokens: day and sunset (and the classic interface) ---------- */
body.btn-style-b {
    --btn-radius: 8px;
    --btn-weight: 500;          /* Open Sans 500 is loaded by the layouts for it */
    /* Add New, Save, Edit, Apply: the AL-MA blue, solid */
    --btn-primary-bg: #304f7f;  --btn-primary-fg: #fff;    --btn-primary-bd: #304f7f;   --btn-primary-bg-h: #3e6db5; --btn-primary-bd-h: #3e6db5; --btn-primary-bg-a: #29446d; --btn-primary-bd-a: #29446d;
    /* Filters and the column picker: white with a light grey rim and dark text */
    --btn-filter-bg: #fff;      --btn-filter-fg: #172b45;  --btn-filter-bd: #d3dae3;    --btn-filter-bg-h: #f3f5f8;  --btn-filter-bd-h: #c2ccd8; --btn-filter-bg-a: #e6eaf0; --btn-filter-bd-a: #c2ccd8;
    /* The menu tier (Menu, switches, utilities, cross-links, Reset / Clear, counts, a form's Add Line): a soft blue tint */
    --btn-neutral-bg: #e8eef7;  --btn-neutral-fg: #304f7f; --btn-neutral-bd: #e8eef7;   --btn-neutral-bg-h: #d6e1f0; --btn-neutral-fg-h: #172b45; --btn-neutral-bd-h: #d6e1f0; --btn-neutral-bg-a: #c5d4ea; --btn-neutral-bd-a: #c5d4ea;
    /* Cancel and Back to List: one mid grey with dark text */
    --btn-cancel-bg: #aab2bd;   --btn-cancel-fg: #17202b;  --btn-cancel-bd: #aab2bd;    --btn-cancel-bg-h: #9ba4b0;  --btn-cancel-fg-h: #0d141c; --btn-cancel-bd-h: #9ba4b0; --btn-cancel-bg-a: #8d97a4; --btn-cancel-bd-a: #8d97a4;
    /* Admin-only actions: the pastel purple */
    --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;
    /* Delete, removers, reversals: solid red. Bulk / older-than deletes: a soft red */
    --btn-danger-bg: #dc3545;   --btn-danger-fg: #fff;     --btn-danger-bd: #dc3545;    --btn-danger-bg-h: #bb2d3b;  --btn-danger-bd-h: #bb2d3b;  --btn-danger-bg-a: #b02a37;  --btn-danger-bd-a: #b02a37;
    --btn-danger-soft-bg: #fdecec; --btn-danger-soft-fg: #b42318; --btn-danger-soft-bd: #fdecec; --btn-danger-soft-bg-h: #f9d7d5; --btn-danger-soft-fg-h: #912018; --btn-danger-soft-bd-h: #f9d7d5; --btn-danger-soft-bg-a: #f4c3c0; --btn-danger-soft-bd-a: #f4c3c0;
    /* Approve, Mark as Paid: solid green. Its soft green: Add Document, Mark as Read */
    --btn-success-bg: #198754;  --btn-success-fg: #fff;    --btn-success-bd: #198754;   --btn-success-bg-h: #157347; --btn-success-bd-h: #157347; --btn-success-bg-a: #146c43; --btn-success-bd-a: #146c43;
    --btn-success-soft-bg: #e7f4ec; --btn-success-soft-fg: #146c43; --btn-success-soft-bd: #e7f4ec; --btn-success-soft-bg-h: #d2ebdc; --btn-success-soft-fg-h: #0f5132; --btn-success-soft-bd-h: #d2ebdc; --btn-success-soft-bg-a: #bfe2cd; --btn-success-soft-bd-a: #bfe2cd;
    /* Omit Selected and Export, Clear older than: a soft amber */
    --btn-warning-bg: #fff1c7;  --btn-warning-fg: #6e4b00; --btn-warning-bd: #fff1c7;   --btn-warning-bg-h: #ffe7a3; --btn-warning-fg-h: #4d3500; --btn-warning-bd-h: #ffe7a3; --btn-warning-bg-a: #ffdc80; --btn-warning-bd-a: #ffdc80;
    /* Documents (Print, PDF, XML, Excel): a quiet slate; the file type is the icon's colour */
    --btn-doc-bg: #edf0f4;      --btn-doc-fg: #33415a;     --btn-doc-bd: #edf0f4;       --btn-doc-bg-h: #e0e5ec;     --btn-doc-fg-h: #172b45;   --btn-doc-bd-h: #e0e5ec;    --btn-doc-bg-a: #d2d9e3;    --btn-doc-bd-a: #d2d9e3;
    --doc-pdf: #c0392b;         --doc-xls: #1d7a46;        --doc-xml: #b26a00;
    --doc-invoice: #198754;     /* a job's Tax Invoices menu: the success green */
    /* Submissions to an authority (Submit AES, Submit CC507, Submit to myDATA): a soft teal */
    --btn-submit-bg: #ddf2f6;   --btn-submit-fg: #0b5f6e;  --btn-submit-bd: #ddf2f6;    --btn-submit-bg-h: #c8e9ef;  --btn-submit-fg-h: #08495a; --btn-submit-bd-h: #c8e9ef; --btn-submit-bg-a: #b2dfe8; --btn-submit-bd-a: #b2dfe8;
    /* Convert to AES, Open Job, Create Job: the Documents slate with an AL-MA blue icon, so a details header's record
       actions read as one quiet group (the user, 2026-10-15; they were a teal, a solid plum and a plum tint). Their own
       tokens, pointing at the slate, so they can part again. The night block sets only the slate and the icon colour. */
    --btn-aes-bg: var(--btn-doc-bg); --btn-aes-fg: var(--btn-doc-fg); --btn-aes-bd: var(--btn-doc-bd); --btn-aes-bg-h: var(--btn-doc-bg-h); --btn-aes-fg-h: var(--btn-doc-fg-h); --btn-aes-bd-h: var(--btn-doc-bd-h); --btn-aes-bg-a: var(--btn-doc-bg-a); --btn-aes-bd-a: var(--btn-doc-bd-a);
    --btn-job-bg: var(--btn-doc-bg); --btn-job-fg: var(--btn-doc-fg); --btn-job-bd: var(--btn-doc-bd); --btn-job-bg-h: var(--btn-doc-bg-h); --btn-job-fg-h: var(--btn-doc-fg-h); --btn-job-bd-h: var(--btn-doc-bd-h); --btn-job-bg-a: var(--btn-doc-bg-a); --btn-job-bd-a: var(--btn-doc-bd-a);
    --btn-job-soft-bg: var(--btn-doc-bg); --btn-job-soft-fg: var(--btn-doc-fg); --btn-job-soft-bd: var(--btn-doc-bd); --btn-job-soft-bg-h: var(--btn-doc-bg-h); --btn-job-soft-fg-h: var(--btn-doc-fg-h); --btn-job-soft-bd-h: var(--btn-doc-bd-h); --btn-job-soft-bg-a: var(--btn-doc-bg-a); --btn-job-soft-bd-a: var(--btn-doc-bd-a);
    --doc-action: #304f7f;      /* the record actions' icon: the AL-MA blue */
    /* Sync now: an indigo tint */
    --btn-sync-bg: #e8e9f8;     --btn-sync-fg: #3b3f91;    --btn-sync-bd: #e8e9f8;      --btn-sync-bg-h: #d9dbf3;    --btn-sync-fg-h: #2c2f75;  --btn-sync-bd-h: #d9dbf3;   --btn-sync-bg-a: #c9ccec;   --btn-sync-bd-a: #c9ccec;

    /* The modern modals' pills: the AL-MA blue, the Cancel grey for the quiet one, the Convert to AES teal */
    --pill-primary-bg: #304f7f; --pill-primary-fg: #fff;   --pill-primary-bg-h: #3e6db5;
    --pill-quiet-bg: #aab2bd;   --pill-quiet-fg: #17202b;  --pill-quiet-bg-h: #9ba4b0;  --pill-quiet-fg-h: #0d141c;
    --pill-danger-bg: #dc3545;  --pill-danger-fg: #fff;    --pill-danger-bg-h: #bb2d3b;
    --pill-danger-quiet-bg: #fdecec; --pill-danger-quiet-fg: #b42318; --pill-danger-quiet-bg-h: #f9d7d5; --pill-danger-quiet-fg-h: #912018;
    --pill-aes-bg: #ddf2f6;     --pill-aes-fg: #0b5f6e;    --pill-aes-bg-h: #c8e9ef;
}

/* ---------- 1b. Tokens at night (both night themes: this file loads after v2-night2.css) ---------- */
html[data-v2-scene="night"] body.shell-v2.btn-style-b {
    --btn-primary-bg: #304f7f;  --btn-primary-fg: #fff;    --btn-primary-bd: #304f7f;   --btn-primary-bg-h: #3e6db5; --btn-primary-bd-h: #3e6db5; --btn-primary-bg-a: #29446d; --btn-primary-bd-a: #29446d;
    --btn-filter-bg: #262d38;   --btn-filter-fg: #e3e8ee;  --btn-filter-bd: #262d38;    --btn-filter-bg-h: #303845;  --btn-filter-fg-h: #fff;    --btn-filter-bd-h: #303845; --btn-filter-bg-a: #20262f; --btn-filter-bd-a: #20262f;
    --btn-neutral-bg: #243a59;  --btn-neutral-fg: #c6dbf7; --btn-neutral-bd: #243a59;   --btn-neutral-bg-h: #2c4870; --btn-neutral-fg-h: #fff;   --btn-neutral-bd-h: #2c4870; --btn-neutral-bg-a: #34537f; --btn-neutral-bd-a: #34537f;
    --btn-cancel-bg: #4b5361;   --btn-cancel-fg: #e3e8ee;  --btn-cancel-bd: #4b5361;    --btn-cancel-bg-h: #565f6e;  --btn-cancel-fg-h: #fff;    --btn-cancel-bd-h: #565f6e; --btn-cancel-bg-a: #616b7b; --btn-cancel-bd-a: #616b7b;
    --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;
    /* Delete (solid by day) is a dark red tint at night: the full red glared on the dark ground */
    --btn-danger-bg: #3a1f26;   --btn-danger-fg: #ff8b82;  --btn-danger-bd: #3a1f26;    --btn-danger-bg-h: #4d252d;  --btn-danger-fg-h: #ffb3ad; --btn-danger-bd-h: #4d252d;  --btn-danger-bg-a: #5c2b34;  --btn-danger-bd-a: #5c2b34;
    --btn-danger-soft-bg: #33202a; --btn-danger-soft-fg: #f2a19a; --btn-danger-soft-bd: #33202a; --btn-danger-soft-bg-h: #432731; --btn-danger-soft-fg-h: #ffc2bd; --btn-danger-soft-bd-h: #432731; --btn-danger-soft-bg-a: #522f3a; --btn-danger-soft-bd-a: #522f3a;
    --btn-success-bg: #173a2c;  --btn-success-fg: #6fd6a3; --btn-success-bd: #173a2c;   --btn-success-bg-h: #1e4a38; --btn-success-fg-h: #9be6c1; --btn-success-bd-h: #1e4a38; --btn-success-bg-a: #255a44; --btn-success-bd-a: #255a44;
    --btn-success-soft-bg: #16302a; --btn-success-soft-fg: #7fcfa8; --btn-success-soft-bd: #16302a; --btn-success-soft-bg-h: #1c3d34; --btn-success-soft-fg-h: #a6e3c4; --btn-success-soft-bd-h: #1c3d34; --btn-success-soft-bg-a: #23493f; --btn-success-soft-bd-a: #23493f;
    --btn-warning-bg: #3d321a;  --btn-warning-fg: #f5c45e; --btn-warning-bd: #3d321a;   --btn-warning-bg-h: #4a3d20; --btn-warning-fg-h: #ffd88a; --btn-warning-bd-h: #4a3d20; --btn-warning-bg-a: #574826; --btn-warning-bd-a: #574826;
    --btn-doc-bg: #2a313c;      --btn-doc-fg: #d3d9e1;     --btn-doc-bd: #2a313c;       --btn-doc-bg-h: #343c48;     --btn-doc-fg-h: #fff;       --btn-doc-bd-h: #343c48;    --btn-doc-bg-a: #3e4755;    --btn-doc-bd-a: #3e4755;
    --doc-pdf: #ff8b82;         --doc-xls: #6fd6a3;        --doc-xml: #f5b45e;
    --doc-invoice: #6fd6a3;
    --btn-submit-bg: #133a42;   --btn-submit-fg: #7dd3e0;  --btn-submit-bd: #133a42;    --btn-submit-bg-h: #184954;  --btn-submit-fg-h: #a8e6ef; --btn-submit-bd-h: #184954; --btn-submit-bg-a: #1d5865; --btn-submit-bd-a: #1d5865;
    /* Convert to AES and the Jobs follow the slate above (section 1); their icon a light AL-MA blue for the dark ground */
    --doc-action: #8cb4f0;
    --btn-sync-bg: #262947;     --btn-sync-fg: #b9bcf5;    --btn-sync-bd: #262947;      --btn-sync-bg-h: #2f3358;    --btn-sync-fg-h: #fff;      --btn-sync-bd-h: #2f3358;   --btn-sync-bg-a: #383d69;   --btn-sync-bd-a: #383d69;
}

/* The pills at night: on the body for the blue night, and on .modal-modern itself, where Night v2 sets its own */
html[data-v2-scene="night"] body.shell-v2.btn-style-b,
html[data-v2-scene="night"] body.shell-v2.btn-style-b .modal-modern {
    --pill-primary-bg: #304f7f; --pill-primary-bg-h: #3e6db5;
    --pill-quiet-bg: #4b5361;   --pill-quiet-fg: #e3e8ee;  --pill-quiet-bg-h: #565f6e;  --pill-quiet-fg-h: #fff;
    --pill-danger-bg: #a83a47;  --pill-danger-bg-h: #b8404e;
    --pill-danger-quiet-bg: rgba(255, 139, 130, 0.14); --pill-danger-quiet-fg: #ff8b82; --pill-danger-quiet-bg-h: rgba(255, 139, 130, 0.24); --pill-danger-quiet-fg-h: #ffb3ad;
    --pill-aes-bg: #133a42;     --pill-aes-fg: #7dd3e0;    --pill-aes-bg-h: #184954;
}

/* ---------- 2. Roles by hint: data-btn-role="…" takes that role's tokens, whatever the button's class.
   :not(#_) adds an id's weight, so the hint beats every class-based button rule in the site's sheets (components.css,
   v2-night.css's role-less outline rules) without !important. ---------- */
body.btn-style-b .btn[data-btn-role]:not(#_) {
    --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);
}

/* Each role's tokens under one name (-fg-h / -bd-* fall back as components.css §3 does) */
body.btn-style-b .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, var(--btn-primary-fg)); --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.btn-style-b .btn[data-btn-role="filter"]       { --btn-x-bg: var(--btn-filter-bg); --btn-x-fg: var(--btn-filter-fg); --btn-x-bd: var(--btn-filter-bd); --btn-x-bg-h: var(--btn-filter-bg-h); --btn-x-fg-h: var(--btn-filter-fg-h, var(--btn-filter-fg)); --btn-x-bd-h: var(--btn-filter-bd-h); --btn-x-bg-a: var(--btn-filter-bg-a); --btn-x-bd-a: var(--btn-filter-bd-a); }
body.btn-style-b .btn[data-btn-role="neutral"]      { --btn-x-bg: var(--btn-neutral-bg); --btn-x-fg: var(--btn-neutral-fg); --btn-x-bd: var(--btn-neutral-bd); --btn-x-bg-h: var(--btn-neutral-bg-h); --btn-x-fg-h: var(--btn-neutral-fg-h); --btn-x-bd-h: var(--btn-neutral-bd-h); --btn-x-bg-a: var(--btn-neutral-bg-a); --btn-x-bd-a: var(--btn-neutral-bd-a); }
body.btn-style-b .btn[data-btn-role="cancel"]       { --btn-x-bg: var(--btn-cancel-bg); --btn-x-fg: var(--btn-cancel-fg); --btn-x-bd: var(--btn-cancel-bd); --btn-x-bg-h: var(--btn-cancel-bg-h); --btn-x-fg-h: var(--btn-cancel-fg-h); --btn-x-bd-h: var(--btn-cancel-bd-h); --btn-x-bg-a: var(--btn-cancel-bg-a); --btn-x-bd-a: var(--btn-cancel-bd-a); }
body.btn-style-b .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.btn-style-b .btn[data-btn-role="danger"]       { --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, var(--btn-danger-fg)); --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.btn-style-b .btn[data-btn-role="danger-soft"]  { --btn-x-bg: var(--btn-danger-soft-bg); --btn-x-fg: var(--btn-danger-soft-fg); --btn-x-bd: var(--btn-danger-soft-bd); --btn-x-bg-h: var(--btn-danger-soft-bg-h); --btn-x-fg-h: var(--btn-danger-soft-fg-h); --btn-x-bd-h: var(--btn-danger-soft-bd-h); --btn-x-bg-a: var(--btn-danger-soft-bg-a); --btn-x-bd-a: var(--btn-danger-soft-bd-a); }
body.btn-style-b .btn[data-btn-role="success"]      { --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, var(--btn-success-fg)); --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.btn-style-b .btn[data-btn-role="success-soft"] { --btn-x-bg: var(--btn-success-soft-bg); --btn-x-fg: var(--btn-success-soft-fg); --btn-x-bd: var(--btn-success-soft-bd); --btn-x-bg-h: var(--btn-success-soft-bg-h); --btn-x-fg-h: var(--btn-success-soft-fg-h); --btn-x-bd-h: var(--btn-success-soft-bd-h); --btn-x-bg-a: var(--btn-success-soft-bg-a); --btn-x-bd-a: var(--btn-success-soft-bd-a); }
body.btn-style-b .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.btn-style-b .btn[data-btn-role="doc"]          { --btn-x-bg: var(--btn-doc-bg); --btn-x-fg: var(--btn-doc-fg); --btn-x-bd: var(--btn-doc-bd); --btn-x-bg-h: var(--btn-doc-bg-h); --btn-x-fg-h: var(--btn-doc-fg-h); --btn-x-bd-h: var(--btn-doc-bd-h); --btn-x-bg-a: var(--btn-doc-bg-a); --btn-x-bd-a: var(--btn-doc-bd-a); }
body.btn-style-b .btn[data-btn-role="submit"]       { --btn-x-bg: var(--btn-submit-bg); --btn-x-fg: var(--btn-submit-fg); --btn-x-bd: var(--btn-submit-bd); --btn-x-bg-h: var(--btn-submit-bg-h); --btn-x-fg-h: var(--btn-submit-fg-h); --btn-x-bd-h: var(--btn-submit-bd-h); --btn-x-bg-a: var(--btn-submit-bg-a); --btn-x-bd-a: var(--btn-submit-bd-a); }
body.btn-style-b .btn[data-btn-role="aes"]          { --btn-x-bg: var(--btn-aes-bg); --btn-x-fg: var(--btn-aes-fg); --btn-x-bd: var(--btn-aes-bd); --btn-x-bg-h: var(--btn-aes-bg-h); --btn-x-fg-h: var(--btn-aes-fg-h); --btn-x-bd-h: var(--btn-aes-bd-h); --btn-x-bg-a: var(--btn-aes-bg-a); --btn-x-bd-a: var(--btn-aes-bd-a); }
body.btn-style-b .btn[data-btn-role="job"]          { --btn-x-bg: var(--btn-job-bg); --btn-x-fg: var(--btn-job-fg); --btn-x-bd: var(--btn-job-bd); --btn-x-bg-h: var(--btn-job-bg-h); --btn-x-fg-h: var(--btn-job-fg-h); --btn-x-bd-h: var(--btn-job-bd-h); --btn-x-bg-a: var(--btn-job-bg-a); --btn-x-bd-a: var(--btn-job-bd-a); }
body.btn-style-b .btn[data-btn-role="job-soft"]     { --btn-x-bg: var(--btn-job-soft-bg); --btn-x-fg: var(--btn-job-soft-fg); --btn-x-bd: var(--btn-job-soft-bd); --btn-x-bg-h: var(--btn-job-soft-bg-h); --btn-x-fg-h: var(--btn-job-soft-fg-h); --btn-x-bd-h: var(--btn-job-soft-bd-h); --btn-x-bg-a: var(--btn-job-soft-bg-a); --btn-x-bd-a: var(--btn-job-soft-bd-a); }
body.btn-style-b .btn[data-btn-role="sync"]         { --btn-x-bg: var(--btn-sync-bg); --btn-x-fg: var(--btn-sync-fg); --btn-x-bd: var(--btn-sync-bd); --btn-x-bg-h: var(--btn-sync-bg-h); --btn-x-fg-h: var(--btn-sync-fg-h); --btn-x-bd-h: var(--btn-sync-bd-h); --btn-x-bg-a: var(--btn-sync-bg-a); --btn-x-bd-a: var(--btn-sync-bd-a); }

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

/* Documents: the file type is the icon's colour only (a busy button's spinner hides it) */
body.btn-style-b .btn[data-btn-role="doc"] :is(.bi-file-earmark-pdf, .bi-filetype-pdf) { color: var(--doc-pdf); }
body.btn-style-b .btn[data-btn-role="doc"] :is(.bi-file-earmark-excel, .bi-filetype-xlsx) { color: var(--doc-xls); }
body.btn-style-b .btn[data-btn-role="doc"] :is(.bi-filetype-xml, .bi-file-earmark-code) { color: var(--doc-xml); }
/* Convert to AES, Open Job, Create Job, and Photos and a job's OneDrive archive among the documents: the slate with the
   AL-MA blue as the icon's colour. A job's Tax Invoices menu: the success green. Print keeps the text's colour. */
body.btn-style-b .btn:is([data-btn-role="aes"], [data-btn-role="job"], [data-btn-role="job-soft"]) > .bi,
body.btn-style-b .btn[data-btn-role="doc"] > :is(.bi-camera, .bi-cloud-arrow-up, .bi-cloud-arrow-up-fill) { color: var(--doc-action); }
body.btn-style-b .btn[data-btn-role="doc"] > .bi-receipt { color: var(--doc-invoice); }

/* ---------- 3. Shape: every role class and every hinted button; the pager's page-size buttons keep theirs ---------- */
body.btn-style-b :is(.btn-alma, .btn-primary, .btn-outline-primary, .btn-outline-secondary, .btn-alma-filter, .btn-alma-light, .btn-alma-menu,
    .btn-secondary, .btn-admin, .btn-danger, .btn-outline-danger, .btn-success, .btn-outline-success, .btn-warning, .btn-light,
    .btn[data-btn-role]):not(.grid-pager-size .btn) {
    --bs-btn-border-radius: var(--btn-radius);
    --bs-btn-font-weight: var(--btn-weight);
}

/* ---------- 4. The Convert to AES pills (the 1804 quick view's and the Convert window's confirm) were the teal here;
   since 2026-10-15 they are the AL-MA blue in both styles (.mm-btn.is-alma, modal-modern.css). ---------- */

/* ---------- 5. Menu (btn-alma-menu): B sets no --btn-menu-*, so it is the menu tier's light blue, as btn-alma-light.
   (Tried 2026-10-15 and dropped: the AL-MA blue, too like Add New beside it; a mid blue, a third shade too many.) ---------- */

/* ---------- 6. Trial (2026-10-15): option E of the mockup ("B embossed") on every grid toolbar button, only with the
   debossed grid look (body.v2-deboss, Admin → Interface), which the relief is drawn to match ----------
   B's colours as above, with D's emboss: all the relief inside the edge (a top-light gloss, a 1px highlight along the
   top, a 1px darker line along the bottom), no lift, no outer shadow. Hover brightens the highlight; pressed (and an
   open dropdown) flips the gloss. Every .btn in a .grid-toolbar (the shared toolbar of the grid views) except the
   column picker, which the debossed look draws as dimples. Details pages keep B flat. The values are the mockup's E
   generator's: light fills --gl .75 / .035, dark fills .22 / .08, at night .12 / .16. */
body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .btn:not(.grid-toolbar-tools .btn) {
    --emb: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.10);
    --emb-h: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.10);
    --emb-a: inset 0 1px 2px rgba(0,0,0,.18);
    --gl: .75;
    --gl-b: .035;
    --gloss: linear-gradient(180deg, rgba(255,255,255,var(--gl)) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,var(--gl-b)) 100%);
    --gloss-a: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 60%);
    background-image: var(--gloss);
    box-shadow: var(--emb);
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
    transition: box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

/* The solid fills (Add New, and any solid role): the dark-fill gloss */
body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .btn:not(.grid-toolbar-tools .btn):is(
    :is(.btn-alma, .btn-primary, .btn-danger, .btn-success):not([data-btn-role]),
    [data-btn-role="primary"], [data-btn-role="danger"], [data-btn-role="success"]) {
    --gl: .22;
    --gl-b: .08;
    text-shadow: 0 1px 0 rgba(0,0,0,.22);
}

/* Filters: B's white with a grey rim; under the gloss the rim read too hard, so it is a step lighter here */
body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .btn-alma-filter:not(.grid-toolbar-tools .btn) {
    --bs-btn-border-color: #e1e6ec;
    --bs-btn-hover-border-color: #d3dae3;
    --bs-btn-active-border-color: #d3dae3;
}

html[data-v2-scene="night"] body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .btn:not(.grid-toolbar-tools .btn) {
    --emb: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.35);
    --emb-h: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.35);
    --emb-a: inset 0 1px 3px rgba(0,0,0,.45);
    --gl: .12;
    --gl-b: .16;
    --gloss-a: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 60%);
    text-shadow: 0 1px 1px rgba(0,0,0,.45);
}

    /* At night Filters has no rim (its fill is its edge), so it keeps B's */
    html[data-v2-scene="night"] body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .btn-alma-filter:not(.grid-toolbar-tools .btn) {
        --bs-btn-border-color: var(--btn-filter-bd);
        --bs-btn-hover-border-color: var(--btn-filter-bd-h);
        --bs-btn-active-border-color: var(--btn-filter-bd-a);
    }

body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .btn:not(.grid-toolbar-tools .btn):is(:hover, :focus-visible) {
    box-shadow: var(--emb-h);
}

body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .btn:not(.grid-toolbar-tools .btn):is(:active, .show) {
    box-shadow: var(--emb-a);
    background-image: var(--gloss-a);
}

body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .btn:not(.grid-toolbar-tools .btn):disabled {
    box-shadow: none;
}

/* The company switch (.grid-switch: Tax Invoices, Remittances) in the same family: the strip a well pressed into the card
   like the search box beside it (v2-deboss.css's well tokens), the active company a key raised out of it in the Filters
   button's look (white, its light rim drawn inset so the key keeps its width, dark ink), embossed as the buttons are: it is
   a filter, and sits between Filters and the search box (the user, 2026-10-15; it was the menu tier's light blue). The
   segments lose their outline (the well's shading is the edge); 2px of well shows round the key, and the strip keeps the
   buttons' height. */
body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch {
    gap: 2px;
    padding: 2px;
    border-radius: var(--btn-radius);
    background: var(--v2-well-bg);
    box-shadow: var(--v2-well-inset), var(--v2-well-lip);
}

    body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn {
        border: 0;
        border-radius: calc(var(--btn-radius) - 2px);
        transition: box-shadow .15s ease, background-color .15s ease, color .15s ease;
    }

        body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn:not(.is-active):hover {
            background-color: var(--v2-well-hover);
        }

        body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn.is-active {
            --gl: .75;
            --gl-b: .035;
            --key-rim: #e1e6ec;     /* the deboss Filters' lighter rim (section 6) */
            background-color: var(--btn-filter-bg);
            background-image: linear-gradient(180deg, rgba(255,255,255,var(--gl)) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,var(--gl-b)) 100%);
            box-shadow: inset 0 0 0 1px var(--key-rim), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.10), 0 1px 2px rgba(23,43,69,.28);
            color: var(--btn-filter-fg);
            text-shadow: 0 1px 0 rgba(255,255,255,.65);
        }

            body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn.is-active:hover {
                --key-rim: #d3dae3;
                background-color: var(--btn-filter-bg-h);
                color: var(--btn-filter-fg-h, var(--btn-filter-fg));
                box-shadow: inset 0 0 0 1px var(--key-rim), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.10), 0 1px 2px rgba(23,43,69,.28);
            }

/* At night: the dark well (night's grey field and its border go), the key with night's dimmer emboss */
html[data-v2-scene="night"] body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch {
    border-color: transparent;
    background: var(--v2-well-bg);
}

    /* The unselected companies in the pager's unselected-page ink (v2-night.css / v2-night2.css --pager-ink, which is
       scoped to the pager): the light blue in the blue night, the grey-white in Night v2; white on hover */
    html[data-v2-scene="night"] body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn:not(.is-active) {
        color: #b9d3f8;
    }

    html[data-v2-scene="night"] body.shell-v2.v2-night2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn:not(.is-active) {
        color: #d3d9e1;
    }

        html[data-v2-scene="night"] body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn:not(.is-active):hover {
            color: #fff;
        }

    /* Night's Filters has no rim (its fill is its edge), so neither has the key */
    html[data-v2-scene="night"] body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn.is-active {
        --gl: .12;
        --gl-b: .16;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.5);
        text-shadow: 0 1px 1px rgba(0,0,0,.45);
    }

        html[data-v2-scene="night"] body.shell-v2.v2-deboss.btn-style-b .grid-toolbar .grid-switch-btn.is-active:hover {
            box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.5);
        }