/* =====================================================================================================================
BME design v2 layer - loaded LAST of the screen styles (after design.css, before print.css).
It only re-themes: same markup, same ids and classes, same JS contracts. Remove the and the app is exactly as before.
What changes (BME Design System v2, the canvas "BME ERP - Set 1"):
1 tokens the --bme-* tokens get the v2 values (warm ground, white cards, near-black action, blue as accent only);
new tokens for the action colour, glass, pastels, solid status fills, AI gradient
2 type Figtree (Latin, figures) + Anuphan (Thai); the SIZES stay as they are (DS-1a-2: the owner asked for 14px text)
3 shell row 1 becomes a floating glass capsule; the 8 groups (#topMenu, TOP_GROUPS) become a floating dock at the
bottom - no left sidebar, no second header row; a group's mega-menu opens above the dock
4 components capsule buttons, one black primary, 24px cards, solid status pills, black filter chips, calm tables
5 patterns classes for the v2 patterns the app does not draw yet (status pair, explain card, float bar, AI card)
Light and dark: every colour is a light-dark() token, driven by color-scheme (design.css sets it from data-bs-theme).
===================================================================================================================== */
/* ---------- 1. Tokens ---------- */
:root{
/* ground and surfaces */
--bme-canvas:light-dark(#f5f5f3,#0f131a);
--bme-surface:light-dark(#ffffff,#171c25);
--bme-surface-2:light-dark(#f5f6f7,#1e2430);
--bme-surface-3:light-dark(#ebebeb,#272e3b);
--bme-line:light-dark(#e6e8ec,#262d3a);
--bme-line-strong:light-dark(#858a92,#6a7384); /* control borders: 3:1 against the surface (WCAG 1.4.11) */
--bme-ink:light-dark(#171a21,#f5f5f3);
--bme-muted:light-dark(#50555e,#b4b9c2);
--bme-ink-3:light-dark(#6b7078,#8a909a);
/* the one strong colour: near-black in light, near-white in dark */
--bme-action:light-dark(#131922,#f5f5f3);
--bme-action-hover:light-dark(#2b313b,#ffffff);
--bme-on-action:light-dark(#ffffff,#131922);
/* BME blue: links, focus, selection - an accent, not the button colour */
--bme-primary:light-dark(#2563eb,#5b8df6);
--bme-primary-hover:light-dark(#1d4ed8,#8ab4ff);
--bme-primary-text:light-dark(#1d4ed8,#8ab4ff);
--bme-primary-soft:light-dark(#eaf1ff,#18264a);
--bme-ring:light-dark(rgba(37,99,235,.28),rgba(138,180,255,.40));
--bme-focus:light-dark(#2563eb,#8ab4ff);
/* status - soft (text on a tint, as design.css used them) */
--bme-ok-fg:light-dark(#176f00,#6fdc5a);--bme-ok-bg:light-dark(#e3f4dc,#15301a);
--bme-warn-fg:light-dark(#8a5a00,#ffd54d);--bme-warn-bg:light-dark(#fff6d6,#3a3112);
--bme-err-fg:light-dark(#b42318,#ff8a80);--bme-err-bg:light-dark(#fde7e5,#3d1a17);
--bme-info-fg:light-dark(#00458c,#8ec2ff);--bme-info-bg:light-dark(#e5f0fd,#16263c);
--bme-mute-fg:light-dark(#50555e,#c3c8d0);--bme-mute-bg:light-dark(#ebebeb,#2a313d);
/* status - solid fills (the v2 pills) */
--bme-draft-fill:light-dark(#ebebeb,#2a313d);--bme-draft-on:light-dark(#50555e,#c3c8d0);
--bme-pending-fill:#ffce2f;--bme-pending-on:#171a21;
--bme-success-fill:#198100;--bme-success-on:#ffffff;
--bme-danger-fill:#d92d20;--bme-danger-on:#ffffff;
--bme-info-fill:light-dark(#c4ddfb,#1d3a5f);--bme-info-on:light-dark(#00458c,#a9cdfb);
/* a tag that is no state (Tabler's bg-teal-lt - the chart's "เพิ่มโดยระบบ"): window #2 found Tabler's own #0ca678 on its teal-lt at
2.79:1 light and 3.82:1 dark, on master too; these are 6.73:1 and 7.52:1 */
--bme-tag-fill:light-dark(#d5f2e9,#163b37);--bme-tag-on:light-dark(#0a5c46,#7fdcbf);
/* a closed state (Tabler's bg-dark-lt - the budget's "ล็อก", discipline's dismissal): window #2 found Tabler's #1f2937 on its dark-lt
at 1.15:1 in the dark theme; a step darker than the draft's grey - 13.13:1 light, 8.93:1 dark */
--bme-closed-fill:light-dark(#d9dee6,#3b4453);--bme-closed-on:light-dark(#111827,#f3f4f6);
/* pastels: tiles and icon grounds only, never text */
--bme-pastel-yellow:light-dark(#fdf3c4,#3a3417);--bme-pastel-mint:light-dark(#d6f2ea,#173329);
--bme-pastel-sky:light-dark(#d9e9fb,#172a40);--bme-pastel-lilac:light-dark(#e9e1fb,#2a2342);
--bme-pastel-pink:light-dark(#fbe1e8,#3a1f2a);--bme-pastel-peach:light-dark(#fde2d4,#3b281e);
/* AI (DS-2a: the pink a step darker in the light theme - #e8467c was 2.97:1 for the hero heading's band over its lilac and 3.75:1
under the avatar's white letter; #d6336c is 3.66:1 and 4.62:1) */
--bme-ai-1:light-dark(#2563eb,#6ea0ff);--bme-ai-2:light-dark(#8b3dff,#b58cff);--bme-ai-3:light-dark(#d6336c,#ff7aa6);--bme-ai-ink:light-dark(#6d28d9,#c4a6ff);
/* glass (top capsule, dock, float bar) */
--bme-glass:light-dark(rgba(255,255,255,.72),rgba(23,28,37,.72));
--bme-glass-line:light-dark(rgba(255,255,255,.80),rgba(255,255,255,.10));
--bme-scrim:light-dark(rgba(19,25,34,.36),rgba(0,0,0,.60));
/* shape */
--bme-radius-sm:8px;--bme-radius:12px;--bme-radius-tile:16px;--bme-radius-lg:24px;--bme-radius-frame:32px;--bme-radius-pill:999px;
--bme-shadow-1:0 1px 2px light-dark(rgba(15,23,42,.04),rgba(0,0,0,.40));
--bme-shadow-2:0 3px 10px light-dark(rgba(15,23,42,.06),rgba(0,0,0,.35)),0 13px 35px light-dark(rgba(15,23,42,.10),rgba(0,0,0,.45));
--bme-shadow-3:0 24px 64px -12px light-dark(rgba(15,23,42,.28),rgba(0,0,0,.75));
--bme-blur:blur(20px) saturate(160%);
--bme-dock-h:84px; /* the dock's height: what a page keeps clear at its bottom */
--bme-top-h:60px;
/* type: the families only - the sizes are design.css's (DS-1a-2) */
--bme-font:'Figtree','Anuphan','Inter','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
--tblr-font-sans-serif:var(--bme-font);--tblr-body-font-family:var(--bme-font);
--tblr-border-radius:var(--bme-radius);--tblr-border-radius-lg:var(--bme-radius-lg);--tblr-border-radius-sm:var(--bme-radius-sm);--tblr-border-radius-pill:var(--bme-radius-pill);
--tblr-primary-lt:var(--bme-primary-soft);
}
/* ---------- 1b. The rest of v2's values (gathered 6 Oct 2569: no value below changes what is on screen) ----------
Text sizes: the owner's scale stays in design.css and v2 never redefines it - --bme-fs-xs 12, -sm 13, -table 13.5, -base 14, -nav 14,
-card-title 15, -title 21, -kpi 22, -stat 24px. v2 uses those for body text and adds the steps below for its own pieces.
Spacing: --bme-space-N is N x 4px (0-5 = 2px, 1-5 = 6px ...). Offsets that place one icon or dot (3, 5, 7, 9, 13px ...) stay written
where they are. #000 inside a mask is the mask's opacity, not a colour. */
:root{
/* brand: the logo's own colours */
--bme-brand-ink:light-dark(#001c41,#e7edf5);--bme-brand-teal:#05c9b8;
/* the assistant: the gradient of ✦, the mark and the avatar (the same in both themes), its violet, its glow; the 4th colour of the glow band
(DS-2a: its light orange #ea580c was 2.82:1 over the hero's lilac - #c2410c is 4.10:1 over every pastel of the hero) */
--bme-ai-grad:linear-gradient(135deg,#2563eb,#8b3dff 60%,#d6336c);--bme-ai-violet:#8b3dff;--bme-glow-4:light-dark(#c2410c,#ffa463);
/* text and icons on a solid colour (the green and red buttons, the gradient) */
--bme-on-color:#fff;
/* states the theme adds: hover of the green and red buttons, the modal's backdrop, the icons in a toast (a toast is dark in the light theme) */
--bme-success-hover:light-dark(#146700,#1e9a00);--bme-danger-hover:#b42318;--bme-backdrop:#131922;
--bme-toast-ok:light-dark(#6fdc5a,#176f00);--bme-toast-err:light-dark(#ff8a80,#b42318);
/* shadows (the three levels --bme-shadow-1/2/3 are in section 1) */
--bme-shadow-bar-color:light-dark(rgba(15,23,42,.18),rgba(0,0,0,.6));
--bme-shadow-bar:0 10px 30px -12px var(--bme-shadow-bar-color),inset 0 1px 0 var(--bme-glass-line);
--bme-shadow-bar-lifted:0 16px 40px -16px light-dark(rgba(15,23,42,.30),rgba(0,0,0,.75)),inset 0 1px 0 var(--bme-glass-line);
--bme-shadow-sticker:inset 0 -3px 0 rgba(23,26,33,.07),inset 0 1px 0 rgba(255,255,255,.65);
--bme-shadow-sticker-lg:inset 0 -4px 0 rgba(23,26,33,.06),inset 0 1px 0 rgba(255,255,255,.65);
--bme-shadow-key:inset 0 -3px 0 rgba(23,26,33,.06),inset 0 1px 0 rgba(255,255,255,.6);
--bme-shadow-dot:0 1px 3px rgba(15,23,42,.1);--bme-shadow-hair:0 1px 2px rgba(15,23,42,.06);
--bme-shadow-ai:0 4px 14px -4px rgba(139,61,255,.55);--bme-shine:inset 0 1px 0 rgba(255,255,255,.35);
/* text sizes v2 adds to the owner's scale */
--bme-fs-3xs:10px;--bme-fs-2xs:11px;--bme-fs-chip:11.5px;--bme-fs-label:12.5px;--bme-fs-md:15px;--bme-fs-lg:16px;--bme-fs-lead:17px;
--bme-fs-xl:18px;--bme-fs-2xl:20px;--bme-fs-3xl:22px;--bme-fs-4xl:24px;
--bme-fs-page:clamp(24px,2.2vw,30px);--bme-fs-hero:clamp(26px,2.6vw,38px);--bme-fs-figure:clamp(26px,2.4vw,36px);--bme-fs-grand:clamp(24px,2vw,30px);
/* weights, tracking, line heights */
--bme-fw-regular:400;--bme-fw-medium:500;--bme-fw-semibold:600;--bme-fw-bold:700;
--bme-track-display:-.025em;--bme-track-title:-.02em;--bme-track-tight:-.01em;--bme-track-caps:.04em;--bme-track-caps-wide:.09em;
--bme-lh-solid:1;--bme-lh-tight:1.2;--bme-lh-heading:1.25;--bme-lh-snug:1.3;--bme-lh-ui:1.45;--bme-lh-read:1.6;
/* spacing: N x 4px */
--bme-space-0-5:2px;--bme-space-1:4px;--bme-space-1-5:6px;--bme-space-2:8px;--bme-space-2-5:10px;--bme-space-3:12px;--bme-space-3-5:14px;--bme-space-4:16px;
--bme-space-4-5:18px;--bme-space-5:20px;--bme-space-5-5:22px;--bme-space-6:24px;--bme-space-7:28px;--bme-space-8:32px;--bme-space-10:40px;
/* corners v2 adds to section 1's (sm 8, base 12, tile 16, lg 24, frame 32, pill) */
--bme-radius-item:10px;--bme-radius-icon:14px;--bme-radius-bubble:18px;--bme-radius-tile-lg:20px;--bme-radius-chip:21px;--bme-radius-field:22px;
--bme-radius-sheet:28px;--bme-radius-dock:30px;
/* the page's layers, under Tabler's dropdown 1000 / modal 1055 / toast 1090 where it matters */
--bme-z-floatbar:1020;--bme-z-top:1030;--bme-z-drawer:1034;--bme-z-dock:1035;--bme-z-ai:1040;--bme-z-ai-sheet:1050;
/* an open menu over the dock (the round's motion-on menu walk: 17 menus opening low went under it) and under every dialog */
--bme-z-menu:1036;
}
/* ---------- 2. Base ---------- */
body{font-family:var(--bme-font);background:var(--bme-canvas)}
.page-title{font-weight:var(--bme-fw-semibold);letter-spacing:var(--bme-track-tight)}
.page-pretitle{color:var(--bme-ink-3)}
:where(a,button,summary,[tabindex]):focus-visible{outline-color:var(--bme-focus)}
a{color:var(--bme-primary-text)}
@media screen{
/* ---------- 3. Shell: floating top capsule + floating dock (spec: canvas Shell-TopBar, Shell-Dock) ---------- */
/* the top bar: a compact floating capsule in the middle (the owner chose option C, 2026-10-06) - brand · the search in the middle ·
the company as a chip with its icon (the dot on it: the period open or closed) · tasks · theme · the person as an avatar */
:root{--bme-ctx-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171a21' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 21l18 0' /%3E %3Cpath d='M9 8l1 0' /%3E %3Cpath d='M9 12l1 0' /%3E %3Cpath d='M9 16l1 0' /%3E %3Cpath d='M14 8l1 0' /%3E %3Cpath d='M14 12l1 0' /%3E %3Cpath d='M14 16l1 0' /%3E %3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16' /%3E %3C/svg%3E")}
[data-bs-theme=dark]{--bme-ctx-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f3' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 21l18 0' /%3E %3Cpath d='M9 8l1 0' /%3E %3Cpath d='M9 12l1 0' /%3E %3Cpath d='M9 16l1 0' /%3E %3Cpath d='M14 8l1 0' /%3E %3Cpath d='M14 12l1 0' /%3E %3Cpath d='M14 16l1 0' /%3E %3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16' /%3E %3C/svg%3E")}
.shell-top{position:sticky;top:0;z-index:var(--bme-z-top);padding:var(--bme-space-3-5) var(--bme-space-4) 0;background:transparent;border:0;pointer-events:none}
.shell-top>*{pointer-events:auto}
.shell-row1{max-width:1160px;min-height:64px;gap:var(--bme-space-3);padding:0 var(--bme-space-2-5) 0 var(--bme-space-5-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-pill);background:color-mix(in srgb,var(--bme-surface) 82%,transparent);-webkit-backdrop-filter:var(--bme-blur);backdrop-filter:var(--bme-blur);box-shadow:var(--bme-shadow-bar)}
.shell-spacer{display:none}
/* the word after the logo: bme's own hand-lettered "Platform" - single-line strokes drawn for bme (kit-tools/handword.py, no font),
inline in index.html; the logo's navy (pale blue in the dark theme), the bar the t and f share in the logo's teal. Three frames of
the same strokes, each moved a hair: frame 0 is the drawing, 1 and 2 only show in the hand-drawn boil (section 8 g) */
.shell-brand{gap:var(--bme-space-2-5)}
@media (min-width:900px){.shell-erp{display:block;flex:none;width:74.2px;height:31px;margin-top:5px;color:var(--bme-brand-ink)}}
.shell-erp .wm{display:block;width:100%;height:100%;overflow:visible}
.wm-s{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.wm-bar{stroke:var(--bme-brand-teal)}
.wm-fr1,.wm-fr2{opacity:0}
@media (forced-colors:active){.wm-s,.wm-bar{stroke:CanvasText}}
.shell-top .search-trigger{flex:0 1 420px;min-width:0;margin:0 auto;height:44px;padding:0 var(--bme-space-2) 0 var(--bme-space-4);border:1px solid transparent;border-radius:var(--bme-radius-pill);background:var(--bme-surface-2);color:var(--bme-ink-3);font-size:var(--bme-fs-base)}
.shell-top .search-trigger:hover{border-color:var(--bme-line);background:var(--bme-surface)}
.shell-top .search-trigger span{flex:1;text-align:left}
.shell-top .search-trigger kbd{padding:3px var(--bme-space-2);border:0;border-radius:var(--bme-radius-pill);background:var(--bme-surface-3);color:var(--bme-muted);font-family:var(--bme-font);font-size:var(--bme-fs-2xs);box-shadow:none}
.shell-ctx{position:relative;gap:var(--bme-space-2-5);min-height:44px;padding:0 var(--bme-space-3) 0 5px;border:1px solid transparent;border-radius:var(--bme-radius-pill);background:var(--bme-surface-2)}
.shell-ctx:hover,.shell-ctx[aria-expanded="true"]{border-color:var(--bme-line);background:var(--bme-surface)}
.shell-ctx::before{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--bme-ctx-icon) center/18px no-repeat,var(--bme-pastel-sky)}
/* the company switcher (the owner chose "company | period", 2026-10-06): one capsule in two parts - the building and the company's
name, a hairline, then a calendar and the period with its state; the dot on the building stays (green open, amber closed). Under 900px
only the building and its dot show, as before */
.shell-ctx-text{flex-direction:row;align-items:center;gap:0}
.shell-ctx-text strong{max-width:270px;padding-right:var(--bme-space-3);font-size:var(--bme-fs-table)}
.shell-ctx-text small{display:inline-flex;align-items:center;gap:var(--bme-space-1-5);padding-left:var(--bme-space-3);border-left:1px solid var(--bme-line-strong);color:var(--bme-ink);font-size:var(--bme-fs-label);font-weight:var(--bme-fw-medium)}
.shell-ctx-text small::before{content:"";flex:none;width:15px;height:15px;background:var(--bme-ink-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") center/contain no-repeat}
.shell-ctx-text small:empty{display:none}
/* the search gives way first, so the company's name and the period both stay whole on a wide screen; below 1280px the period
leaves the capsule (it is in the panel, and the dot still says open or closed) and the name keeps up to 180px */
.shell-row1>.shell-ctx{flex-shrink:0}
@media (min-width:900px) and (max-width:1279.98px){.shell-ctx-text small{display:none}.shell-ctx-text strong{max-width:180px;padding-right:0}}
@media (max-width:899.98px){.shell-row1>.shell-ctx{flex-shrink:1}}
.shell-ctx-dot{position:absolute;left:31px;top:29px;width:11px;height:11px;background:var(--bme-ok-fg);box-shadow:0 0 0 2px var(--bme-surface-2)}
.shell-ctx-dot.closed{background:var(--bme-warn-fg)}
/* DS-2b-6: the period's state as a word beside its dot (line C's span#ctxState, เปิด / ปิด) wherever the period's own text is hidden -
a phone, a small laptop (below 1280px) - so the dot never tells the state by its colour alone (DS-1: a state always has its words) */
.shell-ctx-state{display:none;order:1;font-size:var(--bme-fs-2xs);font-weight:var(--bme-fw-medium);color:var(--bme-ink);white-space:nowrap}
.shell-ctx>.icon{order:2} /* the word after the company's name, the chevron last */
@media (max-width:1279.98px){.shell-ctx-state{display:inline}}
.shell-row1 .shell-icon,.shell-row1 [data-act="theme"]{width:42px;height:42px;border-radius:50%;background:var(--bme-surface-2)}
.shell-row1 .btn-ghost-secondary:hover{background:var(--bme-surface-3)}
.shell-row1 .user-menu-button{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border:0;border-radius:50%}
.user-menu-button .user-menu-name{display:none!important}
.user-menu-button .avatar{flex:none;width:40px;height:40px;font-size:var(--bme-fs-md);color:var(--bme-on-color)!important;background:var(--bme-ai-grad)!important;box-shadow:0 0 0 2px var(--bme-surface),0 0 0 4px color-mix(in srgb,var(--bme-ai-2) 35%,transparent)}
.shell-ctx-panel{top:90px;right:max(16px,calc((100vw - 1160px) / 2));border:1px solid var(--bme-line);border-radius:var(--bme-radius-lg);box-shadow:var(--bme-shadow-3)}
/* the dock: #topMenu holds the 8 groups (shell-ui.mjs render()); fixed at the bottom, centred, no transform (the mega-menu inside
it is positioned against it) */
.shell-menu{position:fixed;left:0;right:0;bottom:16px;z-index:var(--bme-z-dock);display:flex;justify-content:center;border:0;pointer-events:none}
.shell-menu>*{pointer-events:auto}
.topmenu-bar{position:relative;z-index:2;display:flex;align-items:flex-end;gap:var(--bme-space-0-5);max-width:calc(100vw - 24px);min-height:0;margin:0;padding:var(--bme-space-2) var(--bme-space-2-5) var(--bme-space-1-5);overflow:visible;border:1px solid var(--bme-line);border-radius:var(--bme-radius-dock);background:var(--bme-glass);-webkit-backdrop-filter:var(--bme-blur);backdrop-filter:var(--bme-blur);box-shadow:var(--bme-shadow-2),inset 0 1px 0 var(--bme-glass-line)}
:is(.topmenu-btn,.dock-btn){flex-direction:column;justify-content:flex-end;gap:var(--bme-space-1);min-width:70px;padding:0 var(--bme-space-1);border:0;border-radius:0;background:none;color:var(--bme-muted);font-size:var(--bme-fs-2xs);font-weight:var(--bme-fw-medium);line-height:14px}
:is(.topmenu-btn,.dock-btn):hover,:is(.topmenu-btn,.dock-btn).open{background:none}
:is(.topmenu-btn,.dock-btn) .icon{box-sizing:content-box;width:20px;height:20px;padding:var(--bme-space-3);border-radius:var(--bme-radius-tile);background:var(--bme-surface);color:var(--bme-ink);box-shadow:0 0 0 1px var(--bme-line);transition:transform .16s ease-out,background-color .16s,color .16s}
:is(.topmenu-btn,.dock-btn):hover .icon{transform:translateY(-3px)}
:is(.topmenu-btn,.dock-btn):focus-visible{outline:0}
:is(.topmenu-btn,.dock-btn):focus-visible .icon{outline:2px solid var(--bme-focus);outline-offset:2px}
/* a tone per group (decoration only - the label says what it is) */
.topmenu-btn[data-group="sales"] .icon{background:var(--bme-pastel-mint);box-shadow:none}
.topmenu-btn[data-group="purchase"] .icon{background:var(--bme-pastel-peach);box-shadow:none}
.topmenu-btn[data-group="stock"] .icon{background:var(--bme-pastel-lilac);box-shadow:none}
.topmenu-btn[data-group="finance"] .icon{background:var(--bme-pastel-yellow);box-shadow:none}
.topmenu-btn[data-group="accounting"] .icon{background:var(--bme-pastel-sky);box-shadow:none}
.topmenu-btn[data-group="people"] .icon{background:var(--bme-pastel-pink);box-shadow:none}
.topmenu-btn[data-group="settings"] .icon{background:var(--bme-surface-3);box-shadow:none}
/* the group of the open page, and the group whose menu is open */
.topmenu-btn.on{border:0;color:var(--bme-ink);font-weight:var(--bme-fw-semibold)}
.topmenu-btn.on .icon,.topmenu-btn.open .icon{background:var(--bme-action);color:var(--bme-on-action);box-shadow:var(--bme-shadow-2)}
.topmenu-btn.open:not(.on) .icon{box-shadow:0 0 0 2px var(--bme-surface),0 0 0 4px var(--bme-action)}
/* the dock patch (patches/0002) adds two buttons after the groups: .dock-create (สร้าง) and .dock-all (ทุกเมนู) */
.dock-btn{display:flex;align-items:center;border:0;background:none;white-space:nowrap;cursor:pointer;font-family:inherit}
.dock-sep{flex:none;align-self:flex-end;width:1px;height:40px;margin:0 var(--bme-space-1-5) var(--bme-space-5);background:var(--bme-line)}
.dock-create .icon{width:24px;height:24px;padding:var(--bme-space-3-5);border-radius:var(--bme-radius-pill);background:var(--bme-action);color:var(--bme-on-action);box-shadow:var(--bme-shadow-2)}
.dock-create.open .icon{transform:rotate(45deg)}
.dock-all .icon{background:var(--bme-surface);box-shadow:0 0 0 1px var(--bme-line)}
/* a group's mega-menu: a sheet above the dock, centred (place() sets --mega-left; the dock does not use it) */
#topMenu .mega{position:absolute;z-index:1;top:auto;bottom:calc(100% + 12px);left:50%;right:auto;transform:translateX(-50%);max-width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - var(--bme-dock-h) - var(--bme-top-h) - 72px);padding:var(--bme-space-6);border:1px solid var(--bme-line);border-radius:var(--bme-radius-frame);background:var(--bme-surface);box-shadow:var(--bme-shadow-3)}
.mega-col h5{border-bottom:0;padding-bottom:0;margin-bottom:var(--bme-space-2);font-size:var(--bme-fs-xs);font-weight:var(--bme-fw-semibold);color:var(--bme-ink-3)}
.mega-sub{margin-left:var(--bme-space-2-5)}
.mega-item a{padding:var(--bme-space-1-5) var(--bme-space-2-5);border-radius:var(--bme-radius);font-size:var(--bme-fs-base);color:var(--bme-ink)}
/* สร้าง: the documents as tiles, two to a row */
#megaMenu[data-open="create"]{width:min(460px,calc(100vw - 32px))}
#megaMenu[data-open="create"] .mega-grid{grid-template-columns:1fr}
#megaMenu[data-open="create"] .mega-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--bme-space-2)}
#megaMenu[data-open="create"] .mega-col h5{grid-column:1/-1;margin:0 0 var(--bme-space-0-5)}
#megaMenu[data-open="create"] .mega-item a{padding:var(--bme-space-3) var(--bme-space-3-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-tile);font-weight:var(--bme-fw-medium)}
#megaMenu[data-open="create"] .mega-item a:hover{border-color:var(--bme-line-strong);background:var(--bme-surface-2)}
.mega-item a:hover,.mega-item a:focus-visible{background:var(--bme-surface-2)}
.mega-foot{margin-top:var(--bme-space-4);padding:var(--bme-space-3) var(--bme-space-4);border:0;border-radius:var(--bme-radius-bubble);background:var(--bme-surface-2)}
.mega-all{color:var(--bme-ink);font-weight:var(--bme-fw-medium)}
.mega-pin{color:var(--bme-ink-3)}
/* on a group's page the pin shows without a hover (a phone has none): full strength, 5:1 - at .35 it was 1.6:1 and hard to find */
.group-page .mega-pin{opacity:1}
.group-page .card-title{border-bottom:0;color:var(--bme-ink-3);font-weight:var(--bme-fw-semibold)}
/* ทุกเมนู on a wide screen: a launcher above the dock - every group a card, in columns; the page dimmed behind it */
@media (min-width:900px){
.shell-drawer{inset:auto auto calc(var(--bme-dock-h) + 28px) 50%;transform:translateX(-50%);width:min(1240px,calc(100vw - 32px));max-height:calc(100vh - var(--bme-dock-h) - var(--bme-top-h) - 72px);padding:var(--bme-space-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-frame);background:var(--bme-canvas);box-shadow:var(--bme-shadow-3),0 0 0 100vmax var(--bme-scrim);z-index:var(--bme-z-drawer)}
.shell-drawer nav{columns:4 250px;column-gap:var(--bme-space-3-5)}
.shell-drawer details{break-inside:avoid;margin-bottom:var(--bme-space-3-5);padding:var(--bme-space-1) var(--bme-space-2) var(--bme-space-2);border:1px solid var(--bme-line);border-radius:var(--bme-radius-lg);background:var(--bme-surface)}
.shell-drawer summary{list-style:none;padding:var(--bme-space-2-5) var(--bme-space-2) var(--bme-space-1-5)}
.shell-drawer summary::-webkit-details-marker{display:none}
.shell-drawer .mega-col h5{font-size:var(--bme-fs-2xs)}
.shell-drawer .mega-foot{margin-top:var(--bme-space-2);padding:var(--bme-space-2) var(--bme-space-2-5)}
}
/* every page keeps the dock's height clear at its end; things that sat at the bottom move above the dock */
.footer{padding-bottom:calc(var(--bme-dock-h) + var(--bme-space-8));background:transparent;border-top:0}
#toastArea{bottom:calc(var(--bme-dock-h) + 20px)!important}
#networkActivity{top:calc(var(--bme-top-h) + 24px);bottom:auto}
/* phone and small tablet: the same dock (no burger, no drawer from the left) - four groups, สร้าง, ทุกเมนู; ทุกเมนู opens
the drawer as a bottom sheet. Without the dock patch the burger stays as it was. */
@media (max-width:899.98px){
:root{--bme-dock-h:68px}
.shell-top{padding:var(--bme-space-2) var(--bme-space-2) 0}
.shell-row1{gap:var(--bme-space-1-5);padding:0 var(--bme-space-1-5) 0 var(--bme-space-3-5);min-height:58px}
.shell-top .search-trigger{flex:0 0 42px;width:42px;height:42px;margin:0 0 0 auto;padding:0;justify-content:center}
.shell-ctx{min-height:42px;padding:0 var(--bme-space-1)}
.shell-ctx-text,.shell-ctx>.icon{display:none}
.shell-row1 .shell-icon,.shell-row1 [data-act="theme"]{width:40px;height:40px}
.shell-menu{display:flex;bottom:12px}
.topmenu-bar{width:calc(100vw - 24px);justify-content:space-around;padding:var(--bme-space-1-5) var(--bme-space-1) var(--bme-space-1);border-radius:var(--bme-radius-sheet)}
:is(.topmenu-btn,.dock-btn){flex:1;min-width:0;padding:0 var(--bme-space-0-5);font-size:var(--bme-fs-3xs);line-height:13px}
:is(.topmenu-btn,.dock-btn) span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
:is(.topmenu-btn,.dock-btn) .icon{padding:var(--bme-space-2);border-radius:var(--bme-radius-icon);box-shadow:none}
.topmenu-btn[data-group] .icon{background:transparent}
.topmenu-btn[data-group].on .icon{background:var(--bme-action);color:var(--bme-on-action)}
.topmenu-btn:nth-child(n+5):not(.on){display:none}
.dock-sep{display:none}
.dock-create{flex:0 0 auto}
.dock-create .icon{width:22px;height:22px;padding:13px}
.shell-top:has(.dock-all) .shell-burger{display:none}
#topMenu .mega{left:12px;right:12px;width:auto;transform:none;max-width:none;padding:var(--bme-space-4);border-radius:var(--bme-radius-sheet);box-shadow:var(--bme-shadow-3),0 0 0 100vmax var(--bme-scrim)}
#megaMenu[data-open="create"]{width:auto}
#topMenu .mega-grid{grid-template-columns:1fr}
.shell-drawer{inset:auto 0 0 0;width:100%;max-height:82vh;padding:var(--bme-space-2) var(--bme-space-3) calc(var(--bme-dock-h) + var(--bme-space-6));border:0;border-radius:var(--bme-radius-sheet) var(--bme-radius-sheet) 0 0;box-shadow:var(--bme-shadow-3),0 0 0 100vmax var(--bme-scrim);z-index:var(--bme-z-drawer)}
.shell-drawer::before{content:"";display:block;width:40px;height:5px;margin:var(--bme-space-1) auto var(--bme-space-2);border-radius:var(--bme-radius-pill);background:var(--bme-line-strong)}
.shell-drawer details{border-bottom-color:var(--bme-line)}
.shell-ctx-panel{top:74px;right:8px}
}
/* ---------- 4. Components ---------- */
/* cards */
.card,.dashboard-surface .card{border-radius:var(--bme-radius-lg);border-color:var(--bme-line);box-shadow:var(--bme-shadow-1)}
.card-header{padding:var(--bme-space-4-5) var(--bme-space-5-5);background:transparent}
.card-body{padding:var(--bme-space-5) var(--bme-space-5-5)}
.card-title{font-weight:var(--bme-fw-semibold)}
.card-footer{border-radius:0 0 var(--bme-radius-lg) var(--bme-radius-lg)}
.card-header-tabs{margin:-6px -8px -18px}
/* buttons: capsules; one black primary per screen */
.btn{min-height:40px;padding:.45rem 1.15rem;border-radius:var(--bme-radius-pill);font-weight:var(--bme-fw-medium);--tblr-btn-focus-box-shadow:0 0 0 2px var(--bme-surface),0 0 0 4px var(--bme-focus)}
.btn-sm{min-height:32px;padding:.2rem .85rem}
.btn-icon{border-radius:50%}
.btn:where(:not([class*="btn-primary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-warning"]):not([class*="btn-ghost"]):not([class*="btn-outline"]):not(.btn-link):not(.btn-close)){--tblr-btn-bg:var(--bme-surface);--tblr-btn-border-color:var(--bme-line);--tblr-btn-color:var(--bme-ink);--tblr-btn-hover-bg:var(--bme-surface);--tblr-btn-hover-border-color:var(--bme-line-strong);--tblr-btn-hover-color:var(--bme-ink);--tblr-btn-box-shadow:var(--bme-shadow-1)}
.btn-primary{--tblr-btn-bg:var(--bme-action);--tblr-btn-border-color:var(--bme-action);--tblr-btn-color:var(--bme-on-action);--tblr-btn-hover-bg:var(--bme-action-hover);--tblr-btn-hover-border-color:var(--bme-action-hover);--tblr-btn-hover-color:var(--bme-on-action);--tblr-btn-active-bg:var(--bme-action-hover);--tblr-btn-active-color:var(--bme-on-action);--tblr-btn-disabled-bg:var(--bme-action);--tblr-btn-disabled-color:var(--bme-on-action);--tblr-btn-box-shadow:none}
.btn-success{--tblr-btn-bg:var(--bme-success-fill);--tblr-btn-border-color:var(--bme-success-fill);--tblr-btn-hover-bg:var(--bme-success-hover);--tblr-btn-hover-border-color:var(--bme-success-hover);--tblr-btn-color:var(--bme-on-color);--tblr-btn-hover-color:var(--bme-on-color)}
.btn-danger{--tblr-btn-bg:var(--bme-danger-fill);--tblr-btn-border-color:var(--bme-danger-fill);--tblr-btn-hover-bg:var(--bme-danger-hover);--tblr-btn-hover-border-color:var(--bme-danger-hover);--tblr-btn-color:var(--bme-on-color);--tblr-btn-hover-color:var(--bme-on-color)}
.btn-outline-primary{--tblr-btn-color:var(--bme-ink);--tblr-btn-border-color:var(--bme-line-strong);--tblr-btn-hover-bg:var(--bme-surface-2);--tblr-btn-hover-color:var(--bme-ink);--tblr-btn-hover-border-color:var(--bme-ink);--tblr-btn-active-bg:var(--bme-surface-3);--tblr-btn-active-color:var(--bme-ink)}
.btn-ghost-secondary{--tblr-btn-hover-bg:var(--bme-surface-3)}
.btn-check:checked+.btn{color:var(--bme-on-action);background:var(--bme-action);border-color:var(--bme-action)}
.table .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-icon){--tblr-btn-color:var(--bme-ink);--tblr-btn-hover-bg:var(--bme-surface-2);--tblr-btn-hover-border-color:var(--bme-line-strong);--tblr-btn-hover-color:var(--bme-ink)}
/* forms */
.form-control,.form-select,.bme-dd>.bme-dd-toggle{border-radius:var(--bme-radius)}
/* the hidden native select under a dropdown fills its box: its inline min-width (9.5rem in the filter bars) pushed the page 1-17px sideways on a phone */
.bme-dd>.bme-dd-native{min-width:0!important;max-width:100%}
.form-control:focus,.form-select:focus,.bme-dd>.bme-dd-toggle.show,.bme-dd>.bme-dd-toggle:focus-visible{border-color:var(--bme-focus);box-shadow:0 0 0 3px var(--bme-primary-soft)}
.form-check-input:checked{background-color:var(--bme-action);border-color:var(--bme-action)}
.input-group>.form-control:not(:last-child){border-radius:var(--bme-radius) 0 0 var(--bme-radius)}
.calendar-btn{border-radius:0 var(--bme-radius) var(--bme-radius) 0}
details.line-details>summary,.tax-details{border-radius:var(--bme-radius-tile)}
/* tables: quiet header, figures tabular */
.table thead th{background:transparent;color:var(--bme-ink-3);font-weight:var(--bme-fw-medium);border-bottom:1px solid var(--bme-line)}
.lookup-table thead th,.table-matrix thead th:first-child{background:var(--bme-surface)}
.card-table tbody tr:hover>*{background-color:var(--bme-surface-2)}
.table tfoot .table-total>*{background:var(--bme-surface-2);border-top:1px solid var(--bme-line-strong)}
/* status: solid pills, the text says the state (never colour alone) */
.badge{padding:.34em .8em;border-radius:var(--bme-radius-pill);font-weight:var(--bme-fw-medium)}
.badge.bg-green-lt{color:var(--bme-success-on)!important;background:var(--bme-success-fill)!important}
.badge.bg-yellow-lt,.badge.bg-orange-lt{color:var(--bme-pending-on)!important;background:var(--bme-pending-fill)!important}
.badge.bg-red-lt{color:var(--bme-danger-on)!important;background:var(--bme-danger-fill)!important}
.badge.bg-blue-lt,.badge.bg-azure-lt,.badge.bg-cyan-lt,.badge.bg-indigo-lt,.badge.bg-purple-lt{color:var(--bme-info-on)!important;background:var(--bme-info-fill)!important}
.badge.bg-secondary-lt{color:var(--bme-draft-on)!important;background:var(--bme-draft-fill)!important}
.badge.bg-teal-lt{color:var(--bme-tag-on)!important;background:var(--bme-tag-fill)!important}
.badge.bg-dark-lt{color:var(--bme-closed-on)!important;background:var(--bme-closed-fill)!important}
.badge.bg-green-lt:before,.badge.bg-yellow-lt:before,.badge.bg-red-lt:before,.badge.bg-secondary-lt:before,.badge.bg-blue-lt:before{display:none}
/* Tabler's orange and yellow text - a warning or a count waiting (my-work's "ทำไมทำไม่ได้", the strategic cards' warnings, the payslip
mail's "ยังไม่ได้ตั้ง", hr/org's count): window #2 found #f76707 at 3.04:1 and #f59f00 at 2.13:1 on white, on master too (design.css
maps .text-warning only); the warning ink is 5.93:1 light and 12.10:1 dark */
.text-orange,.text-yellow{color:var(--bme-warn-fg)!important}
/* filter pills (design.css 10c): on = black, off = white with a line */
.bme-chip{border-color:var(--bme-line);color:var(--bme-ink)}
.bme-chip:hover{border-color:var(--bme-line-strong);background:var(--bme-surface)}
.form-selectgroup-input:checked+.bme-chip{color:var(--bme-on-action);background:var(--bme-action);border-color:var(--bme-action)}
/* tabs */
.nav-tabs .nav-link.active,.card-header-tabs .nav-link.active{color:var(--bme-ink);font-weight:var(--bme-fw-semibold)}
.nav-pills .nav-link.active,.nav-segmented .nav-link.active{color:var(--bme-on-action);background:var(--bme-action)}
.nav-tabs .nav-link:not(.active):hover{color:var(--bme-ink)}
/* menus, dialogs, toasts, alerts */
.dropdown-menu{border-radius:var(--bme-radius-tile);box-shadow:var(--bme-shadow-3)}
.dropdown-menu.show{z-index:var(--bme-z-menu)}
.dropdown-item{border-radius:var(--bme-radius-item)}
/* DS-2b-1: the date picker (flatpickr - vendor/flatpickr.min.css writes fixed light colours) in the theme's tokens, so it follows the light
and the dark theme. The DS-2a round found it white in the dark theme and the other months' days at 1.76:1 (rgba(57,57,57,.3)); they are
--bme-ink-3 now: 4.98:1 light, 5.32:1 dark on the surface, 4.61 / 4.84 under the pointer. A day out of range stays pale, as unusable */
.flatpickr-calendar{background:var(--bme-surface);color:var(--bme-ink);border:1px solid var(--bme-line);border-radius:var(--bme-radius-tile);box-shadow:var(--bme-shadow-3)}
.flatpickr-calendar.arrowTop:before{border-bottom-color:var(--bme-line)}.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--bme-surface)}
.flatpickr-calendar.arrowBottom:before{border-top-color:var(--bme-line)}.flatpickr-calendar.arrowBottom:after{border-top-color:var(--bme-surface)}
.flatpickr-months .flatpickr-month,.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{color:var(--bme-ink);fill:var(--bme-ink)}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--bme-primary-text)}
.flatpickr-current-month input.cur-year{color:var(--bme-ink)}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:var(--bme-surface);color:var(--bme-ink)}
.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:var(--bme-ink)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:var(--bme-ink)}
span.flatpickr-weekday{color:var(--bme-muted)}
.flatpickr-day{color:var(--bme-ink)}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--bme-ink-3)}
.flatpickr-day:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{background:var(--bme-surface-2);border-color:var(--bme-surface-2)}
.flatpickr-day.today{border-color:var(--bme-line-strong)}
.flatpickr-day.today:hover,.flatpickr-day.today:focus{background:var(--bme-surface-3);border-color:var(--bme-line-strong);color:var(--bme-ink)}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{background:var(--bme-action);border-color:var(--bme-action);color:var(--bme-on-action)}
.flatpickr-day.inRange{background:var(--bme-primary-soft);border-color:var(--bme-primary-soft);color:var(--bme-primary-text)}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:var(--bme-line-strong)}
.flatpickr-calendar.hasTime .flatpickr-time{border-top-color:var(--bme-line)}
.flatpickr-time input,.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{color:var(--bme-ink)}
.flatpickr-time input:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{background:var(--bme-surface-2)}
/* DS-2b-1: a row of joined buttons wider than a phone (WP9-6a's statements: five tabs, 810px on master) scrolls inside itself instead of
pushing the page sideways - except one holding a dropdown, whose menu the scroll would clip */
@media (max-width:575.98px){
.btn-group:not(:has(.dropdown-menu)){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.btn-group:not(:has(.dropdown-menu))>.btn{flex:0 0 auto;white-space:nowrap}
/* POLISH-5: a row of tabs is one line that scrolls the same way (the tax pages' nine took three rows at 390); nav-strip.mjs puts the
chosen one in view */
.nav-pills{flex-wrap:nowrap;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.nav-pills>.nav-link,.nav-pills>.nav-item{flex:0 0 auto;white-space:nowrap}
/* POLISH-3: a list a phone reads row by row (.table-stack: the master lists, the settings lists, the tax calendar) - each row a block,
each cell a line named by its column (app.js plainTable data-label), its actions at the row's end; nothing off the screen's edge */
.table-stack thead{display:none}
.table-stack,.table-stack tbody,.table-stack tr,.table-stack td{display:block;width:100%}
.table-stack tr{padding:var(--bme-space-2) 0;border-bottom:1px solid var(--bme-line)}
.table-stack td{display:flex;align-items:center;justify-content:space-between;gap:var(--bme-space-3);min-width:0;padding:var(--bme-space-1) var(--bme-space-4);border:0;text-align:end}
.table-stack td[data-label]:not([data-label=""])::before{content:attr(data-label);flex:0 0 40%;color:var(--bme-muted);text-align:start}
.table-stack td>.form-control,.table-stack td>.form-select,.table-stack td>.bme-dd{flex:1 1 auto;width:auto;min-width:0}
.table-stack td.actions-col{justify-content:flex-end;width:100%}
.table-stack td.cell-clip{min-width:0}.table-stack td:nth-child(2){min-width:0}
.table-stack td:empty{display:none}
/* POLISH-2: the period board's month heads its card */
.period-board.table-stack td:first-child{justify-content:flex-start;font-weight:var(--bme-fw-semibold)}.period-board.table-stack td:first-child::before{display:none}
}
/* POLISH-2 (the period board: 24 months x 3 modules each with a green pill alike): open is the usual state - quiet words; colour
is kept for what stands apart (closed, waiting, reopened, filed) */
.period-open{color:var(--bme-muted)}
/* F1 (the owner's approval of the item-10 walk, 2026-10-09): a link drawn as a button ("ทำไม?" beside a refused command, app.js whyLink)
in the link token - Tabler's own .btn-link colour (7,124,234) was 4.13:1 on white and on the dark surface; --bme-primary-text is
6.70:1 light (#1d4ed8 on #fff) and 8.25:1 dark (#8ab4ff on #171c25) */
.btn-link,.btn-link:hover,.btn-link:focus{color:var(--bme-primary-text)}
/* the owner 2026-10-09 (option ก): the reason beside a refused command is an ⓘ - the link token (6.70:1 / 8.25:1), its glyph unchanged,
a 44px target on a phone through its padding, a visible focus */
.why-link{display:inline-flex;align-items:center;justify-content:center;padding:var(--bme-space-1);border-radius:var(--bme-radius-sm);vertical-align:middle}
.why-link:focus-visible{outline:2px solid var(--bme-primary-text);outline-offset:2px}
@media (pointer:coarse),(max-width:767.98px){.why-link{min-width:44px;min-height:44px;padding:var(--bme-space-2-5)}}
/* line A's review: a ghost button the board shows disabled (no right to close) keeps an outline and muted words - two fades (ghost,
disabled) left the red ปิดรวม at about 2.8:1 */
.period-board .btn:disabled,.period-board .btn.disabled{opacity:1;color:var(--bme-muted);border-color:var(--bme-line-strong)}
.dropdown-item.active,.dropdown-item:active{background:var(--bme-surface-3);color:var(--bme-ink)}
.modal-content{border-radius:var(--bme-radius-lg);border-color:var(--bme-line)}
.modal-footer{border-radius:0 0 var(--bme-radius-lg) var(--bme-radius-lg);background:var(--bme-surface)}
.modal-backdrop{--tblr-backdrop-bg:var(--bme-backdrop)}
.toast{border:0;border-radius:var(--bme-radius-tile);background:var(--bme-action);box-shadow:var(--bme-shadow-2)}
.toast .toast-body{color:var(--bme-on-action)}
.toast-ok .toast-body>.icon{color:var(--bme-toast-ok)}
.toast-err .toast-body>.icon{color:var(--bme-toast-err)}
/* HOME-1: a toast's one action (เลิกทำ) - outlined in the toast's own ink at the end of its line, the toast's text size */
.toast .toast-action{--tblr-btn-color:var(--bme-on-action);--tblr-btn-bg:transparent;--tblr-btn-border-color:color-mix(in srgb,var(--bme-on-action) 55%,transparent);--tblr-btn-hover-color:var(--bme-on-action);--tblr-btn-hover-bg:color-mix(in srgb,var(--bme-on-action) 14%,transparent);--tblr-btn-hover-border-color:var(--bme-on-action);--tblr-btn-active-color:var(--bme-on-action);--tblr-btn-active-bg:color-mix(in srgb,var(--bme-on-action) 22%,transparent);--tblr-btn-active-border-color:var(--bme-on-action);flex:none;align-self:center;margin-left:auto;font-size:inherit;white-space:nowrap}
.alert{border-radius:var(--bme-radius-tile)}
.empty-state>.icon{background:var(--bme-pastel-sky);color:var(--bme-ink)}
.pager-bar .page-item.active .page-link{background:var(--bme-action);border-color:var(--bme-action);color:var(--bme-on-action)}
.pager-bar,.report-filter-foot{background:transparent}
/* the home page: section 6 */
/* a document: the impact card (its place in the cycle: section 6) */
.cycle-step{border-radius:var(--bme-radius-tile);border-color:var(--bme-line)}
.cycle-step.is-active{border-color:var(--bme-action);background:var(--bme-surface);box-shadow:0 0 0 1px var(--bme-action)}
.grand strong{color:var(--bme-ink)}
.impact-banner{border-radius:var(--bme-radius);background:var(--bme-pastel-sky);color:var(--bme-ink)}
.paper-stage{border-radius:var(--bme-radius-lg)}
.kpi-foot{border-top-color:var(--bme-line)}
.kpi-up{color:var(--bme-ok-fg)}.kpi-down{color:var(--bme-err-fg)}
/* ---------- 5. v2 patterns the app does not draw yet (see patterns.html) ---------- */
/* a status pill and the pair (the document's state + the money's state) */
.bme-status{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 var(--bme-space-2-5);border-radius:var(--bme-radius-pill);font-size:var(--bme-fs-xs);font-weight:var(--bme-fw-medium);line-height:16px;white-space:nowrap;background:var(--bme-draft-fill);color:var(--bme-draft-on)}
.bme-status--pending{background:var(--bme-pending-fill);color:var(--bme-pending-on)}
.bme-status--success{background:var(--bme-success-fill);color:var(--bme-success-on)}
.bme-status--danger{background:var(--bme-danger-fill);color:var(--bme-danger-on)}
.bme-status--info{background:var(--bme-info-fill);color:var(--bme-info-on)}
.bme-status--outline{background:transparent;color:var(--bme-muted);box-shadow:inset 0 0 0 1px var(--bme-line-strong)}
.bme-status-pair{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--bme-space-1-5)}
/* DS-2b-5: the heading that carries the pair never runs past a phone's screen - its row wraps under the title, and a long money's
words wrap inside their badge (a bounced deposit's with what is left of it, 2026-10-07 at 390); one line is 24px as before */
.section-head:has(>.status-label [data-status-pair]){flex-wrap:wrap}
.status-label:has([data-status-pair]){flex-wrap:wrap;min-width:0;max-width:100%}
.bme-status-pair{max-width:100%}
.bme-status-pair>.bme-status{max-width:100%;height:auto;min-height:24px;padding-block:var(--bme-space-1);white-space:normal}
/* "what the system will record" in plain words, before the person confirms */
.bme-explain{display:flex;flex-direction:column;gap:var(--bme-space-2-5);padding:var(--bme-space-4-5) var(--bme-space-5);border-radius:var(--bme-radius-lg);background:var(--bme-surface-2)}
.bme-explain-head{display:flex;align-items:center;gap:var(--bme-space-2);font-weight:var(--bme-fw-semibold);color:var(--bme-ink)}
.bme-explain-row{display:flex;justify-content:space-between;gap:var(--bme-space-4);color:var(--bme-muted)}
.bme-explain-row b{color:var(--bme-ink);font-weight:var(--bme-fw-medium);font-variant-numeric:tabular-nums;white-space:nowrap}
.bme-explain-row.is-total{padding-top:var(--bme-space-3);border-top:1px dashed var(--bme-line-strong);color:var(--bme-ink);font-weight:var(--bme-fw-semibold)}
.bme-explain-row.is-total b{font-size:var(--bme-fs-xl);font-weight:var(--bme-fw-semibold)}
.bme-explain-note{font-size:var(--bme-fs-xs);color:var(--bme-ink-3)}
/* a long form's actions, floating above the dock */
.bme-floatbar{position:sticky;bottom:calc(var(--bme-dock-h) + 28px);z-index:var(--bme-z-floatbar);display:flex;align-items:center;gap:var(--bme-space-3);width:max-content;max-width:100%;margin:var(--bme-space-4) auto 0;padding:var(--bme-space-1-5) var(--bme-space-1-5) var(--bme-space-1-5) var(--bme-space-4-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-pill);background:var(--bme-glass);-webkit-backdrop-filter:var(--bme-blur);backdrop-filter:var(--bme-blur);box-shadow:var(--bme-shadow-2)}
.bme-floatbar-text{font-size:var(--bme-fs-sm);color:var(--bme-muted);white-space:nowrap}
.bme-floatbar-text b{color:var(--bme-ink);font-variant-numeric:tabular-nums}
/* DS-2b-3c: on a phone the bar's words take their own line over its buttons, never wider than the screen */
@media (max-width:575.98px){
.bme-floatbar{flex-wrap:wrap;justify-content:flex-end;width:auto;border-radius:var(--bme-radius-lg)}
.bme-floatbar-text{flex:1 1 100%;white-space:normal}
}
/* DS-2b-3d: parked - an ordinary row at the form's end while the card starts too low for the bar to clear the dock (floatbar.mjs);
floating again, it rises in - with motion on only */
.bme-floatbar[data-parked]{position:static}
@media screen and (prefers-reduced-motion:no-preference){
.bme-floatbar[data-rise]{animation:bme-rise .2s var(--bme-ease)}
}
/* the assistant's card and its gradient word */
.bme-ai{display:flex;flex-direction:column;gap:var(--bme-space-2-5);padding:var(--bme-space-5) var(--bme-space-5-5);border-radius:var(--bme-radius-lg);color:var(--bme-ink);background:radial-gradient(120% 90% at 0% 0%,var(--bme-pastel-sky) 0%,transparent 55%),radial-gradient(120% 90% at 100% 100%,var(--bme-pastel-lilac) 0%,transparent 55%),var(--bme-surface);border:1px solid var(--bme-line)}
.bme-ai-text{background:linear-gradient(90deg,var(--bme-ai-1),var(--bme-ai-2) 55%,var(--bme-ai-3));-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- 6. Layout and graphics: proportions, the home bento, illustrations, motion ----------
The body text stays 14px (DS-1a-2); what grows is the air between parts, the page title and the key figures. The illustrations
(vendor/v2-art/*.svg) are BME's own; motion is short, eases out, and stops under prefers-reduced-motion. */
#workspace.py-4{padding-top:var(--bme-space-7)!important}
.page-heading,.page-header{margin-bottom:var(--bme-space-6)}
.page-title{font-size:var(--bme-fs-page);line-height:var(--bme-lh-heading);letter-spacing:var(--bme-track-title)}
.page-pretitle{margin-bottom:var(--bme-space-1);font-size:var(--bme-fs-sm)}
/* 10px between the page's buttons from a tablet up; a phone keeps 8px, which its two-to-a-row buttons (calc(50% - 4px) in design.css) count on */
@media (min-width:768px){.heading-actions{gap:var(--bme-space-2-5)}}
/* a soft colour wash behind the top of every page */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:460px;z-index:-1;pointer-events:none;
background:radial-gradient(38% 70% at 8% 0%,color-mix(in srgb,var(--bme-pastel-yellow) 75%,transparent),transparent 72%),radial-gradient(34% 64% at 92% 0%,color-mix(in srgb,var(--bme-pastel-sky) 75%,transparent),transparent 72%),radial-gradient(30% 54% at 56% 0%,color-mix(in srgb,var(--bme-pastel-lilac) 55%,transparent),transparent 72%)}
/* cards that are links lift a little under the pointer */
:is(a.card,.dashboard-stat,.quick-action,.cycle-step,.app-tile){transition:transform .2s var(--bme-ease),box-shadow .2s var(--bme-ease),border-color .2s}
:is(a.card,.dashboard-stat,.quick-action,.cycle-step,.app-tile):hover{transform:translateY(-3px);box-shadow:var(--bme-shadow-2)}
/* icon tiles: pastel with a soft inner light, the "3D sticker" feel */
.stat-icon,.quick-action .stat-icon{border-radius:var(--bme-radius-icon);box-shadow:var(--bme-shadow-sticker)}
.stat-icon.bg-blue-lt,.stat-icon.bg-azure-lt,.stat-icon.bg-cyan-lt{background:var(--bme-pastel-sky)!important;color:var(--bme-ink)!important}
.stat-icon.bg-indigo-lt,.stat-icon.bg-purple-lt{background:var(--bme-pastel-lilac)!important;color:var(--bme-ink)!important}
.stat-icon.bg-green-lt{background:var(--bme-pastel-mint)!important;color:var(--bme-ink)!important}
.stat-icon.bg-orange-lt,.stat-icon.bg-red-lt{background:var(--bme-pastel-peach)!important;color:var(--bme-ink)!important}
.stat-icon.bg-yellow-lt{background:var(--bme-pastel-yellow)!important;color:var(--bme-ink)!important}
:is(.topmenu-btn,.dock-btn):not(.on):not(.open) .icon{box-shadow:var(--bme-shadow-key),0 0 0 1px var(--bme-line)}
.topmenu-btn[data-group]:not([data-group="home"]):not(.on):not(.open) .icon{box-shadow:var(--bme-shadow-key)}
/* the home page (dashboard-ui.mjs, dashboard.css): a 12-column bento - the hero and the shortcut tiles side by side, then the figures */
.dashboard-surface{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--bme-space-5)}
.dashboard-surface>*{grid-column:1/-1;margin:0!important}
.dashboard-surface>.page-heading{margin-bottom:var(--bme-space-1)!important}
.dashboard-surface>.dashboard-welcome{grid-column:span 8}
.dashboard-surface>.quick-actions{grid-column:span 4}
.dashboard-kpis,.dashboard-main-grid,.dashboard-two-grid{gap:var(--bme-space-5)}
/* the hero: big words on the left, the illustration on the right, the period as a glass chip */
.dashboard-welcome{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--bme-space-7);min-height:320px;padding:var(--bme-space-10) min(46%,460px) var(--bme-space-8) var(--bme-space-10);overflow:hidden;border:0;border-radius:var(--bme-radius-frame);color:var(--bme-ink);box-shadow:var(--bme-shadow-1);
background:radial-gradient(70% 120% at 0% 0%,var(--bme-pastel-yellow) 0%,transparent 62%),radial-gradient(60% 120% at 100% 100%,var(--bme-pastel-lilac) 0%,transparent 66%),radial-gradient(40% 80% at 70% 0%,var(--bme-pastel-sky) 0%,transparent 70%),var(--bme-surface)}
.dashboard-welcome::after{content:"";display:block;position:absolute;top:auto;right:28px;bottom:20px;width:min(42%,420px);height:auto;aspect-ratio:420/260;border:0;border-radius:0;background:url("./vendor/v2-art/hero.svg") center/contain no-repeat;pointer-events:none;animation:bme-float 7s ease-in-out infinite}
.dashboard-welcome>div{position:relative;z-index:1}
.dashboard-welcome h2{margin:0 0 var(--bme-space-2-5);font-size:var(--bme-fs-hero);line-height:var(--bme-lh-tight);letter-spacing:var(--bme-track-display);font-weight:var(--bme-fw-semibold);color:var(--bme-ink)}
.dashboard-welcome p{max-width:30em;font-size:var(--bme-fs-md);color:var(--bme-muted)}
.welcome-period{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--bme-space-0-5) var(--bme-space-2-5);min-width:0;padding:var(--bme-space-3) var(--bme-space-4-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-bubble);background:var(--bme-glass);-webkit-backdrop-filter:var(--bme-blur);backdrop-filter:var(--bme-blur);box-shadow:var(--bme-shadow-1)}
.welcome-period span{color:var(--bme-muted);font-size:var(--bme-fs-sm)}
.welcome-period strong{margin:0;font-size:var(--bme-fs-3xl);line-height:var(--bme-lh-snug);font-weight:var(--bme-fw-semibold);color:var(--bme-ink)}
.welcome-period small{flex-basis:100%;color:var(--bme-muted)}
/* the shortcuts: a card of pastel tiles, three to a row (the fifth takes two places) */
.quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:1fr;gap:var(--bme-space-2-5);align-content:stretch;padding:var(--bme-space-4-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-frame);background:var(--bme-surface);box-shadow:var(--bme-shadow-1);overflow:visible}
.quick-actions-copy{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--bme-space-0-5);padding:var(--bme-space-0-5) var(--bme-space-1) var(--bme-space-1-5);background:none}
.quick-actions-copy strong{font-size:var(--bme-fs-lead);font-weight:var(--bme-fw-semibold)}
.quick-kicker{color:var(--bme-ai-ink);letter-spacing:var(--bme-track-caps)}
.quick-action{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--bme-space-2-5);min-height:80px;padding:var(--bme-space-3-5);border:1px solid var(--bme-line)!important;border-radius:var(--bme-radius-tile-lg);background:var(--bme-surface);color:var(--bme-ink);font-size:var(--bme-fs-base);font-weight:var(--bme-fw-semibold)}
.quick-action>.icon:last-child{position:absolute;top:16px;right:14px;width:16px;height:16px;color:var(--bme-ink-3);transition:transform .2s}
.quick-action:hover>.icon:last-child{transform:translateX(3px)}
.quick-action .stat-icon{width:44px;height:44px}
.quick-action .stat-icon .icon{width:22px;height:22px}
.quick-action:hover,.quick-action:focus-visible{background:var(--bme-surface);color:var(--bme-ink);border-color:transparent!important}
.quick-action:last-child{grid-column:span 2;flex-direction:row;align-items:center;justify-content:flex-start;min-height:0}
.quick-action:last-child>.icon:last-child{top:50%;margin-top:-8px}
/* the four figures: a big number, a soft colour blob in the corner */
.dashboard-stat{overflow:hidden}
.dashboard-stat:before{display:none}
.dashboard-stat::after{content:"";position:absolute;right:-48px;bottom:-72px;width:190px;height:190px;border-radius:50%;background:var(--kpi-tint,var(--bme-pastel-sky));opacity:.6;pointer-events:none;transition:transform .4s var(--bme-ease)}
.dashboard-stat:hover::after{transform:scale(1.12)}
.dashboard-stat.stat-orange{--kpi-tint:var(--bme-pastel-peach)}.dashboard-stat.stat-cyan{--kpi-tint:var(--bme-pastel-mint)}.dashboard-stat.stat-purple{--kpi-tint:var(--bme-pastel-lilac)}
.dashboard-stat .card-body{position:relative;z-index:1;padding:var(--bme-space-5-5) var(--bme-space-6)}
.dashboard-stat .stat-icon{width:44px;height:44px}
.stat-value{margin:var(--bme-space-4-5) 0 var(--bme-space-1-5);font-size:var(--bme-fs-figure);font-weight:var(--bme-fw-semibold);letter-spacing:var(--bme-track-display)}
/* the dashboard's cards: no rule under the heading, more padding */
.dashboard-surface .card-header{min-height:0;padding:var(--bme-space-5-5) var(--bme-space-6) var(--bme-space-1-5);border-bottom:0}
.dashboard-surface .card-body{padding:var(--bme-space-4) var(--bme-space-6) var(--bme-space-6)}
.dashboard-surface .card-title{font-size:var(--bme-fs-lg)}
.dashboard-surface .recent-card .card-header{padding-bottom:var(--bme-space-3-5)}
/* a cycle overview (cycle-overview-ui.mjs): the steps as one row of chips - the step's icon, its name, its amount and its count; a step
with work in its tint (the owner chose option 5, 2026-10-06). The icons follow data-step (Tabler Icons, MIT). */
/* step icons (Tabler Icons, MIT) - used as masks, so they take the text colour */
.cycle-step{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /%3E %3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E %3C/svg%3E")}
.cycle-step[data-step="quotation"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 3v4a1 1 0 0 0 1 1h4' /%3E %3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2' /%3E %3Cpath d='M9 17h6' /%3E %3Cpath d='M9 13h6' /%3E %3C/svg%3E")}
.cycle-step[data-step="sales_order"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2' /%3E %3Cpath d='M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2' /%3E %3Cpath d='M9 12l.01 0' /%3E %3Cpath d='M13 12l2 0' /%3E %3Cpath d='M9 16l.01 0' /%3E %3Cpath d='M13 16l2 0' /%3E %3C/svg%3E")}
.cycle-step[data-step="invoice"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2m4 -14h6m-6 4h6m-2 4h2' /%3E %3C/svg%3E")}
.cycle-step[data-step="billing"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 3v4a1 1 0 0 0 1 1h4' /%3E %3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2' /%3E %3Cpath d='M9 7l1 0' /%3E %3Cpath d='M9 13l6 0' /%3E %3Cpath d='M13 17l2 0' /%3E %3C/svg%3E")}
.cycle-step[data-step="receipt"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 15h-3a1 1 0 0 1 -1 -1v-8a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v3' /%3E %3Cpath d='M7 10a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1l0 -8' /%3E %3Cpath d='M12 14a2 2 0 1 0 4 0a2 2 0 0 0 -4 0' /%3E %3C/svg%3E")}
.cycle-step[data-step="collection"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6' /%3E %3Cpath d='M9 17v1a3 3 0 0 0 6 0v-1' /%3E %3Cpath d='M21 6.727a11.05 11.05 0 0 0 -2.794 -3.727' /%3E %3Cpath d='M3 6.727a11.05 11.05 0 0 1 2.792 -3.727' /%3E %3C/svg%3E")}
.cycle-step[data-step="purchase_request"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255 8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977 -2.304' /%3E %3Cpath d='M9 11v-5a3 3 0 0 1 6 0v5' /%3E %3C/svg%3E")}
.cycle-step[data-step="rfq"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 20l10 0' /%3E %3Cpath d='M6 6l6 -1l6 1' /%3E %3Cpath d='M12 3l0 17' /%3E %3Cpath d='M9 12l-3 -6l-3 6a3 3 0 0 0 6 0' /%3E %3Cpath d='M21 12l-3 -6l-3 6a3 3 0 0 0 6 0' /%3E %3C/svg%3E")}
.cycle-step[data-step="purchase_order"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 3v4a1 1 0 0 0 1 1h4' /%3E %3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2' /%3E %3Cpath d='M9 15l2 2l4 -4' /%3E %3C/svg%3E")}
.cycle-step[data-step="receive"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E %3Cpath d='M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E %3Cpath d='M5 17h-2v-4m-1 -8h11v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5' /%3E %3Cpath d='M3 9l4 0' /%3E %3C/svg%3E")}
.cycle-step[data-step="inspection"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0' /%3E %3Cpath d='M21 21l-6 -6' /%3E %3Cpath d='M7 10l2 2l4 -4' /%3E %3C/svg%3E")}
.cycle-step[data-step="bill"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 3v4a1 1 0 0 0 1 1h4' /%3E %3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2' /%3E %3Cpath d='M9 7l1 0' /%3E %3Cpath d='M9 13l6 0' /%3E %3Cpath d='M13 17l2 0' /%3E %3C/svg%3E")}
.cycle-step[data-step="payment"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8' /%3E %3Cpath d='M3 10l18 0' /%3E %3Cpath d='M7 15l.01 0' /%3E %3Cpath d='M11 15l2 0' /%3E %3C/svg%3E")}
.cycle-step[data-step="wht"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M9 14l6 -6' /%3E %3Cpath d='M9 8.5a.5 .5 0 1 0 1 0a.5 .5 0 1 0 -1 0' fill='black' /%3E %3Cpath d='M14 13.5a.5 .5 0 1 0 1 0a.5 .5 0 1 0 -1 0' fill='black' /%3E %3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2' /%3E %3C/svg%3E")}
.cycle-step[data-step="wht_over"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E %3Cpath d='M12 8v4' /%3E %3Cpath d='M12 16h.01' /%3E %3C/svg%3E")}
.cycle-step[data-step="credit"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2' /%3E %3Cpath d='M15 14v-2a2 2 0 0 0 -2 -2h-4l2 -2m0 4l-2 -2' /%3E %3C/svg%3E")}
.cycle-step[data-step="debit"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2m4 -14h6m-6 4h6m-2 4h2' /%3E %3C/svg%3E")}
.cycle-step[data-step="cn_approval"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M21 17.85h-18c0 -4.05 1.421 -4.05 3.79 -4.05c5.21 0 1.21 -4.59 1.21 -6.8a4 4 0 1 1 8 0c0 2.21 -4 6.8 1.21 6.8c2.369 0 3.79 0 3.79 4.05' /%3E %3Cpath d='M5 21h14' /%3E %3C/svg%3E")}
.cycle-step[data-step="supplier_cn"]{--step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2' /%3E %3Cpath d='M15 14v-2a2 2 0 0 0 -2 -2h-4l2 -2m0 4l-2 -2' /%3E %3C/svg%3E")}
button.cycle-step:nth-of-type(1){--step-tint:var(--bme-pastel-yellow)}button.cycle-step:nth-of-type(2){--step-tint:var(--bme-pastel-peach)}
button.cycle-step:nth-of-type(3){--step-tint:var(--bme-pastel-mint)}button.cycle-step:nth-of-type(4){--step-tint:var(--bme-pastel-sky)}
button.cycle-step:nth-of-type(5){--step-tint:var(--bme-pastel-lilac)}button.cycle-step:nth-of-type(6){--step-tint:var(--bme-pastel-pink)}
button.cycle-step:nth-of-type(7){--step-tint:var(--bme-pastel-yellow)}button.cycle-step:nth-of-type(8){--step-tint:var(--bme-pastel-peach)}
.cycle-steps{flex-wrap:wrap;align-items:center;gap:var(--bme-space-2);margin-bottom:var(--bme-space-3-5)}
.cycle-step{position:relative;flex:0 1 auto;flex-direction:row;align-items:center;gap:var(--bme-space-2-5);min-height:0;padding:7px var(--bme-space-2) 7px 7px;border:1px solid var(--bme-line);border-radius:var(--bme-radius-pill);background:var(--bme-surface);box-shadow:var(--bme-shadow-1)}
.cycle-step:not(.is-empty){border-color:transparent;background:var(--step-tint,var(--bme-pastel-sky))}
.cycle-step::before{content:"";position:relative;inset:auto;flex:none;width:34px;height:34px;border-radius:50%;background:var(--bme-surface);box-shadow:var(--bme-shadow-dot)}
.cycle-step.is-empty::before{background:var(--bme-surface-2);box-shadow:none}
.cycle-step::after{content:"";position:absolute;top:50%;left:15px;width:18px;height:18px;margin-top:-9px;background:var(--bme-ink);-webkit-mask:var(--step-icon) center/contain no-repeat;mask:var(--step-icon) center/contain no-repeat}
.cycle-step.is-empty::after{background:var(--bme-ink-3)}
.cycle-step-label{padding:0;font-size:var(--bme-fs-table);font-weight:var(--bme-fw-semibold);white-space:nowrap}
.cycle-step.is-empty .cycle-step-label{color:var(--bme-muted);font-weight:var(--bme-fw-medium)}
.cycle-step-count{order:3;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;margin:0;padding:0 var(--bme-space-2-5);border-radius:var(--bme-radius-pill);background:var(--bme-action);color:var(--bme-on-action);font-size:var(--bme-fs-sm);font-weight:var(--bme-fw-semibold)}
.cycle-step-count small{display:none}
.cycle-step.is-empty .cycle-step-count{background:var(--bme-surface-3);color:var(--bme-muted)}
.cycle-step-amount{order:2;font-size:var(--bme-fs-sm);color:var(--bme-ink);white-space:nowrap}
.cycle-step-note{order:4;display:inline-flex;padding:var(--bme-space-0-5) 9px;border-radius:var(--bme-radius-pill);background:var(--bme-pending-fill);color:var(--bme-pending-on);font-size:var(--bme-fs-chip);font-weight:var(--bme-fw-medium);white-space:nowrap}
.cycle-step-note.is-late{background:var(--bme-danger-fill);color:var(--bme-danger-on)}
.cycle-step-sep{opacity:.5;font-size:var(--bme-fs-lg)}
.cycle-step.is-active{box-shadow:0 0 0 2px var(--bme-action)}
/* a document: more air, the grand total as a headline */
/* a document: its place in its cycle (document-chain.mjs) - one card: the documents before and after it as chips (this one in black,
the next one not made yet dashed), its life as pills in one rail (done with a check, the step now in black; the owner chose
option 4, 2026-10-06), and what can still be undone as a quiet note */
:root{--doc-ic-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 3v4a1 1 0 0 0 1 1h4' /%3E %3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2' /%3E %3Cpath d='M9 9l1 0' /%3E %3Cpath d='M9 13l6 0' /%3E %3Cpath d='M9 17l6 0' /%3E %3C/svg%3E");--doc-ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 5l0 14' /%3E %3Cpath d='M5 12l14 0' /%3E %3C/svg%3E");--doc-ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 12l5 5l10 -10' /%3E %3C/svg%3E");--doc-ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E %3Cpath d='M12 9h.01' /%3E %3Cpath d='M11 12h1v4h1' /%3E %3C/svg%3E")}
.doc-cycle{display:flex;flex-direction:column;gap:var(--bme-space-4);margin:0 0 var(--bme-space-5);padding:var(--bme-space-4) var(--bme-space-5) var(--bme-space-3-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-lg);background:var(--bme-surface);box-shadow:var(--bme-shadow-1)}
.doc-chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bme-space-2)}
.doc-chain-node{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:var(--bme-space-2);max-width:none;min-width:0;padding:5px var(--bme-space-1-5) 5px 5px;border:1px solid var(--bme-line);border-radius:var(--bme-radius-pill);background:var(--bme-surface);color:var(--bme-ink);font-size:var(--bme-fs-sm);line-height:var(--bme-lh-tight);white-space:nowrap;text-decoration:none}
.doc-chain-node::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--bme-pastel-sky)}
.doc-chain-node::after{content:"";position:absolute;top:50%;left:12px;width:16px;height:16px;margin-top:-8px;background:var(--bme-ink);-webkit-mask:var(--doc-ic-file) center/contain no-repeat;mask:var(--doc-ic-file) center/contain no-repeat}
.doc-chain-kind{font-weight:var(--bme-fw-semibold);overflow:visible}
.doc-chain-no{color:var(--bme-muted)}
.doc-chain-open{padding:var(--bme-space-0-5) 9px;border-radius:var(--bme-radius-pill);background:var(--bme-pending-fill);color:var(--bme-pending-on);font-size:var(--bme-fs-chip);font-weight:var(--bme-fw-medium)}
.doc-chain-open.is-done{background:var(--bme-success-fill);color:var(--bme-success-on)}
/* DS-2b-5: on a document's own page the heading's status pair tells where its money stands (the same openPart) - its own node does
not say it again; the other nodes and the next step keep theirs (line A agreed, 2026-10-07) */
.doc-chain-node.is-self .doc-chain-open{display:none}
a.doc-chain-node:hover{border-color:var(--bme-line-strong);color:var(--bme-ink)}
.doc-chain-node.is-self{border-color:var(--bme-action);background:var(--bme-action);color:var(--bme-on-action)}
.doc-chain-node.is-self .doc-chain-no{color:var(--bme-on-action);opacity:.72}
.doc-chain-node.is-self .doc-chain-open{color:var(--bme-pending-on)}
.doc-chain-node.is-self .doc-chain-open.is-done{color:var(--bme-success-on)}
.doc-chain-node.is-self::before{background:color-mix(in srgb,var(--bme-on-action) 18%,transparent)}
.doc-chain-node.is-self::after{background:var(--bme-on-action)}
.doc-chain-node.is-todo{border-style:dashed;border-color:var(--bme-line-strong);background:transparent;color:var(--bme-muted)}
.doc-chain-node.is-todo::before{background:var(--bme-surface-2)}
.doc-chain-node.is-todo::after{background:var(--bme-ink-3);-webkit-mask-image:var(--doc-ic-plus);mask-image:var(--doc-ic-plus)}
.doc-chain-node.is-todo .doc-chain-kind{color:var(--bme-ink)}
.doc-chain-sep{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bme-surface-2);color:var(--bme-ink-3);font-size:var(--bme-fs-sm);line-height:var(--bme-lh-solid)}
.doc-life-undo{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:var(--bme-space-1-5);padding:var(--bme-space-1) var(--bme-space-3) var(--bme-space-1) 30px;border-radius:var(--bme-radius-pill);background:var(--bme-surface-2);color:var(--bme-muted);font-size:var(--bme-fs-xs)}
.doc-life-undo::before{content:"";position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--bme-ink-3);-webkit-mask:var(--doc-ic-info) center/contain no-repeat;mask:var(--doc-ic-info) center/contain no-repeat}
.doc-life{display:flex;flex-wrap:wrap;gap:var(--bme-space-1);width:max-content;max-width:100%;margin:0;padding:var(--bme-space-1);border-radius:var(--bme-radius-pill);background:var(--bme-surface-2);list-style:none;font-size:var(--bme-fs-label)}
.doc-life-step{position:relative;display:inline-flex;align-items:center;gap:var(--bme-space-1-5);padding:var(--bme-space-1-5) var(--bme-space-3) var(--bme-space-1-5) 7px;border-radius:var(--bme-radius-pill);color:var(--bme-muted);white-space:nowrap}
.doc-life-step::before{content:"";position:static;flex:none;width:18px;height:18px;border:1.5px solid var(--bme-line-strong);border-radius:50%;background:transparent;opacity:1}
.doc-life-step.is-done{background:var(--bme-surface);color:var(--bme-ink);box-shadow:var(--bme-shadow-hair),0 0 0 1px var(--bme-line)}
.doc-life-step.is-done::before{border:0;background:var(--bme-success-fill) var(--doc-ic-check) center/11px no-repeat}
.doc-life-step.is-now{background:var(--bme-action);color:var(--bme-on-action);font-weight:var(--bme-fw-semibold)}
.doc-life-step.is-now::before{border-color:var(--bme-on-action);background:radial-gradient(circle,var(--bme-on-action) 0 3.5px,transparent 4px)}
.doc-life-when{color:inherit;font-size:var(--bme-fs-chip);font-weight:var(--bme-fw-regular);opacity:.65}
.workspace-grid{gap:var(--bme-space-5)}
.grand strong{font-size:var(--bme-fs-grand);letter-spacing:var(--bme-track-title)}
/* empty states: the icon as a large pastel sticker */
.empty-state>.icon{width:34px;height:34px;padding:var(--bme-space-5-5);border-radius:var(--bme-radius-lg);background:var(--bme-pastel-sky);box-shadow:var(--bme-shadow-sticker-lg);transform:rotate(-4deg)}
/* a group's page */
.group-page{gap:var(--bme-space-5)}
@media (max-width:767.98px){
.doc-cycle{padding:var(--bme-space-3-5)}
/* a chip that wraps keeps its icon on the first line and its text in one column beside it */
.doc-chain-node{flex-wrap:wrap;row-gap:var(--bme-space-1);min-height:42px;padding:5px var(--bme-space-2-5) 5px 43px;white-space:normal;border-radius:var(--bme-radius-chip)}
.doc-chain-node::before{position:absolute;top:5px;left:5px}
.doc-chain-node::after{top:12px;margin-top:0}
.doc-chain-sep{display:none}
.doc-life{border-radius:var(--bme-radius-tile-lg)}
/* a phone: a card's sides back to the original's 16px - at 22px rows that fitted wrapped (a document's tabs, the journal's buttons) */
.card-header{padding:var(--bme-space-3-5) var(--bme-space-4)}
.card-body{padding:var(--bme-space-4)}
.tabs-header .card-header-tabs{padding-inline:var(--bme-space-1)}.tabs-header .card-header-tabs .nav-link{padding-inline:var(--bme-space-2)}
}
/* motion: the parts of a page rise in, one after another (backwards: hover can move them once they are in) */
@keyframes bme-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bme-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bme-spin{to{transform:translateX(-50%) rotate(1turn)}}
.dashboard-surface>*,.dashboard-kpis>*,.cycle-steps,.group-page>.card,#cyTable{animation:bme-rise .55s var(--bme-ease) backwards}
.dashboard-surface>:nth-child(2){animation-delay:.05s}.dashboard-surface>:nth-child(3){animation-delay:.1s}.dashboard-surface>:nth-child(4){animation-delay:.15s}
.dashboard-surface>:nth-child(5){animation-delay:.2s}.dashboard-surface>:nth-child(6){animation-delay:.25s}.dashboard-surface>:nth-child(n+7){animation-delay:.3s}
.dashboard-kpis>:nth-child(2){animation-delay:.2s}.dashboard-kpis>:nth-child(3){animation-delay:.25s}.dashboard-kpis>:nth-child(4){animation-delay:.3s}
#cyTable{animation-delay:.12s}
/* the dock: the icon under the pointer grows, its neighbours a little (wide screens with a mouse) */
@media (hover:hover) and (min-width:900px){
.topmenu-bar :is(.topmenu-btn,.dock-btn) .icon{transform-origin:50% 100%;transition:transform .22s var(--bme-ease),background-color .16s,color .16s}
.topmenu-bar :is(.topmenu-btn,.dock-btn):hover .icon{transform:translateY(-6px) scale(1.16)}
.topmenu-bar :is(.topmenu-btn,.dock-btn):has(+ :is(.topmenu-btn,.dock-btn):hover) .icon,
.topmenu-bar :is(.topmenu-btn,.dock-btn):hover + :is(.topmenu-btn,.dock-btn) .icon{transform:translateY(-3px) scale(1.07)}
/* สร้าง: an AI-gradient ring turns behind it */
.dock-create{position:relative;isolation:isolate}
.dock-create::before{content:"";position:absolute;top:-4px;left:50%;z-index:-1;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--bme-ai-1),var(--bme-ai-2),var(--bme-ai-3),var(--bme-ai-1));opacity:0;transform:translateX(-50%);transition:opacity .2s}
.dock-create:hover::before,.dock-create.open::before{opacity:1;animation:bme-spin 2.4s linear infinite}
}
/* the bento on smaller screens */
@media (max-width:1199.98px){
.dashboard-surface>.dashboard-welcome,.dashboard-surface>.quick-actions{grid-column:1/-1}
.quick-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
.quick-action:last-child{grid-column:auto;flex-direction:column;align-items:flex-start;min-height:92px}
.quick-action:last-child>.icon:last-child{top:16px;margin-top:0}
}
@media (max-width:767.98px){
.dashboard-surface{gap:var(--bme-space-3-5)}
.dashboard-welcome{min-height:0;padding:var(--bme-space-6) var(--bme-space-5-5) 168px;gap:var(--bme-space-4-5);border-radius:var(--bme-radius-sheet)}
.dashboard-welcome::after{right:12px;bottom:10px;width:min(62%,240px)}
.dashboard-welcome h2{font-size:var(--bme-fs-4xl)}
.welcome-period{padding:var(--bme-space-2-5) var(--bme-space-3-5)}
.welcome-period strong{font-size:var(--bme-fs-xl)}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;overflow:visible;padding:var(--bme-space-3-5);border-radius:var(--bme-radius-sheet)}
.quick-actions-copy{display:flex}
.quick-action{min-width:0;min-height:84px}
.quick-action:last-child{grid-column:span 2;flex-direction:row;align-items:center;min-height:0}
.quick-action:last-child>.icon:last-child{top:50%;margin-top:-8px}
.dashboard-stat .card-body{padding:var(--bme-space-4) var(--bme-space-4-5)}
.stat-value{font-size:var(--bme-fs-4xl)}
}
/* ---------- 7. The assistant (ai-ui.mjs; canvas AI-Panel): the ✦ button, the panel at the right, the home page's ask card ---------- */
/* AI-2: the real assistant (line F's server, DD-145) - shown only where the page's answers allow ai:ask; no demo and no demo badge */
.ai-mark{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--bme-on-color);background:var(--bme-ai-grad);box-shadow:var(--bme-shine)}
.ai-mark .icon{width:20px;height:20px}
.ai-mark-sm{width:28px;height:28px}.ai-mark-sm .icon{width:16px;height:16px}
.ai-mark-lg{width:56px;height:56px}.ai-mark-lg .icon{width:28px;height:28px}
/* the top bar's button: a sparkle in the AI gradient */
.shell-row1 .shell-ai{position:relative;width:42px;height:42px;border-radius:50%;color:var(--bme-on-color);background:var(--bme-ai-grad);box-shadow:var(--bme-shadow-ai)}
.shell-row1 .shell-ai:hover{color:var(--bme-on-color);filter:brightness(1.08);background:var(--bme-ai-grad)}
.shell-row1 .shell-ai .icon{width:20px;height:20px}
.ai-open .shell-row1 .shell-ai{box-shadow:0 0 0 2px var(--bme-surface),0 0 0 4px var(--bme-ai-violet)}
/* the panel */
.ai-panel{position:fixed;top:92px;right:max(16px,calc((100vw - 1408px) / 2));bottom:calc(var(--bme-dock-h) + 28px);z-index:var(--bme-z-ai);display:flex;flex-direction:column;width:min(420px,calc(100vw - 32px));overflow:hidden;border:1px solid var(--bme-line);border-radius:var(--bme-radius-sheet);background:var(--bme-surface);box-shadow:var(--bme-shadow-3);animation:ai-in .28s var(--bme-ease)}
.ai-panel[hidden]{display:none}
@keyframes ai-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ai-head{display:flex;align-items:center;gap:var(--bme-space-2-5);padding:var(--bme-space-3-5) var(--bme-space-3) var(--bme-space-3-5) var(--bme-space-4);border-bottom:1px solid var(--bme-line);background:radial-gradient(80% 160% at 0% 0%,var(--bme-pastel-lilac) 0%,transparent 60%),radial-gradient(70% 160% at 100% 0%,var(--bme-pastel-sky) 0%,transparent 65%),var(--bme-surface)}
.ai-title{display:flex;flex-direction:column;min-width:0;flex:1;line-height:var(--bme-lh-snug)}
.ai-title strong{font-size:var(--bme-fs-md)}
.ai-title small{overflow:hidden;color:var(--bme-muted);font-size:var(--bme-fs-xs);text-overflow:ellipsis;white-space:nowrap}
.ai-thread{flex:1;display:flex;flex-direction:column;gap:var(--bme-space-3-5);overflow:auto;overscroll-behavior:contain;padding:var(--bme-space-4-5) var(--bme-space-4)}
.ai-hello{display:flex;flex-direction:column;align-items:center;gap:var(--bme-space-1-5);margin:auto 0;padding:var(--bme-space-3);text-align:center}
.ai-hello h3{margin:var(--bme-space-2) 0 0;font-size:var(--bme-fs-2xl);font-weight:var(--bme-fw-semibold)}
.ai-hello p{max-width:26em;margin:0;color:var(--bme-muted)}
.ai-msg{display:flex;gap:var(--bme-space-2);max-width:100%}
.ai-msg.is-me{align-self:flex-end;max-width:85%;padding:var(--bme-space-2-5) var(--bme-space-3-5);border-radius:var(--bme-radius-bubble) var(--bme-radius-bubble) 6px var(--bme-radius-bubble);background:var(--bme-action);color:var(--bme-on-action)}
.ai-msg.is-ai{align-items:flex-start}
.ai-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--bme-space-2-5);padding:var(--bme-space-3) var(--bme-space-3-5);border-radius:6px var(--bme-radius-bubble) var(--bme-radius-bubble) var(--bme-radius-bubble);background:var(--bme-surface-2)}
.ai-card p{margin:0;color:var(--bme-ink);line-height:var(--bme-lh-read)}
.ai-msg.is-error .ai-card{background:var(--bme-err-bg)}
.ai-msg.is-error .ai-card p{color:var(--bme-err-fg)}
.ai-facts{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--bme-radius-icon);background:var(--bme-surface);box-shadow:0 0 0 1px var(--bme-line)}
.ai-fact{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--bme-space-0-5) var(--bme-space-3);padding:var(--bme-space-2) var(--bme-space-3);font-size:var(--bme-fs-sm)}
.ai-fact+.ai-fact{border-top:1px solid var(--bme-line)}
.ai-fact a,.ai-fact span{flex:1 1 150px;min-width:0;color:var(--bme-muted);text-decoration:none}
.ai-fact a:hover{color:var(--bme-ink);text-decoration:underline}
.ai-fact b{flex:0 1 auto;margin-left:auto;color:var(--bme-ink);font-weight:var(--bme-fw-semibold);font-variant-numeric:tabular-nums;text-align:right}
.ai-fact.is-warn b{color:var(--bme-err-fg)}
.ai-fact.is-total{background:var(--bme-surface-2)}.ai-fact.is-total b{font-size:var(--bme-fs-md)}
.ai-links{display:flex;flex-wrap:wrap;gap:var(--bme-space-1-5)}
.ai-link{padding:var(--bme-space-1) var(--bme-space-3);border-radius:var(--bme-radius-pill);background:var(--bme-surface);box-shadow:0 0 0 1px var(--bme-line);color:var(--bme-ink);font-size:var(--bme-fs-label);font-weight:var(--bme-fw-medium);text-decoration:none}
.ai-link:hover{box-shadow:0 0 0 1px var(--bme-line-strong);color:var(--bme-ink)}
.ai-note{color:var(--bme-ink-3);font-size:var(--bme-fs-xs)}
.ai-typing{flex-direction:row;gap:5px;width:max-content;flex:none;padding:var(--bme-space-3-5) var(--bme-space-4)}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--bme-ink-3);animation:ai-dot 1s ease-in-out infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes ai-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ai-suggest{display:flex;flex-wrap:wrap;gap:var(--bme-space-1-5);padding:0 var(--bme-space-4) var(--bme-space-2-5)}
.ai-chip{padding:var(--bme-space-1-5) var(--bme-space-3);border:1px solid var(--bme-line);border-radius:var(--bme-radius-pill);background:var(--bme-surface);color:var(--bme-ink);font:inherit;font-size:var(--bme-fs-label);line-height:var(--bme-lh-snug);cursor:pointer;transition:border-color .15s,background-color .15s}
.ai-chip:hover{border-color:var(--bme-line-strong);background:var(--bme-surface-2)}
.ai-form{display:flex;align-items:flex-end;gap:var(--bme-space-2);padding:var(--bme-space-3);border-top:1px solid var(--bme-line)}
.ai-input{flex:1;min-height:44px;max-height:120px;padding:11px var(--bme-space-4);border:1px solid var(--bme-line-strong);border-radius:var(--bme-radius-field);background:var(--bme-surface);color:var(--bme-ink);font:inherit;line-height:var(--bme-lh-ui);resize:none}
.ai-input:focus{outline:0;border-color:var(--bme-focus);box-shadow:0 0 0 3px var(--bme-primary-soft)}
.ai-send{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--bme-action);color:var(--bme-on-action);cursor:pointer}
.ai-send .icon{width:20px;height:20px}
/* the home page's ask card: in its slot in the bento, after the hero and the shortcuts (the slot rises and reveals as the bento's
pieces do; empty - no right to ask - it takes no row) */
[data-ai-slot]:empty{display:none}
.ai-ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bme-space-3-5) var(--bme-space-4-5);padding:var(--bme-space-4-5) var(--bme-space-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-frame);background:radial-gradient(50% 140% at 0% 0%,var(--bme-pastel-lilac) 0%,transparent 60%),radial-gradient(40% 140% at 100% 100%,var(--bme-pastel-sky) 0%,transparent 60%),var(--bme-surface);box-shadow:var(--bme-shadow-1)}
.ai-ask-main{flex:1 1 380px;display:flex;flex-direction:column;gap:var(--bme-space-2);min-width:0}
.ai-ask-field{display:flex;align-items:center;gap:var(--bme-space-2-5);height:48px;padding:0 var(--bme-space-2-5) 0 var(--bme-space-4-5);border:1px solid var(--bme-line);border-radius:var(--bme-radius-pill);background:var(--bme-surface);color:var(--bme-ink-3);font:inherit;font-size:var(--bme-fs-md);text-align:left;cursor:text;box-shadow:var(--bme-shadow-1)}
.ai-ask-field span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-ask-field kbd{padding:3px var(--bme-space-2);border:0;border-radius:var(--bme-radius-pill);background:var(--bme-surface-3);color:var(--bme-muted);font-family:var(--bme-font);font-size:var(--bme-fs-2xs);box-shadow:none}
.ai-ask-field:hover{border-color:var(--bme-line-strong)}
.ai-ask-insight{margin:0 0 0 var(--bme-space-1-5);color:var(--bme-muted);font-size:var(--bme-fs-sm)}
.ai-ask-insight b{margin-right:var(--bme-space-1);color:var(--bme-ai-ink);font-weight:var(--bme-fw-semibold)}
.ai-ask-chips{display:flex;flex-wrap:wrap;gap:var(--bme-space-1-5);flex:0 1 auto}
/* AI-2: the line under the box (spec §4), one question at a time */
.ai-hint{display:block;padding:0 var(--bme-space-3) var(--bme-space-3);color:var(--bme-ink-3);font-size:var(--bme-fs-xs)}
.ai-send:disabled,.ai-chip:disabled{cursor:default;opacity:.55}
/* AI-2: the settings page's text to read before turning the assistant on (ai-settings-ui.mjs) */
.ai-ack-text{margin-bottom:var(--bme-space-3);padding:var(--bme-space-3) var(--bme-space-4);border-radius:var(--bme-radius-icon);background:var(--bme-surface-2)}
.ai-ack-text ul{margin:0;padding-left:var(--bme-space-5)}
.ai-ack-text li+li{margin-top:var(--bme-space-1-5)}
@media (max-width:899.98px){
.ai-panel{inset:auto 0 0 0;width:100%;height:84vh;border-radius:var(--bme-radius-sheet) var(--bme-radius-sheet) 0 0;border-width:1px 0 0;z-index:var(--bme-z-ai-sheet)}
.shell-row1 .shell-ai{width:40px;height:40px}
.ai-ask{padding:var(--bme-space-4)}
.ai-ask-field kbd{display:none}
}
}
@media (prefers-reduced-motion:reduce){:is(.topmenu-btn,.dock-btn) .icon{transition:none}:is(.topmenu-btn,.dock-btn):hover .icon,.topmenu-bar :is(.topmenu-btn,.dock-btn) .icon{transform:none!important}
.dashboard-surface>*,.dashboard-kpis>*,.cycle-steps,.group-page>.card,#cyTable,.dashboard-welcome::after,.dock-create::before,.ai-panel,.ai-ask,.ai-typing i{animation:none!important}
:is(a.card,.dashboard-stat,.quick-action,.cycle-step,.app-tile):hover{transform:none}}
/* ---------- 8. Scroll and glow (the feel of fastwork.com's pages, in BME's own colours; still CSS only) ----------
a. a band of light sweeps now and then through two headings (the home page's, the assistant's greeting)
b. the top capsule thickens and lifts as the page leaves the top
c. cards come into focus as they scroll in: from a soft blur, a little low and small, to sharp in the first 96px
d. the home page's picture drifts up and fades as the hero scrolls away, its words soften
e. สร้าง: a comet of light runs round the button (its head the solid end, its tail fading); under the pointer the arc grows into a full ring
f. a table wider than its card fades at the edge that has more to scroll to
Scroll-linked parts (b, c, d, f) only where the browser has scroll timelines (@supports); a browser without them shows the
page as before. Everything that moves stops under prefers-reduced-motion. Nothing here changes the layout or the markup.
Fills are "backwards"/"forwards", never "both": a finished reveal leaves no transform or filter behind, so a card is not
left a stacking context (a dropdown in one card must still open over the next one). */
@property --bme-comet{syntax:"";inherits:true;initial-value:.16}
@property --bme-fade-s{syntax:"";inherits:false;initial-value:0px}
@property --bme-fade-e{syntax:"";inherits:false;initial-value:0px}
@keyframes bme-sweep{from{background-position:100% 50%}to{background-position:0% 50%}}
@keyframes bme-bar-lift{to{background:color-mix(in srgb,var(--bme-surface) 94%,transparent);box-shadow:var(--bme-shadow-bar-lifted)}}
@keyframes bme-reveal{from{opacity:0;filter:blur(8px);translate:0 28px;scale:.97}}
@keyframes bme-hero-out{to{opacity:.15;translate:0 -56px;scale:.94}}
@keyframes bme-copy-out{to{opacity:.4;filter:blur(3px)}}
@keyframes bme-orbit{to{transform:translateX(-50%) rotate(-1turn)}}
@keyframes bme-edge-fade{0%{--bme-fade-s:0px;--bme-fade-e:40px}6%{--bme-fade-s:40px}94%{--bme-fade-e:40px}100%{--bme-fade-s:40px;--bme-fade-e:0px}}
@media screen{
/* a. ink with a band of BME blue, violet, pink and orange passing through it; still (in ink) without motion. Large text: each
colour of the band is 3:1 or more on the card in both themes */
.dashboard-welcome h2,.ai-hello h3{background-image:linear-gradient(90deg,var(--bme-ink) 0,var(--bme-ink) 33.33%,var(--bme-ai-1) 40%,var(--bme-ai-2) 46%,var(--bme-ai-3) 52%,var(--bme-glow-4) 58%,var(--bme-ink) 66.67%,var(--bme-ink) 100%);background-size:300% 100%;background-position:100% 50%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
@media screen and (forced-colors:active){
.dashboard-welcome h2,.ai-hello h3{background:none;-webkit-text-fill-color:currentColor}
}
@media screen and (prefers-reduced-motion:no-preference){
.dashboard-welcome h2{animation:bme-sweep 7s linear 1.4s infinite}
.ai-hello h3{animation:bme-sweep 7s linear .6s infinite}
}
@supports (animation-timeline:view()){
@media screen and (prefers-reduced-motion:no-preference){
/* b */
.shell-row1{animation:bme-bar-lift linear forwards;animation-timeline:scroll(root block);animation-range:0px 120px}
/* c: the home page and a group's page keep their rise on opening (later in the list: it wins while it runs) */
#workspace .card:not(.card .card,.modal .card,.dashboard-surface>*,.dashboard-kpis>*,.group-page>.card){animation:bme-reveal linear backwards;animation-timeline:view();animation-range:entry 0% entry 96px}
.dashboard-surface>*,.dashboard-kpis>*,.group-page>.card{animation:bme-reveal linear backwards,bme-rise .55s var(--bme-ease) backwards;animation-timeline:view(),auto;animation-range:entry 0% entry 96px,normal}
/* d */
.dashboard-welcome{view-timeline:--bme-hero block}
.dashboard-welcome::after{animation:bme-float 7s ease-in-out infinite,bme-hero-out linear forwards;animation-timeline:auto,--bme-hero;animation-range:normal,exit 0% exit 100%}
.dashboard-welcome>div{animation:bme-copy-out linear forwards;animation-timeline:--bme-hero;animation-range:exit 15% exit 85%}
}
/* f: a scroll timeline that cannot scroll is inactive, so a table that fits keeps no fade */
@media screen{
.table-responsive{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--bme-fade-s),#000 calc(100% - var(--bme-fade-e)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--bme-fade-s),#000 calc(100% - var(--bme-fade-e)),transparent 100%);animation:bme-edge-fade linear both;animation-timeline:scroll(self inline)}
}
/* an open menu (a Bootstrap dropdown, Popper's position:fixed - a register's ⋯) in a card or a table: its card stops its reveal (c) and
its table its edge mask (f) while the menu is open. A scroll-driven animation of filter or translate keeps the card the containing
block of what is fixed inside it while the card is on screen, the finished reveal too: Popper places the menu against the screen
and it lands lower by the card's top (the round's e2e-tables: voucher/sale's ⋯ 281px below, behind the footer, nothing to press);
the mask clips a menu that leaves its table (the last rows' menus, with motion reduced as well) */
@media screen{
#workspace .card:has(.dropdown-menu.show),.dashboard-surface>*:has(.dropdown-menu.show),.dashboard-kpis>*:has(.dropdown-menu.show),.group-page>.card:has(.dropdown-menu.show){animation:none}
.table-responsive:has(.dropdown-menu.show){-webkit-mask-image:none;mask-image:none}
}
}
/* e: the ring behind สร้าง (section 6) becomes a comet: an arc with a fading tail and a soft glow, turning slowly */
@media screen and (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){
.dock-create::before,.dock-create::after{content:"";position:absolute;top:-4px;left:50%;z-index:-1;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--bme-ai-1),var(--bme-ai-2),var(--bme-ai-3),var(--bme-glow-4),var(--bme-ai-1));opacity:1;transform:translateX(-50%);-webkit-mask:conic-gradient(#000 0deg,#000 calc(var(--bme-comet) * var(--bme-comet) * 360deg),transparent calc(var(--bme-comet) * 360deg));mask:conic-gradient(#000 0deg,#000 calc(var(--bme-comet) * var(--bme-comet) * 360deg),transparent calc(var(--bme-comet) * 360deg));transition:--bme-comet .5s var(--bme-ease),opacity .2s;animation:bme-orbit 4.8s linear infinite}
.dock-create::after{filter:blur(7px);opacity:.75}
.dock-create:hover,.dock-create.open,.dock-create:focus-visible{--bme-comet:1}
.dock-create:hover::before,.dock-create.open::before{opacity:1;animation:bme-orbit 4.8s linear infinite}
/* สร้าง lifts as one piece (its icon and the ring together) instead of growing like its neighbours, so the ring stays round it */
.topmenu-bar .dock-create.dock-btn .icon,.topmenu-bar .dock-create.dock-btn:hover .icon,
.topmenu-bar .dock-btn.dock-create:has(+ :is(.topmenu-btn,.dock-btn):hover) .icon,
.topmenu-bar :is(.topmenu-btn,.dock-btn):hover + .dock-create.dock-btn .icon{transform:none}
.topmenu-bar .dock-create.dock-btn.open.open .icon{transform:rotate(45deg)}
.dock-create{transition:translate .3s var(--bme-ease)}
.dock-create:hover{translate:0 -4px}
}
/* g. the word after the logo writes itself as the page opens - each stroke in writing order, the pen at one speed, the teal bar
last - then the line boils for a moment the way a hand-drawn line does (the three frames in turn, 0.2s each), and boils again
while the pointer is on the brand. Without motion it simply stands drawn (frame 0) */
@keyframes wm-write{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes wm-boil0{0%,33.32%{opacity:1}33.33%,100%{opacity:0}}
@keyframes wm-boil1{0%,33.32%{opacity:0}33.33%,66.65%{opacity:1}66.66%,100%{opacity:0}}
@keyframes wm-boil2{0%,66.65%{opacity:0}66.66%,100%{opacity:1}}
@media screen and (prefers-reduced-motion:no-preference){
.wm-fr0 .wm-s{stroke-dasharray:1 1;animation:wm-write var(--d) cubic-bezier(.4,0,.3,1) var(--t) backwards}
.wm-P{--t:0.30s;--d:0.23s}.wm-l{--t:0.58s;--d:0.25s}.wm-a{--t:0.87s;--d:0.21s}.wm-t{--t:1.13s;--d:0.11s}.wm-f{--t:1.29s;--d:0.17s}.wm-o{--t:1.51s;--d:0.14s}.wm-r{--t:1.70s;--d:0.08s}.wm-m{--t:1.83s;--d:0.26s}.wm-bar{--t:2.14s;--d:0.06s}
.wm-fr0{animation:wm-boil0 .6s step-end 2.25s 3}.wm-fr1{animation:wm-boil1 .6s step-end 2.25s 3}.wm-fr2{animation:wm-boil2 .6s step-end 2.25s 3}
.shell-brand:hover .wm-fr0{animation:wm-boil0 .6s step-end infinite}.shell-brand:hover .wm-fr1{animation:wm-boil1 .6s step-end infinite}.shell-brand:hover .wm-fr2{animation:wm-boil2 .6s step-end infinite}
}