/* theme: screen only; print output is untouched */ @media screen { /* ==== 00-base.css ==== */ /* 00-base: shared tokens and shared components ([data-ui=card|table|toolbar|tabs|badge|stat|modal|drawer|form-row|page-header]). Applies to every screen. */ /* Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. */ /* ========================================================================== * Base look v2: a calm, spacious, premium shell. Tokens only (--twx-*), so light, dark and * the comfortable/compact switch (.density-compact, whose !important padding rules still win) keep working. * Visual properties only. Generic: keyed on data-ui hooks, shared classes and [role] attributes so the area files compose on top. * ========================================================================== */ html body { background: var(--twx-bg); color: var(--twx-text); line-height: var(--twx-leading); text-rendering: optimizeLegibility; } html h1, html h2, html h3 { text-wrap: balance; } html ::selection { background: var(--twx-surface-selected); color: var(--twx-text); } html .bb-num, html [data-bb-n], html .bbds-num-auto { font-variant-numeric: tabular-nums; } /* ---- shell: main area, sidebar, top bar -------------------------------- */ html #bb-main-content { padding: 16px; } @media (min-width: 768px) { html #bb-main-content { padding: 20px 28px 40px; } } html .bbds-mainrail { background: var(--twx-surface) !important; border-right: 1px solid var(--twx-border); box-shadow: none !important; padding: 16px 12px; } html .bbds-mainrail .bb-nav { border-radius: 12px !important; padding-top: 8px; padding-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--twx-text-muted); transition: background-color var(--twx-dur) var(--twx-ease), color var(--twx-dur) var(--twx-ease); } html .bbds-mainrail .bb-nav:hover { background: var(--twx-surface-sunk) !important; color: var(--twx-text) !important; } html .bbds-mainrail .bb-nav[style*="font-weight: 600"] { box-shadow: var(--twx-shadow-2) !important; font-weight: 600; } html .bbds-mainrail .bb-nav[style*="font-weight: 600"]:hover { background: revert-layer; } html .bbds-navcap { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--twx-text-muted); padding-top: 8px; } html .bbds-nav-count { font-weight: 600; font-variant-numeric: tabular-nums; } html [role="banner"] { background: var(--twx-surface) !important; border-bottom: 1px solid var(--twx-border) !important; box-shadow: none !important; } @media (min-width: 768px) { html [role="banner"] { padding: 10px 28px; min-height: 60px; } } html [role="banner"] > div:has(> input) { background: var(--twx-surface-sunk) !important; border: 1px solid var(--twx-border) !important; border-radius: var(--twx-radius-pill) !important; min-height: 44px; padding-left: 16px; padding-right: 16px; } html [role="banner"] input { background-color: transparent !important; border: 0 !important; min-height: 40px; } html [role="banner"] > button, html [role="banner"] > div > button { border-radius: var(--twx-radius) !important; } /* ---- toast ---------------------------------------------------------------- */ html div[role="status"].fixed { background: var(--twx-text) !important; color: var(--twx-bg) !important; border-radius: 14px !important; padding: 14px 20px; font-size: 14px; font-weight: 500; box-shadow: var(--twx-shadow-3) !important; max-width: min(440px, calc(100vw - 32px)); } /* ---- page header --------------------------------------------------------- */ [data-ui="page-header"].bb-page-head { border-radius: 18px; padding: 11px 20px 13px; box-shadow: var(--twx-shadow-1); margin-bottom: 4px; } [data-ui="page-header"] h1 { font-size: 28px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; color: var(--twx-text); } [data-ui="page-header"] .bb-eyebrow { font-size: 12px; font-weight: 650; letter-spacing: 0.12em; } [data-ui="page-header"] p, [data-ui="page-header"] .bb-page-sub { color: var(--twx-text-muted); font-size: 14px; line-height: 1.5; max-width: 80ch; } [data-ui="page-header"] .bb-page-chips { gap: 8px; } @media (max-width: 640px) { [data-ui="page-header"].bb-page-head { padding: 14px 16px 16px; } [data-ui="page-header"] h1 { font-size: 24px; } } /* ---- cards and panels ---------------------------------------------------- */ [data-ui="card"] { border: 1px solid var(--twx-border); border-radius: 16px; box-shadow: var(--twx-shadow-1); background-color: var(--twx-surface); } [data-ui="card"]:hover { border-color: var(--twx-border); box-shadow: var(--twx-shadow-1); } [data-ui="card"] h2, [data-ui="card"] h3 { letter-spacing: -0.01em; } /* ---- stat tiles ---------------------------------------------------------- */ [data-ui="stat"] { border-radius: 16px; box-shadow: var(--twx-shadow-1); padding: 14px 18px; } [data-ui="stat"]:hover { box-shadow: var(--twx-shadow-2); } [data-ui="stat"].bb-stat-go:hover { transform: none; } [data-ui="stat"] .bb-label { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; color: var(--twx-text-muted); } /* a stat caption or figure the page clips with an inline ellipsis shows in full (it wraps instead of ending in "...") */ [data-ui="stat"] [style*="text-overflow"] { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; } [data-ui="stat"] .bb-fig { font-size: 26px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 2px; } /* ---- tables -------------------------------------------------------------- */ [data-ui="table"] thead th { background: var(--twx-surface-sunk); color: var(--twx-text-muted); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--twx-border); box-shadow: none; } [data-ui="table"] thead th:first-child { border-top-left-radius: 12px; } [data-ui="table"] thead th:last-child { border-top-right-radius: 12px; } [data-ui="table"] tbody td { border-top: 1px solid var(--twx-border); color: var(--twx-text); font-size: 14px; line-height: 1.5; padding-top: 12px; padding-bottom: 12px; vertical-align: middle; } [data-ui="table"] tbody tr:first-child td { border-top: 0; } [data-ui="table"] tbody tr:nth-child(even) td { background-color: color-mix(in srgb, var(--twx-surface-sunk) 38%, var(--twx-surface)); } [data-ui="table"] tbody tr:hover td { background-color: var(--twx-surface-hover); } [data-ui="table"] tbody tr[aria-selected="true"] td, [data-ui="table"] tbody tr.bbds-tr-on td { background-color: var(--twx-surface-selected); } [data-ui="table"] td.bb-num, [data-ui="table"] th.bb-num, [data-ui="table"] td.bbds-num-auto, [data-ui="table"] th.bbds-num-auto, [data-ui="table"] td[data-bb-n] { text-align: right; } [data-ui="table"] .bb-empty-row { color: var(--twx-text-muted); } [data-ui="table"] tfoot td, [data-ui="table"] tfoot th { font-weight: 650; border-top-color: var(--twx-border-strong); background: var(--twx-surface-sunk); padding-top: 11px; padding-bottom: 11px; } [data-ui="table"] td .flex, [data-ui="table"] td [class*="flex"] { flex-wrap: wrap; row-gap: 6px; column-gap: 6px; } html .bb-tablewrap { border-radius: 12px; scrollbar-color: var(--twx-border-strong) transparent; } /* ---- toolbars and filters ------------------------------------------------ */ [data-ui="toolbar"] { row-gap: 10px; column-gap: 10px; align-items: center; margin-bottom: 14px; } [data-ui="toolbar"] input, [data-ui="toolbar"] select { background-color: var(--twx-surface); } html .bb-filtbtn { border-radius: var(--twx-radius); } /* ---- tabs and segmented controls ----------------------------------------- */ [data-ui="tabs"] { border-bottom-color: var(--twx-border); gap: 4px; margin-bottom: 14px; } [data-ui="tabs"] [role="tab"] { font-size: 14px; font-weight: 500; padding: 10px 14px; color: var(--twx-text-muted); border-radius: 10px 10px 0 0; transition: color var(--twx-dur) var(--twx-ease), background-color var(--twx-dur) var(--twx-ease); } [data-ui="tabs"] [role="tab"]:hover { color: var(--twx-text); background: var(--twx-surface-sunk); } [data-ui="tabs"] [role="tab"][aria-selected="true"] { color: var(--twx-text); font-weight: 650; } html .bb-seg { background: var(--twx-surface-sunk); border-radius: 12px; padding: 4px; box-shadow: inset 0 0 0 1px var(--twx-border); } html .bb-seg-b { border-radius: 9px; padding: 7px 16px; font-weight: 600; } html .bb-chip { border-color: var(--twx-border-strong); padding: 7px 14px; font-weight: 500; } html .bb-chip:hover { border-color: var(--twx-accent); } /* ---- badges and status chips: each status keeps its colours ---------------- */ [data-ui="badge"] { font-weight: 650; font-size: 12px; padding: 3px 10px; border-radius: var(--twx-radius-pill); letter-spacing: 0.01em; } /* ---- buttons: accent = primary, status colours as-is, ghost = secondary ---- */ html .bb-btn { border-radius: 12px; font-weight: 600; font-size: 14px; padding: 8px 16px; box-shadow: none; transition: background-color var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease), box-shadow var(--twx-dur) var(--twx-ease), filter var(--twx-dur) var(--twx-ease); } html .bb-main table .bb-btn { padding: 5px 12px; border-radius: 10px; } html .bb-btn:not(.cursor-not-allowed):hover { transform: none; filter: brightness(1.07); box-shadow: var(--twx-shadow-1); } html .bb-btn:not(.cursor-not-allowed):active { transform: none; filter: brightness(0.94); box-shadow: none; } html .bb-btn-accent { box-shadow: var(--twx-shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.16); } html .bb-btn-ghost { background: var(--twx-surface); color: var(--twx-text); border-color: var(--twx-border-strong); box-shadow: var(--twx-shadow-1); } html .bb-btn-ghost:not(.cursor-not-allowed):hover { background: var(--twx-surface-sunk); filter: none; border-color: var(--twx-text-muted); box-shadow: var(--twx-shadow-1); } html .bb-btn.cursor-not-allowed, html .bb-btn:disabled { box-shadow: none; } /* ---- forms ----------------------------------------------------------------- */ [data-ui="form-row"] label, [data-ui="form-row"] .bb-label { color: var(--twx-text-muted); font-weight: 650; letter-spacing: 0.06em; } html .bb-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), html .bb-main select, html .bb-main textarea { background-color: var(--twx-surface); color: var(--twx-text); border-color: var(--twx-border-strong); border-radius: 12px !important; padding-left: 12px; padding-right: 12px; font-size: 14px; transition: border-color var(--twx-dur) var(--twx-ease); } html .bb-main table input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), html .bb-main table select { border-radius: 10px !important; padding-left: 10px; padding-right: 10px; } html .bb-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):hover, html .bb-main select:hover, html .bb-main textarea:hover { border-color: var(--twx-text-muted); } html .bb-main input::placeholder, html .bb-main textarea::placeholder { color: var(--twx-text-muted); } html .bb-main input:disabled, html .bb-main select:disabled, html .bb-main textarea:disabled { background-color: var(--twx-surface-sunk); color: var(--twx-text-disabled); } /* ---- modals and drawers --------------------------------------------------- */ [data-ui="modal"] { background: var(--twx-scrim) !important; backdrop-filter: blur(3px); } [data-ui="modal"] > div { background: var(--twx-surface) !important; color: var(--twx-text); padding: 28px; box-shadow: 0 0 0 1px var(--twx-border), var(--twx-shadow-3); border-radius: 20px !important; } [data-ui="drawer"] { background: var(--twx-scrim) !important; backdrop-filter: blur(3px); } [data-ui="drawer"] > div { background: var(--twx-surface) !important; color: var(--twx-text); border-left: 1px solid var(--twx-border) !important; box-shadow: var(--twx-shadow-3) !important; } [data-ui="modal"] .font-medium, [data-ui="drawer"] .font-medium { font-size: 19px !important; font-weight: 650; letter-spacing: -0.01em; } [data-ui="modal"] [title="Close"], [data-ui="drawer"] [title="Close"] { border-radius: 10px; min-width: 36px; min-height: 36px; } [data-ui="modal"] [title="Close"]:hover, [data-ui="drawer"] [title="Close"]:hover { background: var(--twx-surface-sunk); color: var(--twx-text) !important; } /* ---- banners and notices --------------------------------------------------- */ html .bbds-banner { border-radius: 12px; box-shadow: none; } html [role="alert"][data-bb="savenote"] { border-radius: 12px; } html #bb-fs { border-radius: 12px; box-shadow: var(--twx-shadow-2); } /* ---- compact density: tighter again --------------------------------------- */ html .density-compact [data-ui="card"], html .density-compact [data-ui="stat"] { box-shadow: none; } html .density-compact #bb-main-content { padding: 12px 16px; } html .density-compact [data-ui="page-header"].bb-page-head { padding: 10px 14px; } html .density-compact [data-ui="page-header"] h1 { font-size: 22px; } html .density-compact [data-ui="stat"] .bb-fig { font-size: 20px; } html .density-compact [data-ui="stat"] { padding: 10px 14px; } html .density-compact [data-ui="table"] tbody td { padding-top: 5px; padding-bottom: 5px; } html .density-compact [data-ui="table"] thead th { padding-top: 8px; padding-bottom: 7px; } html .density-compact .bb-btn { padding: 5px 12px; } /* ---- phones ------------------------------------------------------------------ */ @media (max-width: 640px) { [data-ui="tabs"] [role="tab"] { min-height: 44px; padding: 10px 12px; } html .bb-main .bb-btn { min-height: 44px; } [data-ui="stat"] { padding: 12px 14px; } [data-ui="modal"] > div { padding: 20px; } html div[role="status"].fixed { left: 16px; right: 16px; bottom: 76px; } } /* A fold-away section card (the heading is its own full-width button, which carries the padding) must not get a second padding from a screen's card rule. */ [data-ui="card"]:has(> h2 > .bb-sec-head) { padding: 0 !important; } /* A card the page pads itself (p-0 = edge-to-edge table, p-3 = compact strip) is never padded more than the page chose: the restyle may not make it taller. */ [data-ui="card"].p-0 { padding: 0 !important; } [data-ui="card"].p-3 { padding: 12px !important; } /* ========================================================================== * Premium v3 (2026-11-01): the Partners / Documents look across the main app. * Calm tiles, header card with a 3px module-hue top border, dark navy sidebar, * one radius / spacing / shadow scale. Visual only. * ========================================================================== */ :root { --twx-p-radius: 14px; --twx-p-radius-sm: 10px; --twx-side-bg: #0B1220; --twx-side-bg-2: #131C33; --twx-side-line: #1E2A44; --twx-side-text: #E6EBF3; --twx-side-soft: #A3B1C6; --twx-side-hover: #18233B; --twx-side-active: #4F46E5; --twx-side-active-ink: #FFFFFF; } /* ---- sidebar: dark navy, pill rows ---- */ html .bbds-mainrail { background: var(--twx-side-bg) !important; border-right: 1px solid var(--twx-side-line) !important; color: var(--twx-side-soft); padding: 14px 12px; } html .bbds-mainrail .bb-nav { min-height: 40px; border-radius: var(--twx-p-radius-sm) !important; font-size: 14px; } html .bbds-mainrail .bb-nav:not([style*="font-weight: 600"]) { color: var(--twx-side-soft) !important; } html .bbds-mainrail .bb-nav:not([style*="font-weight: 600"]):hover { background: var(--twx-side-hover) !important; color: var(--twx-side-text) !important; } html .bbds-mainrail .bb-nav[style*="font-weight: 600"] { box-shadow: 0 6px 18px -4px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } html .bbds-mainrail .bbds-navcap { color: #8A99B0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; padding: 14px 10px 6px; } html .bbds-mainrail .bbds-wshead, html .bbds-mainrail .bbds-wsnote, html .bbds-mainrail .bbds-dr-row, html .bbds-mainrail .bbds-dr-label, html .bbds-mainrail .bbds-dr-head { color: var(--twx-side-soft) !important; } /* the active drill row and the small caption under the brand: readable on the navy rail in BOTH themes (axe 4.5:1). The rail is always navy, so the active pill is the deep indigo (white text 6.3:1), not the light dark-mode accent. */ html .bbds-mainrail .bbds-dr-row.bbds-dr-on { background: var(--twx-side-active) !important; color: var(--twx-side-active-ink) !important; } html .bbds-mainrail .bbds-dr-row.bbds-dr-on .bbds-dr-label { color: var(--twx-side-active-ink) !important; } html .bbds-mainrail .bbds-mainrail-words > .text-xs { color: var(--twx-side-soft) !important; } html .bbds-mainrail .bbds-wshead span[style*="font-weight: 600"] { color: var(--twx-side-text) !important; } /* the rail is navy in light mode too; text the bundle inks for a light panel (ink / inkSoft) must use the rail's own colours */ html:not([data-bb="dark"]) .bbds-mainrail [style*="color: rgb(90"], html:not([data-bb="dark"]) .bbds-mainrail .bbds-wshead .text-xs, html:not([data-bb="dark"]) .bbds-mainrail .bbds-wshead .text-xs span { color: var(--twx-side-soft) !important; } html:not([data-bb="dark"]) .bbds-mainrail [style*="color: rgb(11"] { color: var(--twx-side-text) !important; } html .bbds-mainrail .bbds-dr-row:hover { background: var(--twx-side-hover) !important; color: var(--twx-side-text) !important; } html .bbds-mainrail .bbds-mainrail-fold { color: var(--twx-side-soft); } /* the sidebar logo keeps the size set in Settings (logoHeight); no cap here (2026-11-02, owner saw it shrink) */ html .bbds-mainrail ::-webkit-scrollbar-thumb { background: var(--twx-side-line); } html .bbds-mainrail { scrollbar-color: var(--twx-side-line) transparent; } /* ---- top bar ---- */ html [role="banner"] { backdrop-filter: saturate(1.4) blur(8px); } html [role="banner"] > div:has(> input) { min-height: 40px; border-radius: 12px !important; background: var(--twx-surface-sunk) !important; transition: border-color var(--twx-dur) var(--twx-ease), box-shadow var(--twx-dur) var(--twx-ease); } html [role="banner"] > div:has(> input):focus-within { border-color: var(--twx-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--twx-accent) 20%, transparent); background: var(--twx-surface) !important; } html [role="banner"] button { border-radius: var(--twx-p-radius-sm) !important; } /* ---- page header card: panel, radius 14, shadow-1, 3px hue top (inline), no gradient wash ---- */ [data-ui="page-header"].bb-page-head { background: var(--twx-surface) !important; border-radius: var(--twx-p-radius); padding: 18px 22px; box-shadow: var(--twx-shadow-1); border-left: 1px solid var(--twx-border); border-right: 1px solid var(--twx-border); border-bottom: 1px solid var(--twx-border); margin-bottom: 18px; } [data-ui="page-header"] h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } @media (max-width: 640px) { [data-ui="page-header"].bb-page-head { padding: 14px 16px; } [data-ui="page-header"] h1 { font-size: 21px; } } /* ---- cards ---- */ [data-ui="card"] { border-radius: var(--twx-p-radius) !important; border: 1px solid var(--twx-border); box-shadow: var(--twx-shadow-1); } /* ---- number tiles: neutral 1px border, no coloured outline, lift when clickable ---- */ [data-ui="stat"] { border-top: 1px solid var(--twx-border) !important; border-right: 1px solid var(--twx-border) !important; border-bottom: 1px solid var(--twx-border) !important; border-left-width: 3px !important; border-radius: var(--twx-p-radius) !important; box-shadow: var(--twx-shadow-1); padding: 16px 18px; transition: transform var(--twx-dur) var(--twx-ease), box-shadow var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } [data-ui="stat"]:hover { box-shadow: var(--twx-shadow-1); } [data-ui="stat"].bb-stat-go { cursor: pointer; } [data-ui="stat"].bb-stat-go:hover { transform: translateY(-2px); box-shadow: var(--twx-shadow-2); border-top-color: var(--twx-border-strong) !important; border-right-color: var(--twx-border-strong) !important; border-bottom-color: var(--twx-border-strong) !important; } [data-ui="stat"] .bb-label { letter-spacing: 0.05em; font-weight: 600; } [data-ui="stat"] .bb-fig { font-size: 26px; font-weight: 700; } /* ---- tables: sticky header, no zebra, hover tint ---- */ [data-ui="table"] thead th { position: sticky; top: 0; z-index: 1; letter-spacing: 0.04em; } [data-ui="table"] tbody tr:nth-child(even) td { background-color: transparent; } [data-ui="table"] tbody tr:hover td { background-color: var(--twx-surface-hover); } [data-ui="table"] tbody td { padding-top: 11px; padding-bottom: 11px; } html .bb-tablewrap { border-radius: var(--twx-p-radius-sm); } /* ---- buttons, badges, tabs ---- */ html .bb-btn { border-radius: var(--twx-p-radius-sm) !important; font-weight: 600; } [data-ui="badge"], html .bb-badge { border-radius: var(--twx-radius-pill) !important; font-weight: 600; padding-left: 10px; padding-right: 10px; } [data-ui="tabs"] [role="tab"][aria-selected="true"] { color: var(--twx-accent); } /* ---- modals and drawers: same scale ---- */ [data-ui="modal"] > div { border-radius: 16px !important; } [data-ui="drawer"] > div { border-top-left-radius: 16px; border-bottom-left-radius: 16px; } /* the company name in the rail carries the light-theme ink inline; on the navy rail it must be light */ html .bbds-mainrail div[style*="font-size: 20px"] { color: var(--twx-side-text) !important; font-size: 18px !important; } /* ========================================================================== * Premium sub-menus (2026-11-02, docs/notes/BUILD-PREMIUM-SUBMENUS-BRIEF.md part 1): the Partners look for every * in-page sub-menu ([data-ui="subnav"] / subnav-item / subnav-group, patch .dev/patch_subnav_core.js), the left-rail * drill rows ([data-ui="rail-item"] / rail-group) and the Kn tiles ([data-ui="stat"][data-tone]). Visual only. * ========================================================================== */ /* ---- in-page sub-menu: a soft panel, 38px rows with an icon, a filled accent pill for the active one ---- */ html [data-ui="subnav"] { background: var(--twx-surface); border: 1px solid var(--twx-border); border-radius: var(--twx-p-radius); padding: 8px; box-shadow: var(--twx-shadow-1); align-self: flex-start; box-sizing: border-box; max-width: 100%; } html [data-ui="subnav"] [data-ui="subnav-item"] { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 12px; border-radius: var(--twx-p-radius-sm); border: 1px solid transparent; font-size: 14px; font-weight: 500; line-height: 1.3; text-align: left; color: var(--twx-text-muted) !important; cursor: pointer; transition: background-color var(--twx-dur) var(--twx-ease), color var(--twx-dur) var(--twx-ease), box-shadow var(--twx-dur) var(--twx-ease); } html [data-ui="subnav"] [data-ui="subnav-item"]:not([aria-current="page"]) { background: transparent !important; border-color: transparent !important; } html [data-ui="subnav"] [data-ui="subnav-item"]:not([aria-current="page"]):hover { background: var(--twx-surface-hover) !important; color: var(--twx-text) !important; } html [data-ui="subnav"] [data-ui="subnav-item"][aria-current="page"] { background: var(--twx-accent) !important; border-color: var(--twx-accent) !important; color: var(--twx-on-accent) !important; font-weight: 600; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--twx-accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14); } html [data-ui="subnav"] [data-ui="subnav-item"]:focus-visible { outline: 2px solid var(--twx-focus); outline-offset: 1px; } html [data-ui="subnav"] .bb-subico-w { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: inherit; } html [data-ui="subnav"] .bb-subico-w svg { width: 17px; height: 17px; } html [data-ui="subnav"] .bb-sublabel { flex: 1 1 auto; min-width: 0; } html [data-ui="subnav"] .bb-subcount, html [data-ui="subnav"] [data-ui="badge"].bb-subcount { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--twx-radius-pill); background: var(--twx-warning-soft); color: var(--twx-warning-text); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; } html [data-ui="subnav"] [aria-current="page"] .bb-subcount { background: var(--twx-surface); color: var(--twx-warning-text); } html [data-ui="subnav"] [data-ui="subnav-group"] { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--twx-text-muted) !important; padding: 10px 12px 4px; margin-bottom: 2px; } html [data-ui="subnav"] > div:first-child > [data-ui="subnav-group"] { padding-top: 4px; } /* a vertical list on a wide screen fills the panel; the QC groups sit flush */ @media (min-width: 768px) { html [data-ui="subnav"]:not([data-sub-dir="row"]) [data-ui="subnav-item"] { width: 100%; margin-bottom: 2px; } /* one line per item, as before the icon came in: the panel grows to the longest name instead of wrapping one (a wrapped item is taller than its neighbours, and an even list of buttons is what reads as one menu) */ html [data-ui="subnav"]:not([data-sub-dir="row"]):not(.bb-set-rail) { width: auto; min-width: 14rem; } html [data-ui="subnav"]:not([data-sub-dir="row"]):not(.bb-set-rail) [data-ui="subnav-item"] { white-space: nowrap; } html [data-ui="subnav"]:not([data-sub-dir="row"]) > div { margin-bottom: 6px; } html [data-ui="subnav"]:not([data-sub-dir="row"]) > div:last-child { margin-bottom: 0; } } /* ---- the horizontal ones (People > Assets, Add New Employee, the dashboard stock alert tabs): a pill track ---- */ html [data-ui="subnav"][data-sub-dir="row"] { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; padding: 4px; background: var(--twx-surface-sunk); box-shadow: none; } html [data-ui="subnav"][data-sub-dir="row"] [data-ui="subnav-item"] { min-height: 34px; padding: 6px 14px; border-radius: var(--twx-radius-pill); gap: 8px; white-space: nowrap; } html [data-ui="subnav"][data-sub-dir="row"] [data-ui="subnav-item"]:not([aria-current="page"]):hover { background: var(--twx-surface) !important; } html .bb-invtabbar[data-ui="subnav"] { position: sticky; } html .bb-invtabbar[data-ui="subnav"] [data-ui="subnav-item"] { min-height: 28px; padding: 3px 12px; font-size: 12px; } html .bb-invtabbar[data-ui="subnav"] .bb-subico-w, html .bb-invtabbar[data-ui="subnav"] .bb-subico-w svg { width: 14px; height: 14px; } /* ---- phones: every sub-menu is one scrollable row; the page itself never scrolls sideways ---- */ @media (max-width: 767px) { html [data-ui="subnav"] { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } html [data-ui="subnav"][data-sub-dir="row"] { flex-wrap: nowrap; } html .bb-invtabbar[data-ui="subnav"] { flex-wrap: wrap; } html [data-ui="subnav"]:not(.bb-set-rail) [data-ui="subnav-item"] { flex: 0 0 auto; width: auto; white-space: nowrap; min-height: 40px; } html [data-ui="subnav"] [data-ui="subnav-group"] { padding-top: 2px; white-space: nowrap; } /* QC: each labelled group lies along the same row (label, then its items), so the whole menu is one swipe */ html [data-ui="subnav"]:not(.bb-set-rail) > div:has(> [data-ui="subnav-group"]) { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin: 0 8px 0 0; } html [data-ui="subnav"]:not(.bb-set-rail) > div > [data-ui="subnav-group"] { padding: 0 6px 0 4px; margin: 0; } } /* ---- left-rail drill rows (navy rail in both themes): icon on every row, the open group lit, items keep the pill ---- */ html .bbds-mainrail [data-ui="rail-item"], html .bbds-mainrail [data-ui="rail-group"] { min-height: 38px; border-radius: var(--twx-p-radius-sm); font-size: 14px; gap: 10px; } html .bbds-mainrail .bbds-dr-row .bbds-dr-ico { width: 18px; justify-content: center; color: inherit; } html .bbds-mainrail [data-ui="rail-group"] { font-weight: 600; } html .bbds-mainrail .bbds-dr-row[data-ui="rail-group"].bbds-dr-open, html .bbds-mainrail .bbds-dr-row[data-ui="rail-group"].bbds-dr-on { background: var(--twx-side-bg-2) !important; color: var(--twx-side-text) !important; box-shadow: inset 3px 0 0 var(--twx-side-active) !important; } html .bbds-mainrail .bbds-dr-row[data-ui="rail-group"].bbds-dr-on .bbds-dr-label, html .bbds-mainrail .bbds-dr-row[data-ui="rail-group"].bbds-dr-open .bbds-dr-label { color: var(--twx-side-text) !important; } html .bbds-mainrail .bbds-dr-row[data-ui="rail-group"].bbds-dr-on .bbds-dr-ico, html .bbds-mainrail .bbds-dr-row[data-ui="rail-group"].bbds-dr-open .bbds-dr-ico { color: #A5A3FF; } html .bbds-mainrail .bbds-dr-row[data-ui="rail-item"].bbds-dr-on { box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } html .bbds-mainrail .bbds-dr-list .bbds-dr-list { border-left: 1px solid var(--twx-side-line); margin-left: 8px; } html .bbds-mainrail .bbds-dr-count { font-size: 12px; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; } html .bbds-mainrail .bbds-dr-row:focus-visible { outline: 2px solid #A5A3FF; outline-offset: 1px; } /* ---- Kn tiles: calm 1px border, no glow, the tone in the icon chip and a thin left accent ---- */ /* the left edge stays 3px on every tile (the gate reads a 3px edge as the tile row's highlight rule; it must not change) */ html [data-ui="stat"][data-tone] { background-image: none !important; box-shadow: var(--twx-shadow-1) !important; border-left-color: var(--twx-border) !important; } html [data-ui="stat"][data-tone]:hover { box-shadow: var(--twx-shadow-1) !important; } html [data-ui="stat"][data-tone].bb-stat-go:hover { box-shadow: var(--twx-shadow-2) !important; } html [data-ui="stat"][data-tone="good"] { border-left-color: color-mix(in srgb, var(--twx-success) 75%, var(--twx-border)) !important; } html [data-ui="stat"][data-tone="warn"] { border-left-color: color-mix(in srgb, var(--twx-warning) 75%, var(--twx-border)) !important; } html [data-ui="stat"][data-tone="bad"] { border-left-color: color-mix(in srgb, var(--twx-danger) 75%, var(--twx-border)) !important; } html [data-ui="stat"][data-tone="info"] { border-left-color: color-mix(in srgb, var(--twx-info) 75%, var(--twx-border)) !important; } html [data-ui="stat"][data-tone] .bb-stat-ico { width: 34px; height: 34px; border-radius: var(--twx-p-radius-sm); background: var(--twx-surface-selected) !important; color: var(--twx-accent-text) !important; } html [data-ui="stat"][data-tone="neutral"] .bb-stat-ico { background: var(--twx-surface-sunk) !important; color: var(--twx-text-muted) !important; } html [data-ui="stat"][data-tone="good"] .bb-stat-ico { background: var(--twx-success-soft) !important; color: var(--twx-success-text) !important; } html [data-ui="stat"][data-tone="warn"] .bb-stat-ico { background: var(--twx-warning-soft) !important; color: var(--twx-warning-text) !important; } html [data-ui="stat"][data-tone="bad"] .bb-stat-ico { background: var(--twx-danger-soft) !important; color: var(--twx-danger-text) !important; } html [data-ui="stat"][data-tone="info"] .bb-stat-ico { background: var(--twx-info-soft) !important; color: var(--twx-info-text) !important; } html [data-ui="stat"][data-tone] .bb-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--twx-text-muted); } html [data-ui="stat"][data-tone] .bb-fig { color: var(--twx-text) !important; } html [data-ui="stat"][data-tone] .bb-stat-row > div > .text-xs.mt-1 { color: var(--twx-text-muted) !important; font-weight: 500 !important; } @media (max-width: 640px) { html [data-ui="stat"][data-tone] .bb-stat-ico { width: 30px; height: 30px; } } /* rail waiting counts: the warn pill (they only appear through BB_SUB_COUNT) */ html .bbds-mainrail [data-ui="rail-item"] .bbds-dr-count, html .bbds-mainrail [data-ui="rail-group"] .bbds-dr-count { background: var(--twx-warning) !important; color: var(--twx-on-warning) !important; } /* ==== 10-dashboard.css ==== */ /* 10-dashboard: dashboard */ /* Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. */ /* ========================================================================== * Dashboard redesign, pass 2: roomier rhythm, a clear three-level hierarchy * (hero KPI tiles > zone cards > rows), pill tab bar, larger radii and a softer * elevation scale. Same elements, same order, all visible; tokens only. * ========================================================================== */ /* ---- page head: bigger greeting, calm sub-lines ------------------------- */ [data-route="dashboard"] .bb-dashhead { margin-bottom: 6px; gap: 8px; } [data-route="dashboard"] .bb-dashhead-h { font-size: 28px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--twx-text); } [data-route="dashboard"] .bb-dashhead-d { font-size: 14px; font-weight: 500; color: var(--twx-text-muted); margin-top: 2px; } [data-route="dashboard"] .bb-dashhead-x { font-size: 14px; color: var(--twx-text-muted); } [data-route="dashboard"] .bb-dashhead .bb-btn { border-radius: var(--twx-radius-pill); padding: 8px 18px; box-shadow: var(--twx-shadow-1); } /* ---- personal strips (my day, my month, my pay) ------------------------- */ [data-route="dashboard"] .tab-content > .bb-card, [data-route="dashboard"].tab-content > .bb-card { border-radius: 14px; padding: 7px 16px; margin-bottom: 6px; box-shadow: var(--twx-shadow-1); } /* ---- KPI tiles: the loudest thing on the page --------------------------- */ [data-route="dashboard"] .bb-heroes { gap: 14px; margin-top: 0; margin-bottom: 8px; } [data-route="dashboard"] .bb-hero { padding: 8px 14px 7px; border-radius: 16px; border: 1px solid var(--twx-border); background-color: var(--twx-surface); box-shadow: var(--twx-shadow-2); row-gap: 2px; column-gap: 10px; } [data-route="dashboard"] .bb-hero-pri { border-color: var(--twx-accent); background-image: linear-gradient(160deg, color-mix(in srgb, var(--twx-accent) 16%, var(--twx-surface)), var(--twx-surface) 75%); box-shadow: var(--twx-shadow-2), 0 0 0 1px var(--twx-accent); } [data-route="dashboard"] .bb-hero-ico { width: 34px; height: 34px; border-radius: 11px; } [data-route="dashboard"] .bb-hero-k { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--twx-text-muted); align-self: center; min-width: 0; flex-wrap: wrap; row-gap: 2px; } [data-route="dashboard"] .bb-hero-v { font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.035em; overflow-wrap: anywhere; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--twx-text); } [data-route="dashboard"] .bb-hero-pri .bb-hero-v { font-size: clamp(20px, 1.8vw, 26px); color: var(--twx-accent); } [data-route="dashboard"] .bb-hero-s { font-size: 13px; line-height: 1.4; margin-top: 4px; color: var(--twx-text-muted); } /* the faint trend line sits in the corner; the caption keeps clear of it instead of running underneath */ [data-route="dashboard"] .bb-hero-s { padding-right: 48px; } [data-route="dashboard"] .bb-hero-spark svg { width: 40px; height: 15px; } /* ---- zone tabs: one pill track, raised selected pill -------------------- */ [data-route="dashboard"] .bb-ztabs { display: inline-flex; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 10px; border: 0; border-radius: var(--twx-radius-pill); background: var(--twx-surface-sunk); box-shadow: inset 0 0 0 1px var(--twx-border); overflow-x: auto; } [data-route="dashboard"] .bb-ztab { padding: 7px 18px; font-size: 14px; font-weight: 600; color: var(--twx-text-muted); border: 0; border-radius: var(--twx-radius-pill); background: transparent; white-space: nowrap; transition: color var(--twx-dur) var(--twx-ease), background-color var(--twx-dur) var(--twx-ease); } [data-route="dashboard"] .bb-ztab:hover { color: var(--twx-text); background: var(--twx-surface-hover); } [data-route="dashboard"] .bb-ztab.is-on { color: var(--twx-text); background: var(--twx-surface); box-shadow: var(--twx-shadow-1), 0 0 0 1px var(--twx-border); } /* ---- needs-attention strip: warning rail + roomy cells ------------------ */ [data-route="dashboard"] .bb-needs { padding: 10px 16px 12px; margin-bottom: 12px; border-radius: 18px; border-left: 5px solid var(--twx-warning); background: var(--twx-surface); box-shadow: var(--twx-shadow-1); } [data-route="dashboard"] .bb-needs-k { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 8px; } [data-route="dashboard"] .bb-needs-row { gap: 12px; } [data-route="dashboard"] .bb-needs-one { padding: 10px 14px; border-radius: 14px; background: var(--twx-surface-sunk); gap: 14px; } [data-route="dashboard"] .bb-needs-one:hover { background: var(--twx-surface-hover); } [data-route="dashboard"] .bb-needs-n { font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } [data-route="dashboard"] .bb-needs-l { font-size: 14px; font-weight: 600; color: var(--twx-text); } [data-route="dashboard"] .bb-needs-s { font-size: 12px; color: var(--twx-text-muted); } /* ---- zone headings and the grid of cards -------------------------------- */ [data-route="dashboard"] .bb-zone { margin-bottom: 12px; } [data-route="dashboard"] .bb-zone-h { padding: 2px 2px 6px; } [data-route="dashboard"] .bb-zone-t { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; } [data-route="dashboard"] .bb-zone-cv { font-size: 13px; color: var(--twx-text-muted); font-variant-numeric: tabular-nums; } [data-route="dashboard"] .bb-zone-body { gap: 12px; } [data-route="dashboard"] .bb-ovgrid { gap: 16px; } [data-route="dashboard"] .bb-ovcol { gap: 16px; } [data-route="dashboard"] .bb-ovcol > div > .bb-ovcard + .bb-ovcard { margin-top: 16px; } /* ---- cards: one framing for every panel --------------------------------- */ [data-route="dashboard"] .bb-ovcard, [data-route="dashboard"] .bb-zone-body > * > .bb-card, [data-route="dashboard"] .bb-ovcol .bb-card { border: 1px solid var(--twx-border); border-radius: 18px; background: var(--twx-surface); box-shadow: var(--twx-shadow-2); padding: 16px 20px; } [data-route="dashboard"] .bb-ovhead { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--twx-border); } [data-route="dashboard"] .bb-ovtitle { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--twx-text); } [data-route="dashboard"] .bb-ovper, [data-route="dashboard"] .bb-ovrow-s, [data-route="dashboard"] .bb-ovband-s, [data-route="dashboard"] .bb-rank-note { font-size: 12px; color: var(--twx-text-muted); } [data-route="dashboard"] .bb-ovtabs { gap: 6px; margin-bottom: 10px; border-bottom-color: var(--twx-border); } [data-route="dashboard"] .bb-ovtab { font-size: 13px; font-weight: 500; color: var(--twx-text-muted); padding: 8px 12px; } [data-route="dashboard"] .bb-ovtab.on { color: var(--twx-text); font-weight: 700; border-bottom-color: var(--twx-accent); } [data-route="dashboard"] .bb-ovrow { padding-top: 11px; padding-bottom: 11px; border-color: var(--twx-border); } [data-route="dashboard"] .bb-ovrow-k { font-size: 14px; color: var(--twx-text); } [data-route="dashboard"] .bb-ovrow-v, [data-route="dashboard"] .bb-ovstk-n, [data-route="dashboard"] .bb-ovbar-v, [data-route="dashboard"] .bb-ovband-v, [data-route="dashboard"] .bb-rank-fig { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } [data-route="dashboard"] .bb-ovrow-go:hover, [data-route="dashboard"] .bb-ovband-i.bb-ovrow-go:hover { background: var(--twx-surface-hover); border-radius: var(--twx-radius); } [data-route="dashboard"] .bb-ovbars { gap: 12px; } [data-route="dashboard"] .bb-ovbar-k { font-size: 13px; color: var(--twx-text); } [data-route="dashboard"] .bb-ovbar-t { height: 10px; background: var(--twx-surface-sunk); } [data-route="dashboard"] .bb-ovpri { font-size: 12px; font-weight: 700; padding: 2px 9px; } [data-route="dashboard"] .bb-ovband { gap: 16px; } [data-route="dashboard"] .bb-ovband-i { padding: 6px 4px; } [data-route="dashboard"] .bb-ovband-v { font-size: 26px; font-weight: 800; } [data-route="dashboard"] .bb-ovband-k { font-size: 13px; font-weight: 600; } [data-route="dashboard"] .bb-rank { gap: 12px; padding: 10px 0; } [data-route="dashboard"] .bb-rank + .bb-rank { border-top-color: var(--twx-border); } [data-route="dashboard"] .bb-rank-name { font-size: 14px; font-weight: 600; color: var(--twx-text); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } [data-route="dashboard"] .bb-rank-bar { height: 6px; margin-top: 6px; background: var(--twx-surface-sunk); } /* ---- charts: framed, with legible type ---------------------------------- */ [data-route="dashboard"] .bb-card svg text { font-variant-numeric: tabular-nums; fill: var(--twx-text-muted); } [data-route="dashboard"] .bb-card svg line[stroke-dasharray] { stroke: var(--twx-border); } [data-route="dashboard"] .bb-card select { border-radius: var(--twx-radius-pill); padding-left: 12px; } /* ---- mini tiles (Financial snapshot, stock, people): roomy, wrapping captions ---- */ [data-route="dashboard"] .bb-mini { padding: 7px 10px; border-radius: 14px; background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); gap: 0 8px; } [data-route="dashboard"] .bb-mini-go:hover { background: var(--twx-surface-hover); } [data-route="dashboard"] .bb-mini-k { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--twx-text-muted); } [data-route="dashboard"] .bb-mini-v { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } [data-route="dashboard"] .bb-mini-s { font-size: 12px; color: var(--twx-text-muted); white-space: normal; overflow: visible; text-overflow: clip; } /* ---- phones: stacked, single column rhythm ------------------------------- */ @media (max-width: 640px) { [data-route="dashboard"] .bb-dashhead-h { font-size: 26px; } [data-route="dashboard"] .bb-heroes { gap: 10px; margin-bottom: 20px; } [data-route="dashboard"] .bb-hero { padding: 14px 14px 12px; border-radius: 16px; } [data-route="dashboard"] .bb-hero-v, [data-route="dashboard"] .bb-hero-pri .bb-hero-v { font-size: 21px; overflow-wrap: anywhere; } [data-route="dashboard"] .bb-hero-ico { width: 30px; height: 30px; } [data-route="dashboard"] .bb-hero-k { letter-spacing: 0; } [data-route="dashboard"] .bb-ztabs { display: flex; flex-wrap: wrap; overflow-x: visible; border-radius: 22px; margin-bottom: 12px; } [data-route="dashboard"] .bb-ztab { padding: 9px 14px; font-size: 13px; } [data-route="dashboard"] .bb-ovgrid { grid-template-columns: minmax(0, 1fr); } [data-route="dashboard"] .bb-ovcard, [data-route="dashboard"] .bb-zone-body > * > .bb-card, [data-route="dashboard"] .bb-ovcol .bb-card { padding: 16px; border-radius: 16px; } [data-route="dashboard"] .bb-needs { padding: 12px 14px; border-left-width: 4px; } [data-route="dashboard"] .bb-ovrow-k { overflow-wrap: anywhere; } } [data-route="dashboard"] .bb-dashhead-d, [data-route="dashboard"] .bb-dashhead-x { line-height: 1.25; } [data-route="dashboard"] .bb-needs-go { color: var(--twx-text) !important; font-weight: 600; } /* ========================================================================== * Premium v3 (2026-11-01): Partners-style calm. Greeting in a header card with the * home hue on top, tiles with a neutral 1px border and lift on hover, one radius (14) * and the shadow-1 scale for every panel. Visual only. * ========================================================================== */ [data-route="dashboard"] .bb-dashhead { background: var(--twx-surface); border: 1px solid var(--twx-border); border-top: 3px solid var(--twx-accent); border-radius: 14px; padding: 18px 22px; box-shadow: var(--twx-shadow-1); margin-bottom: 14px; } [data-route="dashboard"] .bb-dashhead-h { font-size: 26px; font-weight: 750; letter-spacing: -0.025em; } [data-route="dashboard"] .bb-dashhead .bb-btn { border-radius: 10px; } [data-route="dashboard"] .tab-content > .bb-card, [data-route="dashboard"].tab-content > .bb-card { padding: 12px 18px; margin-bottom: 10px; } [data-route="dashboard"] .bb-heroes { margin-bottom: 14px; } [data-route="dashboard"] .bb-hero { padding: 14px 16px 12px; border-radius: 14px; box-shadow: var(--twx-shadow-1); transition: transform var(--twx-dur) var(--twx-ease), box-shadow var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } [data-route="dashboard"] .bb-hero-pri { border-color: var(--twx-border) !important; background: var(--twx-surface) !important; background-image: none !important; box-shadow: var(--twx-shadow-1); } [data-route="dashboard"] .bb-hero:hover { transform: translateY(-2px); box-shadow: var(--twx-shadow-2); border-color: var(--twx-border-strong); } [data-route="dashboard"] .bb-hero-k { letter-spacing: 0.05em; font-weight: 650; } [data-route="dashboard"] .bb-hero-v { font-weight: 750; } [data-route="dashboard"] .bb-hero-ico { border-radius: 10px; } [data-route="dashboard"] .bb-needs { border-radius: 14px; border-left-width: 3px; padding: 14px 18px; } [data-route="dashboard"] .bb-needs-one { border-radius: 12px; border: 1px solid var(--twx-border); } [data-route="dashboard"] .bb-ovcard, [data-route="dashboard"] .bb-zone-body > * > .bb-card, [data-route="dashboard"] .bb-ovcol .bb-card { border-radius: 14px; box-shadow: var(--twx-shadow-1); padding: 18px 22px; } [data-route="dashboard"] .bb-mini { border-radius: 12px; padding: 10px 12px; } @media (max-width: 640px) { [data-route="dashboard"] .bb-dashhead { padding: 14px 16px; } [data-route="dashboard"] .bb-ovcard, [data-route="dashboard"] .bb-zone-body > * > .bb-card, [data-route="dashboard"] .bb-ovcol .bb-card { padding: 16px; } } /* ========================================================================== * COMMAND CENTRE (2026-11-02, docs/notes/COMMAND-CENTRE-NOTES.md). New elements only (.bb-cc*), drawn on the * "Command centre" dashboard tab. Business-health tiles are dark navy cards in both themes; everything else uses * the surface tokens. Colour only for meaning (data-tone="good|warn|bad", in/out). Phone: one column. * ========================================================================== */ [data-route="dashboard"] .bb-cc { display: grid; gap: 18px; margin-top: 4px; min-width: 0; } [data-route="dashboard"] .bb-cc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 20px; border-radius: 16px; background: var(--twx-surface); border: 1px solid var(--twx-border); border-left: 3px solid var(--twx-accent); box-shadow: var(--twx-shadow-1); } [data-route="dashboard"] .bb-cc-brief { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 420px; min-width: 0; } [data-route="dashboard"] .bb-cc-brief-t { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--twx-text); } [data-route="dashboard"] .bb-cc-chip { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--twx-accent) 14%, transparent); color: var(--twx-accent); } [data-route="dashboard"] .bb-cc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } [data-route="dashboard"] .bb-cc-per { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--twx-radius-pill); background: var(--twx-surface-sunk); box-shadow: inset 0 0 0 1px var(--twx-border); } [data-route="dashboard"] .bb-cc-pb { min-height: 32px; padding: 4px 14px; border: 0; border-radius: var(--twx-radius-pill); background: transparent; color: var(--twx-text-muted); font-size: 14px; font-weight: 600; cursor: pointer; } [data-route="dashboard"] .bb-cc-pb:hover { color: var(--twx-text); background: var(--twx-surface-hover); } [data-route="dashboard"] .bb-cc-pb[aria-pressed="true"] { color: var(--twx-text); background: var(--twx-surface); box-shadow: var(--twx-shadow-1), 0 0 0 1px var(--twx-border); } [data-route="dashboard"] .bb-cc-cust { display: inline-flex; flex-wrap: wrap; gap: 6px; } [data-route="dashboard"] .bb-cc-cust input { min-height: 34px; border-radius: 10px; } [data-route="dashboard"] .bb-cc-gear { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--twx-border); background: var(--twx-surface); color: var(--twx-text-muted); cursor: pointer; } [data-route="dashboard"] .bb-cc-gear:hover { color: var(--twx-text); border-color: var(--twx-border-strong); } [data-route="dashboard"] .bb-cc-sec { display: grid; gap: 10px; min-width: 0; } [data-route="dashboard"] .bb-cc-sech { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 2px; } [data-route="dashboard"] .bb-cc-h { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--twx-text-muted); } [data-route="dashboard"] .bb-cc-subh { font-size: 13px; color: var(--twx-text-muted); } /* business health: dark navy cards, big numbers */ [data-route="dashboard"] .bb-cc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } [data-route="dashboard"] .bb-cc-tile { display: flex; flex-direction: column; gap: 6px; align-items: stretch; justify-content: flex-start; width: 100%; min-width: 0; text-align: left; font: inherit; padding: 16px 18px 14px; border-radius: 16px; border: 1px solid #22304A; background: linear-gradient(160deg, #16213A 0%, #0B1220 70%); color: #F5F7FA; box-shadow: var(--twx-shadow-2); transition: transform var(--twx-dur) var(--twx-ease), box-shadow var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } [data-route="dashboard"] button.bb-cc-tile { cursor: pointer; } [data-route="dashboard"] button.bb-cc-tile:hover { transform: translateY(-2px); border-color: #3A4A6B; box-shadow: var(--twx-shadow-3); } [data-route="dashboard"] button.bb-cc-tile:focus-visible { outline: 2px solid #A5A4FF; outline-offset: 2px; } [data-route="dashboard"] .bb-cc-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } [data-route="dashboard"] .bb-cc-tile-k { font-size: 13px; font-weight: 650; letter-spacing: 0.03em; color: #B4C0D3; } [data-route="dashboard"] .bb-cc-tile .bb-cc-chip { background: rgba(124, 123, 245, 0.18); color: #B9B8FF; } [data-route="dashboard"] .bb-cc-tile-v { font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: #FFFFFF; } [data-route="dashboard"] .bb-cc-tile[data-tone="good"] .bb-cc-tile-v { color: #34D399; } [data-route="dashboard"] .bb-cc-tile[data-tone="warn"] .bb-cc-tile-v { color: #FBBF24; } [data-route="dashboard"] .bb-cc-tile[data-tone="bad"] .bb-cc-tile-v { color: #F87171; } [data-route="dashboard"] .bb-cc-tile-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } [data-route="dashboard"] .bb-cc-tile-s { font-size: 13px; line-height: 1.4; color: #C9D3E1; min-width: 0; } [data-route="dashboard"] .bb-cc-tile .bb-cc-spark { flex: 0 0 auto; color: #8F8EF7; } [data-theme="dark"] [data-route="dashboard"] .bb-cc-tile { border-color: #2A374D; background: linear-gradient(160deg, #1B2740 0%, #131C2E 70%); } /* cards, lists and tables */ [data-route="dashboard"] .bb-cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } [data-route="dashboard"] .bb-cc-card { min-width: 0; padding: 16px 18px; border-radius: 16px; background: var(--twx-surface); border: 1px solid var(--twx-border); box-shadow: var(--twx-shadow-1); display: grid; gap: 10px; align-content: start; } [data-route="dashboard"] .bb-cc-ct { margin: 0; font-size: 15px; font-weight: 700; color: var(--twx-text); } [data-route="dashboard"] .bb-cc-tw { overflow-x: auto; max-width: 100%; } [data-route="dashboard"] .bb-cc-t { width: 100%; border-collapse: collapse; font-size: 14px; } [data-route="dashboard"] .bb-cc-t th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--twx-text-muted); padding: 6px 8px; border-bottom: 1px solid var(--twx-border); white-space: nowrap; } [data-route="dashboard"] .bb-cc-t td { padding: 7px 8px; border-bottom: 1px solid var(--twx-border); color: var(--twx-text); } [data-route="dashboard"] .bb-cc-t tbody tr:hover { background: var(--twx-surface-hover); } [data-route="dashboard"] .bb-cc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-route="dashboard"] .bb-cc-t th.bb-cc-num { text-align: right; } [data-route="dashboard"] .bb-cc-empty { font-size: 14px; color: var(--twx-text-muted); padding: 10px 2px; } [data-route="dashboard"] .bb-cc span[data-tone="good"], [data-route="dashboard"] .bb-cc b[data-tone="good"] { color: var(--twx-success-text); } [data-route="dashboard"] .bb-cc span[data-tone="warn"], [data-route="dashboard"] .bb-cc b[data-tone="warn"] { color: var(--twx-warning-text); } [data-route="dashboard"] .bb-cc span[data-tone="bad"], [data-route="dashboard"] .bb-cc b[data-tone="bad"] { color: var(--twx-danger-text); } /* needs you now */ [data-route="dashboard"] .bb-cc-inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } [data-route="dashboard"] .bb-cc-ib { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--twx-surface); border: 1px solid var(--twx-border); border-left: 4px solid var(--twx-warning); box-shadow: var(--twx-shadow-1); color: var(--twx-text); } [data-route="dashboard"] .bb-cc-ib[data-tone="bad"] { border-left-color: var(--twx-danger); } [data-route="dashboard"] .bb-cc-ib-n { flex: 0 0 auto; min-width: 44px; font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--twx-text); } [data-route="dashboard"] .bb-cc-ib-l { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } [data-route="dashboard"] .bb-cc-ib-t { font-size: 15px; font-weight: 650; color: var(--twx-text); } [data-route="dashboard"] .bb-cc-ib-s { font-size: 13px; color: var(--twx-text-muted); } [data-route="dashboard"] .bb-cc-ib[data-tone="bad"] .bb-cc-ib-s { color: var(--twx-danger-text); font-weight: 600; } [data-route="dashboard"] .bb-cc-open { flex: 0 0 auto; min-height: 32px; padding: 4px 16px; border-radius: 10px; border: 1px solid var(--twx-border); background: var(--twx-surface); color: var(--twx-text); font-size: 14px; font-weight: 600; cursor: pointer; } [data-route="dashboard"] .bb-cc-open:hover { border-color: var(--twx-accent); color: var(--twx-accent); } /* money: waterfall + 30-day flow */ [data-route="dashboard"] .bb-cc-wf { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } [data-route="dashboard"] .bb-cc-wf-r { display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: var(--twx-text); } [data-route="dashboard"] .bb-cc-wf-r[data-k="net"] { padding-top: 8px; border-top: 1px solid var(--twx-border); font-weight: 700; } [data-route="dashboard"] .bb-cc-wf-l { color: var(--twx-text-muted); } [data-route="dashboard"] .bb-cc-wf-bar { height: 10px; border-radius: 999px; background: var(--twx-surface-sunk); overflow: hidden; } [data-route="dashboard"] .bb-cc-wf-fill { display: block; height: 100%; border-radius: 999px; background: var(--twx-accent); } [data-route="dashboard"] .bb-cc-wf-r[data-tone="in"] .bb-cc-wf-fill, [data-route="dashboard"] .bb-cc-wf-r[data-tone="good"] .bb-cc-wf-fill { background: var(--twx-success); } [data-route="dashboard"] .bb-cc-wf-r[data-tone="out"] .bb-cc-wf-fill { background: color-mix(in srgb, var(--twx-danger) 65%, var(--twx-surface)); } [data-route="dashboard"] .bb-cc-wf-r[data-tone="bad"] .bb-cc-wf-fill { background: var(--twx-danger); } [data-route="dashboard"] .bb-cc-wf-v { font-weight: 650; } [data-route="dashboard"] .bb-cc-flow { width: 100%; height: 120px; display: block; } [data-route="dashboard"] .bb-cc-flow rect[data-tone="in"] { fill: var(--twx-success); } [data-route="dashboard"] .bb-cc-flow rect[data-tone="out"] { fill: var(--twx-danger); } [data-route="dashboard"] .bb-cc-flowsum { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--twx-text-muted); } [data-route="dashboard"] .bb-cc-flowsum b { color: var(--twx-text); } /* people line + unusual */ [data-route="dashboard"] .bb-cc-people { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } [data-route="dashboard"] .bb-cc-pp { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 14px; background: var(--twx-surface); border: 1px solid var(--twx-border); box-shadow: var(--twx-shadow-1); } [data-route="dashboard"] .bb-cc-pp-v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--twx-text); } [data-route="dashboard"] .bb-cc-pp[data-tone="warn"] .bb-cc-pp-v { color: var(--twx-warning-text); } [data-route="dashboard"] .bb-cc-pp-l { font-size: 13px; color: var(--twx-text-muted); } [data-route="dashboard"] .bb-cc-warn { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } [data-route="dashboard"] .bb-cc-w { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; font-size: 14px; background: var(--twx-warning-soft); border: 1px solid color-mix(in srgb, var(--twx-warning) 40%, transparent); color: var(--twx-text); } [data-route="dashboard"] .bb-cc-w[data-tone="bad"] { background: var(--twx-danger-soft); border-color: color-mix(in srgb, var(--twx-danger) 40%, transparent); } [data-route="dashboard"] .bb-cc-w .bb-cc-chip { background: transparent; color: var(--twx-warning-text); } [data-route="dashboard"] .bb-cc-w[data-tone="bad"] .bb-cc-chip { color: var(--twx-danger-text); } [data-route="dashboard"] .bb-cc-w > span:nth-child(2) { flex: 1 1 auto; min-width: 0; } /* the ⚙ dialog */ [data-route="dashboard"] .bb-cc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; } [data-route="dashboard"] .bb-cc-in { display: flex; align-items: center; gap: 6px; } [data-route="dashboard"] .bb-cc-in input { flex: 1 1 auto; min-width: 0; min-height: 36px; } [data-route="dashboard"] .bb-cc-sfx { font-size: 13px; color: var(--twx-text-muted); } [data-route="dashboard"] .bb-cc-chk { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; color: var(--twx-text); } [data-route="dashboard"] .bb-cc-chk input { width: 18px; height: 18px; } [data-route="dashboard"] .bb-cc-err { font-size: 14px; margin-bottom: 10px; color: var(--twx-danger-text); } @media (max-width: 640px) { [data-route="dashboard"] .bb-cc-top { padding: 14px 16px; } [data-route="dashboard"] .bb-cc-tiles, [data-route="dashboard"] .bb-cc-grid, [data-route="dashboard"] .bb-cc-form { grid-template-columns: minmax(0, 1fr); } [data-route="dashboard"] .bb-cc-tile-v { font-size: 28px; } [data-route="dashboard"] .bb-cc-ib { flex-wrap: wrap; } [data-route="dashboard"] .bb-cc-wf-r { grid-template-columns: minmax(84px, 120px) 1fr auto; } [data-route="dashboard"] .bb-cc-per { max-width: 100%; overflow-x: auto; } } @media (prefers-reduced-motion: reduce) { [data-route="dashboard"] .bb-cc-tile { transition: none; } [data-route="dashboard"] button.bb-cc-tile:hover { transform: none; } } [data-route="dashboard"] .bb-cc-flow .bb-cc-flow-0 { stroke: var(--twx-border-strong); stroke-width: 0.3; } /* ==== 20-sales.css ==== */ /* 20-sales: orders, deliveryCoord, courierMoney, returns, cases, customers, reviewMgmt, influencers, pos (also couriers) */ /* Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. */ /* ========================================================================== * Sales area: premium pass (2026-11-01). Shared components come from 00-base; this file only adds the * ops module hue on the page header, calm tiles (neutral 1px border, no coloured edges) and route-specific markup. * ========================================================================== */ [data-route="orders"] [data-ui="page-header"].bb-page-head, [data-route="deliveryCoord"] [data-ui="page-header"].bb-page-head, [data-route="courierMoney"] [data-ui="page-header"].bb-page-head, [data-route="returns"] [data-ui="page-header"].bb-page-head, [data-route="cases"] [data-ui="page-header"].bb-page-head, [data-route="customers"] [data-ui="page-header"].bb-page-head, [data-route="reviewMgmt"] [data-ui="page-header"].bb-page-head, [data-route="influencers"] [data-ui="page-header"].bb-page-head, [data-route="pos"] [data-ui="page-header"].bb-page-head, [data-route="couriers"] [data-ui="page-header"].bb-page-head { border-top: 3px solid var(--twx-info); } [data-route="orders"] [data-ui="stat"].bb-stat-go:hover, [data-route="deliveryCoord"] [data-ui="stat"].bb-stat-go:hover, [data-route="courierMoney"] [data-ui="stat"].bb-stat-go:hover, [data-route="returns"] [data-ui="stat"].bb-stat-go:hover, [data-route="cases"] [data-ui="stat"].bb-stat-go:hover, [data-route="customers"] [data-ui="stat"].bb-stat-go:hover, [data-route="reviewMgmt"] [data-ui="stat"].bb-stat-go:hover, [data-route="influencers"] [data-ui="stat"].bb-stat-go:hover, [data-route="pos"] [data-ui="stat"].bb-stat-go:hover, [data-route="couriers"] [data-ui="stat"].bb-stat-go:hover { transform: translateY(-2px); box-shadow: var(--twx-shadow-2); } [data-route="orders"] [data-ui="stat"] .bb-label, [data-route="deliveryCoord"] [data-ui="stat"] .bb-label, [data-route="courierMoney"] [data-ui="stat"] .bb-label, [data-route="returns"] [data-ui="stat"] .bb-label, [data-route="cases"] [data-ui="stat"] .bb-label, [data-route="customers"] [data-ui="stat"] .bb-label, [data-route="reviewMgmt"] [data-ui="stat"] .bb-label, [data-route="influencers"] [data-ui="stat"] .bb-label, [data-route="pos"] [data-ui="stat"] .bb-label, [data-route="couriers"] [data-ui="stat"] .bb-label { white-space: normal; overflow: visible; text-overflow: clip; } [data-route="orders"] [data-ui="card"] [data-ui="card"], [data-route="deliveryCoord"] [data-ui="card"] [data-ui="card"], [data-route="courierMoney"] [data-ui="card"] [data-ui="card"], [data-route="returns"] [data-ui="card"] [data-ui="card"], [data-route="cases"] [data-ui="card"] [data-ui="card"], [data-route="customers"] [data-ui="card"] [data-ui="card"], [data-route="reviewMgmt"] [data-ui="card"] [data-ui="card"], [data-route="influencers"] [data-ui="card"] [data-ui="card"], [data-route="pos"] [data-ui="card"] [data-ui="card"], [data-route="couriers"] [data-ui="card"] [data-ui="card"] { box-shadow: none; } /* ---- Orders: the wide table stays readable; the wrapper scrolls sideways, the sticky columns stay ---- */ [data-route="orders"] .bb-ordtbl { border-collapse: separate; border-spacing: 0; } [data-route="orders"] .bb-ordtbl thead th { position: sticky; top: 0; z-index: 2; padding-left: 6px; padding-right: 6px; vertical-align: bottom; font-size: 12px; letter-spacing: 0.02em; background: var(--twx-surface-sunk); } [data-route="orders"] .bb-ordtbl tbody td { padding-left: 6px; padding-right: 6px; vertical-align: middle; } [data-route="orders"] .bb-ordtbl tbody td .text-xs { white-space: normal; max-width: 260px; line-height: 1.35; color: var(--twx-text-muted); } [data-route="orders"] .bb-ordtbl tbody td:nth-child(2) { font-weight: 600; letter-spacing: 0.01em; } [data-route="orders"] .bb-ordtbl td.bbds-num-auto, [data-route="orders"] .bb-ordtbl th.bbds-num-auto, [data-route="orders"] .bb-ordtbl td.bb-num, [data-route="orders"] .bb-ordtbl th.bb-num { text-align: right; font-variant-numeric: tabular-nums; } [data-route="orders"] .bb-ordtbl td.bbds-num-auto { font-weight: 600; } [data-route="orders"] .bb-ordtbl td.bbds-num-auto .text-xs { font-weight: 400; margin-left: auto; } [data-route="orders"] .bb-ordtbl [data-ui="badge"] { padding-left: 8px; padding-right: 8px; } [data-route="orders"] .bb-ordtbl td .bb-btn { min-height: 30px; } [data-route="orders"] .bb-ordtbl td .bb-more { border: 1px solid var(--twx-border); background: var(--twx-surface); color: var(--twx-text); min-width: 32px; min-height: 32px; } [data-route="orders"] .bb-ordtbl td .bb-more:hover { background: var(--twx-surface-sunk); border-color: var(--twx-border-strong); } [data-route="orders"] .bb-ordtbl td input:not([type=checkbox]) { background: var(--twx-surface); color: var(--twx-text); border-color: var(--twx-border-strong); min-height: 28px; } [data-route="orders"] .bb-ordtbl td input[type=checkbox], [data-route="orders"] .bb-rowcards input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--twx-accent); } [data-route="orders"] .bb-ordtbl tbody tr:nth-child(even) td { background-color: var(--twx-surface); } [data-route="orders"] .bb-ordtbl tbody tr:nth-child(even):hover td, [data-route="orders"] .bb-ordtbl tbody tr:hover td { background-color: var(--twx-surface-hover); } [data-route="orders"] .bb-ordtbl tbody td:first-child, [data-route="orders"] .bb-ordtbl tbody td:nth-child(2) { background-clip: padding-box; } [data-route="orders"] .bb-ordbar { gap: 8px; align-items: flex-end; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--twx-border); } [data-route="orders"] .bb-rowcard { border: 1px solid var(--twx-border); border-radius: var(--twx-radius); background: var(--twx-surface); padding: 10px 12px; box-shadow: var(--twx-shadow-1); } [data-route="orders"] [data-ui="card"] > .bb-rowcards { color: var(--twx-text); } /* bulk-action bar: prominent */ [data-route="orders"] [data-ui="card"][class*="sticky"], [data-route="orders"] .bb-bulkbar, [data-route="orders"] [data-bb="bulkbar"] { background: var(--twx-accent-soft, var(--twx-surface-selected)); border: 1px solid var(--twx-accent); border-radius: var(--twx-radius-lg); box-shadow: var(--twx-shadow-2); } /* returned-parcel and notice cards: calm rows with a clear amount */ [data-route="orders"] [data-ui="card"] > div > .flex.items-center.gap-2.flex-wrap.py-1 { border-top: 1px solid var(--twx-border); padding-top: 4px; padding-bottom: 4px; } [data-route="orders"] [data-ui="card"] > div > .flex.items-center.gap-2.flex-wrap.py-1 .text-sm { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; } /* order form: sections and field groups */ [data-route="orders"] [data-ui="form-row"] .bb-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } [data-route="orders"] [data-ui="card"] h2, [data-route="orders"] [data-ui="card"] h3 { font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--twx-border); margin-bottom: 8px; } [data-route="orders"] [data-ui="card"] .grid { gap: 12px; } [data-route="orders"] [data-ui="card"] .grid > [data-ui="form-row"] { padding: 2px 0; } [data-route="orders"] [data-ui="card"] input:focus-visible, [data-route="orders"] [data-ui="card"] select:focus-visible { border-color: var(--twx-accent); } /* ---- Courier money: day lines ---- */ [data-route="courierMoney"] [data-ui="card"] { border-radius: var(--twx-radius-lg); padding-top: 14px; } [data-route="courierMoney"] [data-ui="card"] .flex.justify-between { align-items: baseline; padding-top: 6px; padding-bottom: 6px; font-variant-numeric: tabular-nums; } [data-route="courierMoney"] [data-ui="card"] .flex.justify-between > :last-child { font-weight: 600; white-space: nowrap; } [data-route="courierMoney"] [data-ui="card"] .text-xs { color: var(--twx-text-muted); } [data-route="courierMoney"] [data-ui="card"] .font-medium:first-child { font-size: 15px; } /* ---- Returns, cases, customers, reviews, influencers, delivery coordinator: calm tables ---- */ /* ---- POS: large targets, clear totals ---- */ [data-route="pos"] .bb-btn { min-height: 44px; font-size: 15px; } [data-route="pos"] .bb-main input:not([type=checkbox]):not([type=radio]), [data-route="pos"] .bb-main select { min-height: 42px; font-size: 15px; } [data-route="pos"] [data-ui="card"] { padding: 16px; } [data-route="pos"] [data-ui="card"] .text-2xl, [data-route="pos"] [data-ui="card"] .text-lg { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } [data-route="pos"] table td.bb-num, [data-route="pos"] table td.bbds-num-auto, [data-route="pos"] table td.text-right { text-align: right; font-variant-numeric: tabular-nums; } [data-route="pos"] table tfoot td, [data-route="pos"] table tfoot th { font-size: 15px; } /* ---- 390px ---- */ @media (max-width: 640px) { [data-route="orders"] .bb-ordtbl tbody td, [data-route="orders"] .bb-ordtbl thead th { padding-left: 8px; padding-right: 8px; } [data-route="orders"] .bb-rowcard { padding: 10px; } [data-route="pos"] .bb-btn { min-height: 48px; } } /* ---- bolder pass: Orders ---- */ [data-route="orders"] .bb-ordtbl tbody td { padding-top: 8px; padding-bottom: 8px; } [data-route="orders"] .bb-ordtbl thead th { background: var(--twx-surface-sunk); box-shadow: 0 1px 0 var(--twx-border); } [data-route="orders"] .bb-ordtbl tbody td:nth-child(2) { color: var(--twx-accent-text); font-size: 14px; } [data-route="orders"] .bb-ordtbl td .bb-btn-accent { padding-left: 14px; padding-right: 14px; box-shadow: var(--twx-shadow-1); } [data-route="orders"] .bb-ordbar { padding: 0 0 8px; } [data-route="orders"] .bb-rowcard { border-radius: 14px; padding: 10px 14px; } /* ---- bolder pass: POS ---- */ [data-route="pos"] [data-ui="card"] { border-radius: 18px; padding: 20px; } [data-route="pos"] .bb-main input[placeholder^="Scan"] { min-height: 56px; font-size: 18px; border-width: 2px; border-radius: 14px; } [data-route="pos"] .bb-main .grid > button, [data-route="pos"] .bb-main .grid > div[role=button] { border-radius: 14px; border: 1px solid var(--twx-border); box-shadow: var(--twx-shadow-1); padding: 12px; transition: border-color var(--twx-dur) var(--twx-ease), box-shadow var(--twx-dur) var(--twx-ease); } [data-route="pos"] .bb-main .grid > button:hover { border-color: var(--twx-accent); box-shadow: var(--twx-shadow-2); } [data-route="pos"] .bb-main .text-2xl { font-size: 44px; line-height: 1.05; } [data-route="pos"] .bb-btn-accent, [data-route="pos"] .bb-btn-good { box-shadow: var(--twx-shadow-2); } /* ---- customers: status and action columns calm ---- */ [data-route="customers"] table td .bb-btn { min-width: 64px; } [data-route="returns"] [data-ui="card"] h2, [data-route="returns"] [data-ui="card"] h3, [data-route="returns"] [data-ui="card"] > .font-medium { font-size: 17px; font-weight: 800; } /* ---- Courier money: custom markup (.bb-card without hook, inline borders). No thick left border / tinted fill on the day cards: the gate reads those as "highlighted rows". ---- */ [data-route="courierMoney"] .tab-content > div > .mb-4:first-child { padding: 10px 18px 10px; border-radius: 14px; border: 1px solid var(--twx-border); border-top: 3px solid var(--twx-info); background: var(--twx-surface); box-shadow: var(--twx-shadow-1); margin-bottom: 10px !important; } [data-route="courierMoney"] .tab-content > div > .mb-4:first-child > div:nth-child(1) { font-weight: 600; letter-spacing: 0.14em; color: var(--twx-accent-text) !important; } [data-route="courierMoney"] .tab-content > div > .mb-4:first-child > div:nth-child(2) { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.03em; line-height: 1.15; } [data-route="courierMoney"] .tab-content > div > .mb-4:first-child > .text-sm { font-size: 14px; line-height: 1.5; margin-top: 4px !important; } [data-route="courierMoney"] .bb-card { border-radius: 14px !important; box-shadow: var(--twx-shadow-1); } [data-route="courierMoney"] .tab-content > div > div > .bb-card { padding: 14px 20px !important; margin-bottom: 10px !important; } [data-route="courierMoney"] .tab-content > div > div > .bb-card > .flex:first-child > div:first-child { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -0.02em; } [data-route="courierMoney"] .bb-card .flex.justify-between, [data-route="courierMoney"] .bb-card div[style*="dotted"] { font-variant-numeric: tabular-nums; } [data-route="courierMoney"] .tab-content > div > .bb-card.mb-3 { border-width: 1px !important; padding: 10px 16px !important; } [data-route="courierMoney"] .bb-card .bb-btn { min-height: 42px; padding-left: 20px; padding-right: 20px; font-size: 15px; border-radius: 10px; } /* ---- prodfix (2026-11-02): Counter Sale product cards. The price stays on one line (the stock badge wraps below it), * and a negative "check count" badge is solid red with a red card edge. Visual only. ---- */ [data-route="pos"] .bb-pos-pricerow { min-width: 0; } [data-route="pos"] .bb-pos-price { white-space: nowrap; font-size: 15px; letter-spacing: -0.01em; } [data-route="pos"] .bb-pos-stock { font-size: 12px; line-height: 1.35; max-width: 100%; } [data-route="pos"] .bb-pos-stock[data-stock="negative"] { background: var(--twx-danger) !important; color: var(--twx-on-danger) !important; border-color: var(--twx-danger) !important; } [data-route="pos"] .bb-main .grid > button:has(.bb-pos-stock[data-stock="negative"]) { border-color: var(--twx-danger); box-shadow: 0 0 0 1px var(--twx-danger), var(--twx-shadow-1); } /* ---- meta (2026-11-02): the "Imported from Meta" card in Influencers > Daily ad spend (BbMetaCard, .dev/patch_meta.js). * Premium card look: rounded, calm mini tiles, list rows with hairlines, a soft token panel. Visual only. ---- */ [data-route="influencers"] .bb-meta-card { border-radius: var(--twx-radius-lg); box-shadow: var(--twx-shadow-1); } [data-route="influencers"] .bb-meta-card > .flex:first-child > .font-medium { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } [data-route="influencers"] .bb-meta-mini { border: 1px solid var(--twx-border); border-radius: var(--twx-radius); padding: 10px 12px; } [data-route="influencers"] .bb-meta-mini .text-sm { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } [data-route="influencers"] .bb-meta-item { min-height: 36px; } [data-route="influencers"] .bb-meta-item .bb-btn, [data-route="influencers"] .bb-meta-card .bb-btn { min-height: 32px; border-radius: 10px; } [data-route="influencers"] .bb-meta-token { border: 1px solid var(--twx-border); border-radius: var(--twx-radius); } [data-route="influencers"] .bb-meta-token input[type="password"] { border-radius: 10px; } [data-route="influencers"] .bb-meta-chip { font-size: 12px; vertical-align: middle; } @media (max-width: 767px) { [data-route="influencers"] .bb-meta-mini { flex-basis: 100%; } [data-route="influencers"] .bb-meta-token input[type="password"] { min-width: 0 !important; width: 100%; } } /* ==== 30-stock.css ==== */ /* 30-stock: materials, packing, purchases, products */ /* Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. */ /* ========================================================================== * Stock area, premium pass (2026-11-01). Builds on 00-base (cards, tables, tiles, badges, tabs). * Area job only: the inventory hue on the page header, calm notices, form grouping, * right-aligned quantities. No gradients, no coloured tile outlines, no hiding. * ========================================================================== */ /* page header: panel, radius 14, 3px inventory (teal) top rule */ [data-route="materials"] [data-ui="page-header"], [data-route="packing"] [data-ui="page-header"], [data-route="purchases"] [data-ui="page-header"], [data-route="products"] [data-ui="page-header"] { background: var(--twx-surface); border: 1px solid var(--twx-border); border-top: 3px solid #0D9488; border-radius: 14px; box-shadow: var(--twx-shadow-1); padding: 18px 22px; margin-bottom: 16px; } /* cards: one radius and rhythm */ [data-route="materials"] [data-ui="card"], [data-route="packing"] [data-ui="card"], [data-route="purchases"] [data-ui="card"], [data-route="products"] [data-ui="card"] { border-radius: 14px; margin-bottom: 14px; } [data-route="materials"] .bb-card.p-4, [data-route="packing"] .bb-card.p-4, [data-route="purchases"] .bb-card.p-4, [data-route="products"] .bb-card.p-4 { padding: 18px 22px; } /* notices: calm sunk panels; their coloured edge stays (it carries meaning) */ [data-route="materials"] .bb-card.p-3, [data-route="packing"] .bb-card.p-3, [data-route="purchases"] .bb-card.p-3, [data-route="products"] .bb-card.p-3 { background: var(--twx-surface-sunk) !important; box-shadow: none; border-radius: 12px; padding: 12px 16px; line-height: 1.5; } [data-route="materials"] .bb-card.p-3 [role="heading"], [data-route="packing"] .bb-card.p-3 [role="heading"], [data-route="purchases"] .bb-card.p-3 [role="heading"], [data-route="products"] .bb-card.p-3 [role="heading"] { font-weight: 600; color: var(--twx-text); } [data-route="materials"] .bb-card.p-3 .text-xs, [data-route="packing"] .bb-card.p-3 .text-xs, [data-route="purchases"] .bb-card.p-3 .text-xs, [data-route="products"] .bb-card.p-3 .text-xs { color: var(--twx-text-muted) !important; } [data-route="materials"] .bb-card.p-3 .bb-btn, [data-route="packing"] .bb-card.p-3 .bb-btn, [data-route="purchases"] .bb-card.p-3 .bb-btn, [data-route="products"] .bb-card.p-3 .bb-btn { margin-top: 8px; } /* disclosure buttons and form-card titles read as section headings */ [data-route="materials"] .bb-card > button.font-medium, [data-route="packing"] .bb-card > button.font-medium, [data-route="purchases"] .bb-card > button.font-medium, [data-route="products"] .bb-card > button.font-medium { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--twx-text); margin-bottom: 6px; width: 100%; text-align: left; } [data-route="materials"] .bb-card > button.font-medium:hover, [data-route="packing"] .bb-card > button.font-medium:hover, [data-route="purchases"] .bb-card > button.font-medium:hover, [data-route="products"] .bb-card > button.font-medium:hover { color: var(--twx-accent-text); } [data-route="materials"] .bb-card.p-4 > .font-medium, [data-route="packing"] .bb-card.p-4 > .font-medium, [data-route="purchases"] .bb-card.p-4 > .font-medium, [data-route="products"] .bb-card.p-4 > .font-medium { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--twx-text); padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--twx-border); } /* forms: spaced grid, calm labels, sections divided */ [data-route="materials"] .grid, [data-route="packing"] .grid, [data-route="purchases"] .grid, [data-route="products"] .grid { column-gap: 14px; row-gap: 14px; } [data-route="materials"] .bbds-field > .bb-label, [data-route="packing"] .bbds-field > .bb-label, [data-route="purchases"] .bbds-field > .bb-label, [data-route="products"] .bbds-field > .bb-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--twx-text-muted); } [data-route="materials"] .bb-card.p-4 .text-xs.uppercase, [data-route="packing"] .bb-card.p-4 .text-xs.uppercase, [data-route="purchases"] .bb-card.p-4 .text-xs.uppercase, [data-route="products"] .bb-card.p-4 .text-xs.uppercase { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--twx-text-muted); margin-top: 6px; margin-bottom: 8px; } [data-route="products"] .bb-card.p-4 > .mt-3, [data-route="purchases"] .bb-card.p-4 > .mt-3 { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--twx-border); } [data-route="products"] .bb-card.p-4 > .mt-4.pt-3 { margin-top: 20px; padding-top: 16px; border-top-color: var(--twx-border); } [data-route="materials"] input:not([type=checkbox]):not([type=radio]):not([type=file]), [data-route="materials"] select, [data-route="packing"] input:not([type=checkbox]):not([type=radio]):not([type=file]), [data-route="packing"] select, [data-route="purchases"] input:not([type=checkbox]):not([type=radio]):not([type=file]), [data-route="purchases"] select, [data-route="products"] input:not([type=checkbox]):not([type=radio]):not([type=file]), [data-route="products"] select { min-height: 38px; border-radius: 10px; } /* variant grid: seven fields no longer squeezed into one row */ [data-route="products"] .grid.items-center[class*="sm:grid-cols-7"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; } [data-route="products"] .grid.items-center[class*="sm:grid-cols-7"] input, [data-route="products"] .grid.items-center[class*="sm:grid-cols-7"] select { min-width: 0; width: 100%; } [data-route="products"] .bb-card.p-4 .mb-2.pb-2 { padding: 12px; margin-bottom: 12px; border: 1px solid var(--twx-border); border-radius: 12px; background: var(--twx-surface-sunk); } /* filter rows: one quiet panel */ [data-route="materials"] .flex.items-center.gap-2.flex-wrap.mb-3:not(:has([data-ui="stat"])), [data-route="packing"] .flex.items-center.gap-2.flex-wrap.mb-3:not(:has([data-ui="stat"])), [data-route="purchases"] .flex.items-center.gap-2.flex-wrap.mb-3:not(:has([data-ui="stat"])), [data-route="products"] .flex.items-center.gap-2.flex-wrap.mb-3:not(:has([data-ui="stat"])) { gap: 8px; padding: 10px 12px; margin-bottom: 14px; background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); border-radius: 12px; } [data-route="materials"] .flex-wrap.gap-2, [data-route="packing"] .flex-wrap.gap-2, [data-route="purchases"] .flex-wrap.gap-2, [data-route="products"] .flex-wrap.gap-2 { row-gap: 8px; } /* stock tables: quantities right-aligned, tabular; reorder notes readable */ [data-route="materials"] table th:nth-child(4), [data-route="materials"] table td:nth-child(4), [data-route="materials"] table th:nth-child(5), [data-route="materials"] table td:nth-child(5), [data-route="packing"] table th:nth-child(4), [data-route="packing"] table td:nth-child(4), [data-route="packing"] table th:nth-child(5), [data-route="packing"] table td:nth-child(5), [data-route="products"] table th:nth-child(6), [data-route="products"] table td:nth-child(6) { text-align: right; font-variant-numeric: tabular-nums; } [data-route="materials"] table td:nth-child(6), [data-route="packing"] table td:nth-child(6) { font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 24px; } [data-route="materials"] table th:nth-child(n+7):nth-child(-n+8), [data-route="materials"] table td:nth-child(n+7):nth-child(-n+8), [data-route="packing"] table th:nth-child(n+7):nth-child(-n+8), [data-route="packing"] table td:nth-child(n+7):nth-child(-n+8), [data-route="products"] table th:nth-child(n+7):nth-child(-n+8), [data-route="products"] table td:nth-child(n+7):nth-child(-n+8) { padding-left: 24px; } [data-route="products"] table td .text-xs, [data-route="materials"] table td .text-xs, [data-route="packing"] table td .text-xs { margin-top: 2px; } [data-route="materials"] [data-ui="table"] thead th, [data-route="packing"] [data-ui="table"] thead th, [data-route="purchases"] [data-ui="table"] thead th, [data-route="products"] [data-ui="table"] thead th { position: sticky; top: 0; z-index: 1; white-space: nowrap; } [data-route="materials"] .bb-card.p-0, [data-route="packing"] .bb-card.p-0, [data-route="purchases"] .bb-card.p-0, [data-route="products"] .bb-card.p-0 { border: 1px solid var(--twx-border); box-shadow: var(--twx-shadow-1); overflow: hidden; } @media (max-width: 640px) { [data-route="materials"] [data-ui="page-header"], [data-route="packing"] [data-ui="page-header"], [data-route="purchases"] [data-ui="page-header"], [data-route="products"] [data-ui="page-header"] { padding: 14px 16px; } [data-route="materials"] .bb-card.p-4, [data-route="packing"] .bb-card.p-4, [data-route="purchases"] .bb-card.p-4, [data-route="products"] .bb-card.p-4 { padding: 14px; } } /* ==== 40-production.css ==== */ /* 40-production: production, qc, lab, maintenance, labItems */ /* Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. */ /* ========================================================================== * Production area, premium pass (2026-11-01). Builds on 00-base (cards, tables, tiles, badges, tabs). * Area job only: module hue on the page header (ops blue for production/maintenance, * quality ochre for qc/lab/labItems, incl. the QC Expired Lots tab), calm tiles, * readable ledgers, side navigation. No gradients, no heavy coloured tile rules, no hiding. * ========================================================================== */ /* page header: panel, radius 14, 3px module-hue top rule */ [data-route="production"] [data-ui="page-header"], [data-route="qc"] [data-ui="page-header"], [data-route="lab"] [data-ui="page-header"], [data-route="maintenance"] [data-ui="page-header"], [data-route="labItems"] [data-ui="page-header"] { background: var(--twx-surface); border: 1px solid var(--twx-border); border-top: 3px solid #1D4ED8; border-radius: 14px; box-shadow: var(--twx-shadow-1); padding: 18px 22px; margin-bottom: 16px; } [data-route="qc"] [data-ui="page-header"], [data-route="lab"] [data-ui="page-header"], [data-route="labItems"] [data-ui="page-header"] { border-top-color: #A16207; } /* cards */ [data-route="production"] [data-ui="card"], [data-route="qc"] [data-ui="card"], [data-route="lab"] [data-ui="card"], [data-route="maintenance"] [data-ui="card"], [data-route="labItems"] [data-ui="card"] { border-radius: 14px; } [data-route="production"] [data-ui="card"] h2, [data-route="production"] [data-ui="card"] h3, [data-route="qc"] [data-ui="card"] h2, [data-route="qc"] [data-ui="card"] h3, [data-route="lab"] [data-ui="card"] h2, [data-route="lab"] [data-ui="card"] h3, [data-route="maintenance"] [data-ui="card"] h2, [data-route="maintenance"] [data-ui="card"] h3, [data-route="labItems"] [data-ui="card"] h2, [data-route="labItems"] [data-ui="card"] h3 { font-weight: 650; color: var(--twx-text); letter-spacing: -0.01em; } /* ledgers: sticky header, tabular numbers, first column anchors the row */ [data-route="production"] [data-ui="table"] thead th, [data-route="qc"] [data-ui="table"] thead th, [data-route="lab"] [data-ui="table"] thead th, [data-route="maintenance"] [data-ui="table"] thead th, [data-route="labItems"] [data-ui="table"] thead th { white-space: nowrap; position: sticky; top: 0; z-index: 1; } [data-route="production"] [data-ui="table"] tbody td, [data-route="qc"] [data-ui="table"] tbody td, [data-route="lab"] [data-ui="table"] tbody td, [data-route="maintenance"] [data-ui="table"] tbody td, [data-route="labItems"] [data-ui="table"] tbody td { font-variant-numeric: tabular-nums; } [data-route="production"] [data-ui="table"] tbody td:first-child, [data-route="qc"] [data-ui="table"] tbody td:first-child, [data-route="lab"] [data-ui="table"] tbody td:first-child, [data-route="maintenance"] [data-ui="table"] tbody td:first-child, [data-route="labItems"] [data-ui="table"] tbody td:first-child { font-weight: 600; } [data-route="production"] [data-ui="table"] tbody td:nth-child(-n+2) { white-space: nowrap; } [data-route="production"] .bb-tablewrap, [data-route="qc"] .bb-tablewrap, [data-route="lab"] .bb-tablewrap, [data-route="maintenance"] .bb-tablewrap, [data-route="labItems"] .bb-tablewrap { border: 1px solid var(--twx-border); border-radius: 14px; background: var(--twx-surface); box-shadow: var(--twx-shadow-1); } /* filter bars: one quiet panel */ [data-route="production"] [data-ui="toolbar"], [data-route="qc"] [data-ui="toolbar"], [data-route="lab"] [data-ui="toolbar"], [data-route="maintenance"] [data-ui="toolbar"], [data-route="labItems"] [data-ui="toolbar"] { padding: 10px 12px; gap: 10px; border: 1px solid var(--twx-border); border-radius: 12px; background: var(--twx-surface-sunk); } [data-route="production"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]), [data-route="production"] select, [data-route="qc"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]), [data-route="qc"] select, [data-route="lab"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]), [data-route="lab"] select, [data-route="maintenance"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]), [data-route="maintenance"] select, [data-route="labItems"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]), [data-route="labItems"] select { min-height: 38px; border-radius: 10px; } /* side navigation (QC incl. Expired Lots, Lab, Equipment): 40px rows, radius 10, accent pill when selected */ [data-route="qc"] [role="tablist"][aria-orientation="vertical"] [role="tab"], [data-route="lab"] [role="tablist"][aria-orientation="vertical"] [role="tab"], [data-route="maintenance"] [role="tablist"][aria-orientation="vertical"] [role="tab"], [data-route="labItems"] [role="tablist"][aria-orientation="vertical"] [role="tab"], [data-route="production"] [role="tablist"][aria-orientation="vertical"] [role="tab"] { padding: 9px 14px; min-height: 40px; border-radius: 10px; font-weight: 500; } [data-route="qc"] [role="tablist"][aria-orientation="vertical"] [role="tab"][aria-selected="true"], [data-route="lab"] [role="tablist"][aria-orientation="vertical"] [role="tab"][aria-selected="true"], [data-route="maintenance"] [role="tablist"][aria-orientation="vertical"] [role="tab"][aria-selected="true"], [data-route="labItems"] [role="tablist"][aria-orientation="vertical"] [role="tab"][aria-selected="true"], [data-route="production"] [role="tablist"][aria-orientation="vertical"] [role="tab"][aria-selected="true"] { font-weight: 600; } /* notes */ [data-route="production"] .bb-note, [data-route="qc"] .bb-note, [data-route="lab"] .bb-note, [data-route="maintenance"] .bb-note, [data-route="labItems"] .bb-note { border-radius: 12px; line-height: 1.5; } @media (max-width: 640px) { [data-route="production"] [data-ui="page-header"], [data-route="qc"] [data-ui="page-header"], [data-route="lab"] [data-ui="page-header"], [data-route="maintenance"] [data-ui="page-header"], [data-route="labItems"] [data-ui="page-header"] { padding: 14px 16px; } [data-route="production"] [role="tab"], [data-route="qc"] [role="tab"], [data-route="lab"] [role="tab"], [data-route="maintenance"] [role="tab"], [data-route="labItems"] [role="tab"] { white-space: nowrap; flex: none; padding-left: 14px; padding-right: 14px; } } /* batch table: the Actions cell wraps its buttons onto lines so every label stays whole at desktop width, without sideways scrolling */ [data-route="production"] [data-ui="table"] tbody td.flex-wrap { min-width: 250px !important; max-width: 340px; gap: 6px; align-items: center; } [data-route="production"] [data-ui="table"] tbody td.flex-wrap .bb-btn { padding: 5px 10px; white-space: nowrap; } @media (min-width: 641px) { [data-route="production"] table.bb-colcfg { min-width: 0 !important; width: 100%; } [data-route="production"] table.bb-colcfg th:last-child { min-width: 250px !important; } } /* batch table: an editable value and its pencil stay side by side (batch number, output) */ [data-route="production"] [data-ui="table"] tbody td:not(:last-child) .flex, [data-route="production"] [data-ui="table"] tbody td:not(:last-child) [class*="flex"] { flex-wrap: nowrap; } /* phones: the lab side menu is a row of buttons that the page lets shrink until their words run into each other; let the row wrap so every entry keeps its own space */ @media (max-width: 767px) { [data-route="lab"] div.flex.overflow-x-auto:has(> button.block), [data-route="qc"] div.flex.overflow-x-auto:has(> button.block), [data-route="maintenance"] div.flex.overflow-x-auto:has(> button.block), [data-route="labItems"] div.flex.overflow-x-auto:has(> button.block) { flex-wrap: wrap; } } /* ---- Adjust this batch: the Total line, the "adjusted" notice and the panel (MFG-adjust-batch). Tokens only; no hiding, no wording. ---- */ [data-route="production"] [data-adjust="area"] { border-top: 1px solid var(--twx-border); padding-top: var(--twx-space-3); } [data-route="production"] [data-adjust="total"], [data-route="production"] [data-adjust="live-total"] { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } [data-route="production"] [data-adjust="short"] { padding: var(--twx-space-2) var(--twx-space-3); border-radius: var(--twx-radius-sm); background: var(--twx-danger-soft); color: var(--twx-danger-text); } [data-route="production"] [data-adjust="ask"] { padding: var(--twx-space-2) var(--twx-space-3); border-radius: var(--twx-radius-sm); background: var(--twx-surface-sunk); border: 1px dashed var(--twx-border-strong); } [data-route="production"] [data-adjust="notice"] { border-radius: var(--twx-radius); background: var(--twx-warning-soft) !important; border: 1px solid var(--twx-warning) !important; box-shadow: var(--twx-shadow-1); } [data-route="production"] [data-adjust="panel"] table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } [data-route="production"] [data-adjust="panel"] table td, [data-route="production"] [data-adjust="panel"] table th { padding-top: var(--twx-space-2); padding-bottom: var(--twx-space-2); } [data-route="production"] [data-adjust="panel"] table tbody tr:nth-child(even) { background: var(--twx-surface-sunk); } [data-route="production"] [data-adjust="panel"] input, [data-route="production"] [data-adjust="panel"] select { min-height: var(--twx-control-h-sm); border-color: var(--twx-border-strong) !important; border-radius: var(--twx-radius-sm) !important; } [data-route="production"] [data-adjust="panel"] input:focus-visible, [data-route="production"] [data-adjust="panel"] select:focus-visible { outline: 2px solid var(--twx-focus); outline-offset: 1px; } [data-route="production"] [data-adjust="live-total"] { padding: var(--twx-space-2) var(--twx-space-3); border-radius: var(--twx-radius-sm); background: var(--twx-surface-sunk); } /* ---- prodfix (2026-11-02): Recent Batches tabs In progress / Finished / Revoked / All ([data-bb="batchtabs"]). Visual only. ---- */ [data-route="production"] [data-bb="batchtabs"] { gap: 6px; padding: 4px; border: 1px solid var(--twx-border); border-radius: var(--twx-radius-pill); background: var(--twx-surface-sunk); width: fit-content; max-width: 100%; } [data-route="production"] [data-bb="batchtabs"] > button { min-height: 34px; padding: 6px 16px; border-radius: var(--twx-radius-pill); font-weight: 600; font-variant-numeric: tabular-nums; border-color: transparent !important; } [data-route="production"] [data-bb="batchtabs"] > button[aria-pressed="false"]:hover { background: var(--twx-surface-hover) !important; } [data-route="production"] [data-bb="batchtabs"] > button[aria-pressed="true"] { box-shadow: var(--twx-shadow-1); } [data-route="production"] [data-bb="batchtabs"] > button:focus-visible { outline: 2px solid var(--twx-focus); outline-offset: 2px; } [data-route="production"] [data-bb="btab-empty"] td { padding-top: var(--twx-space-6); padding-bottom: var(--twx-space-6); color: var(--twx-text-muted); } /* ==== 41-packalt.css ==== */ /* 41-packalt: packing alternatives ("Can also use"), packalt 2026-11-02. production + products only. * The "Packing to use" panel on Make a batch, the "Used X instead of Y" line on a batch row and in Trace a Batch, the * Packing swaps tab (report + reorder hints), and the "Can also use" chips in Multi-Size Recipes. * Visual only (VISUAL-REDESIGN-RULES.md): tokens, radius, spacing. Nothing hidden, nothing reordered. */ [data-route="production"] [data-bb="packalt-panel"] { background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); border-radius: var(--twx-radius-lg); padding: var(--twx-space-4); } [data-route="production"] [data-bb="packalt-line"] { border-top-color: var(--twx-border); min-height: var(--twx-target-min); } [data-route="production"] [data-bb="packalt-using"], [data-route="production"] [data-bb="packalt-used"] { color: var(--twx-warning-text); } [data-route="products"] [data-bb="packalt-used"] { color: var(--twx-warning-text); } [data-route="production"] [data-bb="packalt-short"] { color: var(--twx-danger-text); } [data-route="production"] [data-bb="packalt-report"] table { font-variant-numeric: tabular-nums; } [data-route="production"] [data-bb="packalt-hint"] { border-top-color: var(--twx-border); } [data-route="products"] [data-bb="packalt-chip"] { background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); color: var(--twx-text); border-radius: var(--twx-radius-pill); } [data-route="products"] [data-bb="packalt-chip"] button { color: var(--twx-danger-text); min-width: var(--twx-target-min); min-height: var(--twx-target-min); } /* ==== 45-qc.css ==== */ /* 45-qc: the Quality Control page (route qc): every section, its tiles, forms, record lists and the record Details panel. */ /* Premium pass (2026-11-08, owner: "QC record areas need a premium look and full detailed records, not the old newspaper"). * Styles the existing markup plus the attribute-only hooks added by .dev/patch_gmp_qcui.js ([data-qc=...]). VISUAL ONLY: * nothing is hidden, moved or reworded; the new "Details" panel is additive. Tokens only (--twx-*), so light and dark both work. */ /* page: the sub-navigation is one calm panel, items are 40px rows with an accent pill when selected */ [data-route="qc"] [data-ui="subnav"] { background: var(--twx-surface); border: 1px solid var(--twx-border); border-radius: 16px; box-shadow: var(--twx-shadow-1); padding: 12px; align-self: flex-start; gap: 4px; } [data-route="qc"] [data-ui="subnav-group"] { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; color: var(--twx-text-muted); padding-top: 4px; } [data-route="qc"] [data-ui="subnav-item"] { display: flex; align-items: center; gap: 10px; min-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: background-color var(--twx-dur) var(--twx-ease); } [data-route="qc"] [data-ui="subnav-item"]:not([aria-current="page"]):hover { background: var(--twx-surface-sunk) !important; } [data-route="qc"] [data-ui="subnav-item"][aria-current="page"] { font-weight: 650; box-shadow: var(--twx-shadow-2); } /* KPI tiles: an even grid of cards, big number, quiet label */ [data-route="qc"] [data-qc="kpis"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; } [data-route="qc"] [data-qc="kpis"] > [data-ui="stat"] { width: auto; min-width: 0; margin: 0; border: 1px solid var(--twx-border); } [data-route="qc"] [data-qc="kpis"] > [data-ui="stat"].bb-stat-go:hover, [data-route="qc"] [data-qc="kpis"] > [data-ui="stat"][role="button"]:hover { transform: translateY(-2px); box-shadow: var(--twx-shadow-2); } /* cards that hold a form or a record list */ [data-route="qc"] [data-ui="card"]:has(> [data-qc="records-title"]), [data-route="qc"] [data-ui="card"]:has(> [data-qc="form-title"]) { border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; } [data-route="qc"] [data-qc="records-title"], [data-route="qc"] [data-qc="form-title"] { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--twx-text); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--twx-border); } [data-route="qc"] [data-qc="form-title"] + .text-xs { font-size: 13px; line-height: 1.55; color: var(--twx-text-muted); margin-bottom: 14px; max-width: 72ch; } [data-route="qc"] [data-qc="records-title"] + .text-xs { font-size: 13px; line-height: 1.55; color: var(--twx-text-muted); margin-bottom: 12px; max-width: 80ch; } [data-route="qc"] [data-qc="records-title"] + .text-sm:not([data-qc]) { border: 1px dashed var(--twx-border-strong); border-radius: 12px; padding: 24px 16px; text-align: center; background: var(--twx-surface-sunk); color: var(--twx-text-muted); } /* the "Log ..." forms (collapsible cards): clearer head, two-column fields with helper text, roomy */ [data-route="qc"] .bb-sec-head { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; min-height: 56px; } [data-route="qc"] [data-ui="card"] .grid { gap: 14px 18px; } [data-route="qc"] [data-ui="form-row"] .bb-label { font-size: 12px; font-weight: 650; letter-spacing: 0.05em; color: var(--twx-text-muted); margin-bottom: 4px; } [data-route="qc"] [data-ui="card"] textarea { border: 1px solid var(--twx-border-strong); border-radius: 12px; padding: 10px 12px; min-height: 84px; line-height: 1.5; } [data-route="qc"] [data-ui="card"] input[type="file"] { padding: 8px 10px; border: 1px dashed var(--twx-border-strong); border-radius: 12px; background: var(--twx-surface-sunk); max-width: 100%; } [data-route="qc"] [data-ui="lab-spec"], [data-route="qc"] [data-ui="lab-sampling"] { border: 1px solid var(--twx-border); border-radius: 14px; background: var(--twx-surface-sunk) !important; padding: 14px 16px; } [data-route="qc"] [data-ui="lab-sampling"] { background: var(--twx-surface) !important; } [data-route="qc"] [data-ui="lab-spec"] input, [data-route="qc"] [data-ui="lab-sampling"] input { min-height: 38px; } /* Test Items from a Pending PO and the in-process / release forms: each item is a card, parameters are aligned rows */ [data-route="qc"] [data-ui="card"]:has(> [data-qc="form-title"]) .mt-3.p-3.rounded-lg:not([data-ui]) { background: var(--twx-surface-sunk) !important; border: 1px solid var(--twx-border); border-radius: 14px; padding: 14px 16px; } [data-route="qc"] [data-ui="card"] .flex.flex-wrap.gap-2.items-center.mb-1 { gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--twx-border); } [data-route="qc"] [data-ui="card"] .flex.flex-wrap.gap-2.items-center.mb-1:last-of-type { border-bottom: 0; } [data-route="qc"] [data-ui="card"] .flex.flex-wrap.gap-2.items-center.mb-1 > input[type="text"], [data-route="qc"] [data-ui="card"] .flex.flex-wrap.gap-2.items-center.mb-1 > input:not([type]) { min-height: 38px; border-radius: 10px; } [data-route="qc"] [data-ui="card"] .text-xs.font-medium.uppercase { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; color: var(--twx-text-muted); } /* record lists: every record is a card row with a result stripe, hover lift and breathing room */ [data-route="qc"] [data-qc="row"] { border: 1px solid var(--twx-border) !important; border-left: 4px solid var(--twx-border-strong) !important; border-radius: 14px; padding: 14px 16px !important; margin-top: 10px; background: var(--twx-surface); box-shadow: var(--twx-shadow-1); transition: box-shadow var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } [data-route="qc"] [data-qc="row"]:hover { box-shadow: var(--twx-shadow-2); } [data-route="qc"] [data-qc="row"][data-kind="capa"] { border-radius: 12px; margin-left: 0; padding: 10px 14px !important; background: var(--twx-surface-sunk); box-shadow: none; } [data-route="qc"] [data-qc="row"][data-result="Pass"], [data-route="qc"] [data-qc="row"][data-status="Closed"], [data-route="qc"] [data-qc="row"][data-status="Approved"], [data-route="qc"] [data-qc="row"][data-status="Verified"] { border-left-color: var(--twx-success) !important; } [data-route="qc"] [data-qc="row"][data-result="Fail"], [data-route="qc"] [data-qc="row"][data-status="Rejected"], [data-route="qc"] [data-qc="row"][data-kind="lot"] { border-left-color: var(--twx-danger) !important; } [data-route="qc"] [data-qc="row"][data-result="Pending"], [data-route="qc"] [data-qc="row"][data-status="Pending"], [data-route="qc"] [data-qc="row"][data-status="Open"], [data-route="qc"] [data-qc="row"][data-status="Investigating"], [data-route="qc"] [data-qc="row"][data-status="CAPA Assigned"], [data-route="qc"] [data-qc="row"][data-status="In Progress"], [data-route="qc"] [data-qc="row"][data-status="Done"] { border-left-color: var(--twx-warning) !important; } [data-route="qc"] [data-qc="row"][data-void="1"] { border-style: dashed !important; border-left-style: solid !important; background: var(--twx-surface-sunk); } [data-route="qc"] [data-qc="row"] > button.w-full { min-height: 40px; padding: 2px 0; border-radius: 10px; } [data-route="qc"] [data-qc="row"] > button.w-full:hover { background: var(--twx-surface-hover); } [data-route="qc"] [data-qc="row"] .text-xs { font-size: 13px; line-height: 1.5; } [data-route="qc"] [data-qc="row"] select, [data-route="qc"] [data-qc="row"] input { min-height: 36px; border-radius: 10px; } [data-route="qc"] [data-qc="row"] .pl-3 { padding-left: 0; } /* Details: the full record. A button under the row opens a panel of cards: fields, a parameter table, timelines */ [data-route="qc"] [data-qc="details-wrap"] { margin-top: 12px; } [data-route="qc"] [data-qc="details-btn"] { min-height: 32px; padding: 5px 14px; font-size: 13px; } [data-route="qc"] [data-qc="details"] { margin-top: 12px; padding: 16px; border: 1px solid var(--twx-border); border-radius: 14px; background: var(--twx-surface-sunk); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; text-align: left; color: var(--twx-text); } [data-route="qc"] [data-qc="section"] { background: var(--twx-surface); border: 1px solid var(--twx-border); border-radius: 12px; padding: 14px 16px; min-width: 0; } [data-route="qc"] [data-qc="section"]:has([data-qc="tablewrap"]), [data-route="qc"] [data-qc="section"]:has([data-qc="timeline"]) { grid-column: 1 / -1; } [data-route="qc"] [data-qc="section-title"] { margin: 0 0 10px; font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--twx-text-muted); } [data-route="qc"] [data-qc="grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 18px; margin: 0; } [data-route="qc"] [data-qc="field"] { min-width: 0; } [data-route="qc"] [data-qc="field"] dt { font-size: 12px; font-weight: 600; color: var(--twx-text-muted); margin-bottom: 2px; } [data-route="qc"] [data-qc="field"] dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--twx-text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } [data-route="qc"] [data-qc="field"][data-empty="1"] dd { color: var(--twx-text-muted); font-style: italic; } [data-route="qc"] [data-qc="none"], [data-route="qc"] [data-qc="note"] { font-size: 14px; line-height: 1.5; color: var(--twx-text-muted); } [data-route="qc"] [data-qc="note"] { color: var(--twx-text); } [data-route="qc"] [data-qc="file"] { color: var(--twx-accent-text); font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; } [data-route="qc"] [data-qc="tablewrap"] { overflow: auto; max-height: 340px; border: 1px solid var(--twx-border); border-radius: 12px; } [data-route="qc"] [data-qc="table"] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; } [data-route="qc"] [data-qc="table"] thead th { position: sticky; top: 0; z-index: 1; background: var(--twx-surface-sunk); color: var(--twx-text-muted); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; padding: 9px 12px; white-space: nowrap; border-bottom: 1px solid var(--twx-border); } [data-route="qc"] [data-qc="table"] tbody td { padding: 10px 12px; border-top: 1px solid var(--twx-border); vertical-align: middle; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } [data-route="qc"] [data-qc="table"] tbody tr:first-child td { border-top: 0; } [data-route="qc"] [data-qc="table"] th, [data-route="qc"] [data-qc="table"] td { text-align: left; } [data-route="qc"] [data-qc="table"] tbody tr:hover td { background: var(--twx-surface-hover); } [data-route="qc"] [data-qc="timeline"] { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--twx-border); display: flex; flex-direction: column; gap: 10px; } [data-route="qc"] [data-qc="timeline"] li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; line-height: 1.45; } [data-route="qc"] [data-qc="when"] { font-size: 12px; font-weight: 650; color: var(--twx-text-muted); font-variant-numeric: tabular-nums; min-width: 110px; } [data-route="qc"] [data-qc="what"] { color: var(--twx-text); overflow-wrap: anywhere; flex: 1 1 220px; } [data-route="qc"] [data-qc="who"] { font-size: 13px; color: var(--twx-text-muted); } /* the lists of lots and wastage keep their action buttons on the right, wrapping on narrow screens */ [data-route="qc"] [data-qc="row"][data-kind="wastage"] { gap: 10px; } [data-route="qc"] [data-qc="row"][data-kind="wastage"] > div:first-child { flex: 1 1 280px; min-width: 0; } /* a phone: no sideways page scroll, 16px gutters, full-width controls, tall touch targets */ @media (max-width: 640px) { [data-route="qc"] [data-ui="subnav"] { padding: 8px; border-radius: 14px; } [data-route="qc"] [data-ui="subnav-item"] { white-space: nowrap; flex: none; } [data-route="qc"] [data-qc="kpis"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } [data-route="qc"] [data-ui="card"]:has(> [data-qc="records-title"]), [data-route="qc"] [data-ui="card"]:has(> [data-qc="form-title"]) { padding: 16px; } [data-route="qc"] [data-qc="row"] { padding: 12px !important; } [data-route="qc"] [data-qc="details"] { padding: 10px; grid-template-columns: minmax(0, 1fr); } [data-route="qc"] [data-qc="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-route="qc"] [data-qc="when"] { min-width: 0; flex-basis: 100%; } [data-route="qc"] [data-ui="card"] .flex.flex-wrap.gap-2.items-center.mb-1 > input { flex: 1 1 130px; min-width: 0; } [data-route="qc"] [data-qc="details-btn"] { min-height: 40px; } } /* ==== 50-finance.css ==== */ /* 50-finance: accounting, financials, taxSubmission, expenses, pettyCash, cashInHand, investors, fixedAssets */ /* Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. */ /* ==== Premium pass (2026-11-01). The shared components (page header, stat, card, table, toolbar, tabs, badge, modal) come from 00-base.css. * This file only adds what is particular to the money screens: tabular figures, statement lines and total bands, calm period pills, * neutral tile edges (tone stays on the sub-line the tile already colours), and money that wraps instead of being cut. ==== */ /* money everywhere: tabular, lining figures */ [data-route="accounting"] table, [data-route="accounting"] [style*="IBM Plex Mono"], [data-route="accounting"] .bb-fig, [data-route="financials"] table, [data-route="financials"] [style*="IBM Plex Mono"], [data-route="financials"] .bb-fig, [data-route="taxSubmission"] table, [data-route="taxSubmission"] [style*="IBM Plex Mono"], [data-route="taxSubmission"] .bb-fig, [data-route="expenses"] table, [data-route="expenses"] [style*="IBM Plex Mono"], [data-route="expenses"] .bb-fig, [data-route="pettyCash"] table, [data-route="pettyCash"] [style*="IBM Plex Mono"], [data-route="pettyCash"] .bb-fig, [data-route="cashInHand"] table, [data-route="cashInHand"] [style*="IBM Plex Mono"], [data-route="cashInHand"] .bb-fig, [data-route="investors"] table, [data-route="investors"] [style*="IBM Plex Mono"], [data-route="investors"] .bb-fig, [data-route="fixedAssets"] table, [data-route="fixedAssets"] [style*="IBM Plex Mono"], [data-route="fixedAssets"] .bb-fig { font-variant-numeric: tabular-nums lining-nums; } /* number tiles: neutral 1px edges; the tone stripe on the left stays (it marks the tile as meaningful); a stronger shadow only when clickable */ [data-route="accounting"] [data-ui="stat"], [data-route="financials"] [data-ui="stat"], [data-route="taxSubmission"] [data-ui="stat"], [data-route="expenses"] [data-ui="stat"], [data-route="pettyCash"] [data-ui="stat"], [data-route="cashInHand"] [data-ui="stat"], [data-route="investors"] [data-ui="stat"], [data-route="fixedAssets"] [data-ui="stat"] { border-top: 1px solid var(--twx-border); border-right: 1px solid var(--twx-border); border-bottom: 1px solid var(--twx-border); border-radius: 14px !important; box-shadow: var(--twx-shadow-1); transition: box-shadow var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } [data-route="accounting"] [data-ui="stat"].bb-stat-go:hover, [data-route="financials"] [data-ui="stat"].bb-stat-go:hover, [data-route="taxSubmission"] [data-ui="stat"].bb-stat-go:hover, [data-route="expenses"] [data-ui="stat"].bb-stat-go:hover, [data-route="pettyCash"] [data-ui="stat"].bb-stat-go:hover, [data-route="cashInHand"] [data-ui="stat"].bb-stat-go:hover, [data-route="investors"] [data-ui="stat"].bb-stat-go:hover, [data-route="fixedAssets"] [data-ui="stat"].bb-stat-go:hover { box-shadow: var(--twx-shadow-2); border-color: color-mix(in srgb, var(--twx-accent) 35%, var(--twx-border)) !important; } [data-route="accounting"] [data-ui="stat"] .bb-fig, [data-route="financials"] [data-ui="stat"] .bb-fig, [data-route="taxSubmission"] [data-ui="stat"] .bb-fig, [data-route="expenses"] [data-ui="stat"] .bb-fig, [data-route="pettyCash"] [data-ui="stat"] .bb-fig, [data-route="cashInHand"] [data-ui="stat"] .bb-fig, [data-route="investors"] [data-ui="stat"] .bb-fig, [data-route="fixedAssets"] [data-ui="stat"] .bb-fig { font-size: 24px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; } [data-route="accounting"] [data-ui="stat"] .text-xs, [data-route="financials"] [data-ui="stat"] .text-xs, [data-route="taxSubmission"] [data-ui="stat"] .text-xs, [data-route="expenses"] [data-ui="stat"] .text-xs, [data-route="pettyCash"] [data-ui="stat"] .text-xs, [data-route="cashInHand"] [data-ui="stat"] .text-xs, [data-route="investors"] [data-ui="stat"] .text-xs, [data-route="fixedAssets"] [data-ui="stat"] .text-xs { font-size: 13px; line-height: 1.45; } [data-route="accounting"] .flex.gap-3.flex-wrap, [data-route="financials"] .flex.gap-3.flex-wrap, [data-route="taxSubmission"] .flex.gap-3.flex-wrap, [data-route="expenses"] .flex.gap-3.flex-wrap, [data-route="pettyCash"] .flex.gap-3.flex-wrap, [data-route="cashInHand"] .flex.gap-3.flex-wrap, [data-route="investors"] .flex.gap-3.flex-wrap, [data-route="fixedAssets"] .flex.gap-3.flex-wrap { gap: 12px !important; } /* section labels between tile groups: quiet */ [data-route="accounting"] .uppercase.tracking-wide, [data-route="financials"] .uppercase.tracking-wide, [data-route="taxSubmission"] .uppercase.tracking-wide, [data-route="expenses"] .uppercase.tracking-wide, [data-route="pettyCash"] .uppercase.tracking-wide, [data-route="cashInHand"] .uppercase.tracking-wide, [data-route="investors"] .uppercase.tracking-wide, [data-route="fixedAssets"] .uppercase.tracking-wide { letter-spacing: 0.1em; font-weight: 600; color: var(--twx-text-muted); } /* statements (P&L, balance sheet, tax): spaced lines, a soft total band, a clear bottom line */ [data-route="accounting"] [data-ui="card"].max-w-lg, [data-route="financials"] [data-ui="card"].max-w-lg, [data-route="taxSubmission"] [data-ui="card"].max-w-lg, [data-route="expenses"] [data-ui="card"].max-w-lg, [data-route="pettyCash"] [data-ui="card"].max-w-lg, [data-route="cashInHand"] [data-ui="card"].max-w-lg, [data-route="investors"] [data-ui="card"].max-w-lg, [data-route="fixedAssets"] [data-ui="card"].max-w-lg { max-width: 760px !important; width: 100%; padding: 18px 22px; } [data-route="accounting"] [data-ui="card"] .flex.justify-between.py-1, [data-route="accounting"] [data-ui="card"] .flex.justify-between.py-1\.5, [data-route="financials"] [data-ui="card"] .flex.justify-between.py-1, [data-route="financials"] [data-ui="card"] .flex.justify-between.py-1\.5, [data-route="taxSubmission"] [data-ui="card"] .flex.justify-between.py-1, [data-route="taxSubmission"] [data-ui="card"] .flex.justify-between.py-1\.5, [data-route="expenses"] [data-ui="card"] .flex.justify-between.py-1, [data-route="expenses"] [data-ui="card"] .flex.justify-between.py-1\.5, [data-route="pettyCash"] [data-ui="card"] .flex.justify-between.py-1, [data-route="pettyCash"] [data-ui="card"] .flex.justify-between.py-1\.5, [data-route="cashInHand"] [data-ui="card"] .flex.justify-between.py-1, [data-route="cashInHand"] [data-ui="card"] .flex.justify-between.py-1\.5, [data-route="investors"] [data-ui="card"] .flex.justify-between.py-1, [data-route="investors"] [data-ui="card"] .flex.justify-between.py-1\.5, [data-route="fixedAssets"] [data-ui="card"] .flex.justify-between.py-1, [data-route="fixedAssets"] [data-ui="card"] .flex.justify-between.py-1\.5 { padding-top: 6px !important; padding-bottom: 6px !important; border-bottom: 1px solid color-mix(in srgb, var(--twx-border) 70%, transparent); gap: 24px; font-variant-numeric: tabular-nums; } [data-route="accounting"] [data-ui="card"] .flex.justify-between.font-medium, [data-route="financials"] [data-ui="card"] .flex.justify-between.font-medium, [data-route="taxSubmission"] [data-ui="card"] .flex.justify-between.font-medium, [data-route="expenses"] [data-ui="card"] .flex.justify-between.font-medium, [data-route="pettyCash"] [data-ui="card"] .flex.justify-between.font-medium, [data-route="cashInHand"] [data-ui="card"] .flex.justify-between.font-medium, [data-route="investors"] [data-ui="card"] .flex.justify-between.font-medium, [data-route="fixedAssets"] [data-ui="card"] .flex.justify-between.font-medium { font-weight: 650; background: var(--twx-surface-sunk); padding-left: 12px; padding-right: 12px; border-radius: 8px; border-bottom: 0; } [data-route="accounting"] [data-ui="card"] .rounded-lg.p-3.mt-3, [data-route="financials"] [data-ui="card"] .rounded-lg.p-3.mt-3, [data-route="taxSubmission"] [data-ui="card"] .rounded-lg.p-3.mt-3, [data-route="expenses"] [data-ui="card"] .rounded-lg.p-3.mt-3, [data-route="pettyCash"] [data-ui="card"] .rounded-lg.p-3.mt-3, [data-route="cashInHand"] [data-ui="card"] .rounded-lg.p-3.mt-3, [data-route="investors"] [data-ui="card"] .rounded-lg.p-3.mt-3, [data-route="fixedAssets"] [data-ui="card"] .rounded-lg.p-3.mt-3 { padding: 12px 16px !important; border-radius: 12px !important; font-weight: 700; border: 1px solid var(--twx-border); } [data-route="accounting"] [data-ui="card"] .rounded-lg.p-3.mt-3 span:last-child, [data-route="financials"] [data-ui="card"] .rounded-lg.p-3.mt-3 span:last-child, [data-route="taxSubmission"] [data-ui="card"] .rounded-lg.p-3.mt-3 span:last-child, [data-route="expenses"] [data-ui="card"] .rounded-lg.p-3.mt-3 span:last-child, [data-route="pettyCash"] [data-ui="card"] .rounded-lg.p-3.mt-3 span:last-child, [data-route="cashInHand"] [data-ui="card"] .rounded-lg.p-3.mt-3 span:last-child, [data-route="investors"] [data-ui="card"] .rounded-lg.p-3.mt-3 span:last-child, [data-route="fixedAssets"] [data-ui="card"] .rounded-lg.p-3.mt-3 span:last-child { font-size: 22px !important; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } /* ledgers: the last money column reads as figures */ [data-route="accounting"] [data-ui="table"] td:last-child:not(:first-child), [data-route="accounting"] [data-ui="table"] th:last-child:not(:first-child), [data-route="financials"] [data-ui="table"] td:last-child:not(:first-child), [data-route="financials"] [data-ui="table"] th:last-child:not(:first-child), [data-route="taxSubmission"] [data-ui="table"] td:last-child:not(:first-child), [data-route="taxSubmission"] [data-ui="table"] th:last-child:not(:first-child), [data-route="expenses"] [data-ui="table"] td:last-child:not(:first-child), [data-route="expenses"] [data-ui="table"] th:last-child:not(:first-child), [data-route="pettyCash"] [data-ui="table"] td:last-child:not(:first-child), [data-route="pettyCash"] [data-ui="table"] th:last-child:not(:first-child), [data-route="cashInHand"] [data-ui="table"] td:last-child:not(:first-child), [data-route="cashInHand"] [data-ui="table"] th:last-child:not(:first-child), [data-route="investors"] [data-ui="table"] td:last-child:not(:first-child), [data-route="investors"] [data-ui="table"] th:last-child:not(:first-child), [data-route="fixedAssets"] [data-ui="table"] td:last-child:not(:first-child), [data-route="fixedAssets"] [data-ui="table"] th:last-child:not(:first-child) { font-variant-numeric: tabular-nums; } /* report and period switchers: calm pills */ [data-route="accounting"] .no-print .bb-btn, [data-route="accounting"] .flex.flex-wrap.items-center.gap-2 > .bb-btn, [data-route="financials"] .no-print .bb-btn, [data-route="financials"] .flex.flex-wrap.items-center.gap-2 > .bb-btn, [data-route="taxSubmission"] .no-print .bb-btn, [data-route="taxSubmission"] .flex.flex-wrap.items-center.gap-2 > .bb-btn, [data-route="expenses"] .no-print .bb-btn, [data-route="expenses"] .flex.flex-wrap.items-center.gap-2 > .bb-btn, [data-route="pettyCash"] .no-print .bb-btn, [data-route="pettyCash"] .flex.flex-wrap.items-center.gap-2 > .bb-btn, [data-route="cashInHand"] .no-print .bb-btn, [data-route="cashInHand"] .flex.flex-wrap.items-center.gap-2 > .bb-btn, [data-route="investors"] .no-print .bb-btn, [data-route="investors"] .flex.flex-wrap.items-center.gap-2 > .bb-btn, [data-route="fixedAssets"] .no-print .bb-btn, [data-route="fixedAssets"] .flex.flex-wrap.items-center.gap-2 > .bb-btn { border-radius: 999px !important; padding: 4px 14px; min-height: 34px; } [data-route="accounting"] .flex.flex-wrap.gap-2.mb-5, [data-route="financials"] .flex.flex-wrap.gap-2.mb-5, [data-route="taxSubmission"] .flex.flex-wrap.gap-2.mb-5, [data-route="expenses"] .flex.flex-wrap.gap-2.mb-5, [data-route="pettyCash"] .flex.flex-wrap.gap-2.mb-5, [data-route="cashInHand"] .flex.flex-wrap.gap-2.mb-5, [data-route="investors"] .flex.flex-wrap.gap-2.mb-5, [data-route="fixedAssets"] .flex.flex-wrap.gap-2.mb-5 { gap: 8px !important; margin-bottom: 14px !important; } /* banners: rounded, same tone as before */ [data-route="accounting"] .bbds-banner, [data-route="financials"] .bbds-banner, [data-route="taxSubmission"] .bbds-banner, [data-route="expenses"] .bbds-banner, [data-route="pettyCash"] .bbds-banner, [data-route="cashInHand"] .bbds-banner, [data-route="investors"] .bbds-banner, [data-route="fixedAssets"] .bbds-banner { border-radius: 12px !important; padding: 10px 14px; } /* money must never be cut with an ellipsis: let figures and labels wrap */ [data-route="accounting"] [data-ui="stat"] .bb-fig, [data-route="accounting"] [data-ui="stat"] .bb-label, [data-route="accounting"] [data-ui="stat"] .bb-stat-row *, [data-route="financials"] [data-ui="stat"] .bb-fig, [data-route="financials"] [data-ui="stat"] .bb-label, [data-route="financials"] [data-ui="stat"] .bb-stat-row *, [data-route="taxSubmission"] [data-ui="stat"] .bb-fig, [data-route="taxSubmission"] [data-ui="stat"] .bb-label, [data-route="taxSubmission"] [data-ui="stat"] .bb-stat-row *, [data-route="expenses"] [data-ui="stat"] .bb-fig, [data-route="expenses"] [data-ui="stat"] .bb-label, [data-route="expenses"] [data-ui="stat"] .bb-stat-row *, [data-route="pettyCash"] [data-ui="stat"] .bb-fig, [data-route="pettyCash"] [data-ui="stat"] .bb-label, [data-route="pettyCash"] [data-ui="stat"] .bb-stat-row *, [data-route="cashInHand"] [data-ui="stat"] .bb-fig, [data-route="cashInHand"] [data-ui="stat"] .bb-label, [data-route="cashInHand"] [data-ui="stat"] .bb-stat-row *, [data-route="investors"] [data-ui="stat"] .bb-fig, [data-route="investors"] [data-ui="stat"] .bb-label, [data-route="investors"] [data-ui="stat"] .bb-stat-row *, [data-route="fixedAssets"] [data-ui="stat"] .bb-fig, [data-route="fixedAssets"] [data-ui="stat"] .bb-label, [data-route="fixedAssets"] [data-ui="stat"] .bb-stat-row * { text-overflow: clip !important; white-space: normal !important; overflow: visible !important; overflow-wrap: break-word; } @media (max-width: 640px) { [data-route="accounting"] [data-ui="stat"], [data-route="financials"] [data-ui="stat"], [data-route="taxSubmission"] [data-ui="stat"], [data-route="expenses"] [data-ui="stat"], [data-route="pettyCash"] [data-ui="stat"], [data-route="cashInHand"] [data-ui="stat"], [data-route="investors"] [data-ui="stat"], [data-route="fixedAssets"] [data-ui="stat"] { padding: 12px 14px !important; } [data-route="accounting"] [data-ui="stat"] .bb-fig, [data-route="financials"] [data-ui="stat"] .bb-fig, [data-route="taxSubmission"] [data-ui="stat"] .bb-fig, [data-route="expenses"] [data-ui="stat"] .bb-fig, [data-route="pettyCash"] [data-ui="stat"] .bb-fig, [data-route="cashInHand"] [data-ui="stat"] .bb-fig, [data-route="investors"] [data-ui="stat"] .bb-fig, [data-route="fixedAssets"] [data-ui="stat"] .bb-fig { font-size: 21px !important; } [data-route="accounting"] .flex.gap-3.flex-wrap > [data-ui="stat"], [data-route="financials"] .flex.gap-3.flex-wrap > [data-ui="stat"], [data-route="taxSubmission"] .flex.gap-3.flex-wrap > [data-ui="stat"], [data-route="expenses"] .flex.gap-3.flex-wrap > [data-ui="stat"], [data-route="pettyCash"] .flex.gap-3.flex-wrap > [data-ui="stat"], [data-route="cashInHand"] .flex.gap-3.flex-wrap > [data-ui="stat"], [data-route="investors"] .flex.gap-3.flex-wrap > [data-ui="stat"], [data-route="fixedAssets"] .flex.gap-3.flex-wrap > [data-ui="stat"] { flex: 1 1 100% !important; min-width: 100%; } [data-route="accounting"] [data-ui="card"].max-w-lg, [data-route="financials"] [data-ui="card"].max-w-lg, [data-route="taxSubmission"] [data-ui="card"].max-w-lg, [data-route="expenses"] [data-ui="card"].max-w-lg, [data-route="pettyCash"] [data-ui="card"].max-w-lg, [data-route="cashInHand"] [data-ui="card"].max-w-lg, [data-route="investors"] [data-ui="card"].max-w-lg, [data-route="fixedAssets"] [data-ui="card"].max-w-lg { padding: 16px; } } /* ==== BB_CASH (agent F, 2026-11-02): petty cash and cash in hand per holder ============================================ */ [data-route="pettyCash"] .bb-cash-panel, [data-route="cashInHand"] .bb-cash-panel { display: grid; gap: 14px; margin-bottom: 16px; } [data-route="pettyCash"] .bb-cash-panel > *, [data-route="cashInHand"] .bb-cash-panel > * { margin-bottom: 0; } [data-route="pettyCash"] .bb-cash-boxes, [data-route="cashInHand"] .bb-cash-holders { border-collapse: separate; border-spacing: 0; min-width: 560px; } [data-route="pettyCash"] .bb-cash-boxes th, [data-route="cashInHand"] .bb-cash-holders th { position: sticky; top: 0; background: var(--twx-surface); color: var(--twx-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 8px 10px; border-bottom: 1px solid var(--twx-border); } [data-route="pettyCash"] .bb-cash-boxes td, [data-route="cashInHand"] .bb-cash-holders td { padding: 10px; vertical-align: middle; } [data-route="pettyCash"] .bb-cash-boxes tbody tr:hover, [data-route="cashInHand"] .bb-cash-holders tbody tr:hover { background: var(--twx-surface-hover); } [data-route="pettyCash"] .bb-cash-boxes tr[data-low="1"] td:first-child { box-shadow: inset 3px 0 0 var(--twx-danger); } [data-route="pettyCash"] .bb-cash-boxcell, [data-route="cashInHand"] .bb-cash-boxcell { white-space: normal; } [data-route="pettyCash"] .bb-cash-boxcell .bb-badge, [data-route="cashInHand"] .bb-cash-boxcell .bb-badge { margin-left: 6px; } [data-route="pettyCash"] .bb-cash-holder, [data-route="cashInHand"] .bb-cash-holder { font-weight: 600; color: var(--twx-text); } [data-route="pettyCash"] .bb-cash-pend, [data-route="cashInHand"] .bb-cash-pend { padding: 8px 4px; border-radius: 10px; } [data-route="pettyCash"] .bb-cash-pend:hover, [data-route="cashInHand"] .bb-cash-pend:hover { background: var(--twx-surface-hover); } @media (max-width: 767px) { [data-route="pettyCash"] .bb-cash-boxes, [data-route="cashInHand"] .bb-cash-holders { min-width: 480px; } [data-route="pettyCash"] .bb-cash-pend, [data-route="cashInHand"] .bb-cash-pend { gap: 6px; } } /* ==== /BB_CASH ========================================================================================================= */ /* ==== 60-people.css ==== */ /* 60-people: hrm (every section via [data-section]) and tasks */ /* Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. */ /* ========================================================================== * People look (visuals only). Builds on 00-base.css: colour, border, shadow, type and * numeric alignment. No widths, paddings or line-boxes of table rows change (a row * that moves under the pointer flips the gate's hover-based highlight check), no * content is hidden, nothing is renamed. Print is not touched. * Rules start with "html" so they win a specificity tie with the styles the bundle * injects at run time. * ========================================================================== */ /* ---- explanatory prose: calm, muted, readable measure (the text itself is unchanged) ---- */ html [data-route="hrm"] .bbds-note, html [data-route="tasks"] .bbds-note { color: var(--twx-text-muted); } html [data-route="hrm"] .bbds-help, html [data-route="tasks"] .bbds-help { color: var(--twx-text-muted); line-height: 1.5; } html [data-route="hrm"] [data-bb-how][aria-expanded="false"] { color: var(--twx-text-muted); } html [data-route="hrm"] [data-bb-how][aria-expanded="true"] { color: var(--twx-text); } html [data-route="hrm"] .bbds-sechead .bbds-page-h, html [data-route="hrm"] .bbds-page-h { font-weight: 650; letter-spacing: -0.015em; color: var(--twx-text); } html [data-route="hrm"] .bbds-crumb { color: var(--twx-text-muted); } html [data-route="hrm"] .bbds-crumb [aria-current="page"] { color: var(--twx-text); font-weight: 600; } /* ---- the strip of company-wide tiles and every stat tile: muted label, bold tabular figure ---- */ html [data-route="hrm"] .bb-hrstrip [data-ui="stat"], html [data-route="hrm"] [data-ui="stat"] { border-color: var(--twx-border); } html [data-route="hrm"] [data-ui="stat"] .bb-label { letter-spacing: 0.06em; color: var(--twx-text-muted); } html [data-route="hrm"] [data-ui="stat"] .bb-fig { font-variant-numeric: tabular-nums; color: var(--twx-text); } html [data-route="hrm"] [data-ui="stat"] .text-xs { line-height: 1.5; } /* ---- banners (who is not in the run, drafts not announced, missing inputs): status edge + readable body ---- */ html [data-route="hrm"] .bbds-banner { border: 1px solid var(--twx-border); border-radius: var(--twx-radius); } html [data-route="hrm"] .bbds-banner-t { font-weight: 650; color: var(--twx-text); } html [data-route="hrm"] .bbds-banner .text-xs { font-size: 13px; color: var(--twx-text-muted); } html [data-route="hrm"] .bbds-banner .text-xs b { color: var(--twx-text); font-weight: 650; } html [data-route="hrm"] .bbds-banner-b2 { border-color: color-mix(in srgb, var(--twx-danger) 35%, var(--twx-border)); box-shadow: inset 3px 0 0 var(--twx-danger); } html [data-route="hrm"] .bbds-banner-w { border-color: color-mix(in srgb, var(--twx-warning) 35%, var(--twx-border)); box-shadow: inset 3px 0 0 var(--twx-warning); } html [data-route="hrm"] .bbds-banner-g { border-color: color-mix(in srgb, var(--twx-success) 35%, var(--twx-border)); box-shadow: inset 3px 0 0 var(--twx-success); } html [data-route="hrm"] .bbds-banner-i { border-color: color-mix(in srgb, var(--twx-info) 35%, var(--twx-border)); box-shadow: inset 3px 0 0 var(--twx-info); } /* ---- filter / month / field rows ---- */ html [data-route="hrm"] .bbds-field > .bb-label, html [data-route="hrm"] .bbds-field > span.bb-label { font-size: 12px; letter-spacing: 0.03em; font-weight: 600; color: var(--twx-text-muted); } html [data-route="hrm"] .bbds-filters, html [data-route="hrm"] .bbds-sechead .bbds-filters { color: var(--twx-text); } /* ---- every People table: status rows keep their meaning, in a quieter form (edge marker + light wash) ---- */ html [data-route="hrm"] table.bbds-tbl tbody tr.bbds-tr-warn td { background-color: color-mix(in srgb, var(--twx-warning-soft) 38%, var(--twx-surface)); } html [data-route="hrm"] table.bbds-tbl tbody tr.bbds-tr-bad td { background-color: color-mix(in srgb, var(--twx-danger-soft) 42%, var(--twx-surface)); } html [data-route="hrm"] table.bbds-tbl tbody tr.bbds-tr-warn td:first-child { box-shadow: inset 3px 0 0 var(--twx-warning); } html [data-route="hrm"] table.bbds-tbl tbody tr.bbds-tr-bad td:first-child { box-shadow: inset 3px 0 0 var(--twx-danger); } html [data-route="hrm"] table.bbds-tbl tbody tr.bbds-tr-warn:hover td, html [data-route="hrm"] table.bbds-tbl tbody tr.bbds-tr-bad:hover td { background-color: var(--twx-surface-hover); } html [data-route="hrm"] table.bbds-tbl tbody tr.bbds-tr-off td { color: var(--twx-text-muted); } html [data-route="hrm"] table.bbds-tbl td.bbds-num, html [data-route="hrm"] table.bbds-tbl th.bbds-num { font-variant-numeric: tabular-nums; text-align: right; } html [data-route="hrm"] table.bbds-tbl thead th { letter-spacing: 0.01em; } html [data-route="hrm"] table.bbds-tbl tbody td:first-child { font-weight: 500; } html [data-route="hrm"] table.bbds-tbl tbody td .text-xs { color: var(--twx-text-muted); font-weight: 400; line-height: 1.5; } html [data-route="hrm"] .bb-colmenu { color: var(--twx-text-muted); } html [data-route="hrm"] .bb-stick-end table tbody td:last-child { box-shadow: -6px 0 6px -6px color-mix(in srgb, var(--twx-text) 18%, transparent); } /* ---- payroll: the figures read first, the explanation is quiet, estimate / generated / paid stay distinct ---- */ html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td { font-size: 14px; } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td:first-child { font-weight: 650; color: var(--twx-text); } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td:first-child .text-xs { font-size: 12px; font-weight: 400; color: var(--twx-text-muted) !important; } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td.bbds-num { font-weight: 500; color: var(--twx-text); } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td.bbds-num .text-xs { font-size: 12px; font-weight: 400; color: var(--twx-text-muted) !important; } /* Net Pay: the third cell from the end (Net Pay, Status, row action) */ html [data-route="hrm"][data-section="payroll"] table.bbds-tbl thead th.bbds-num:nth-last-child(3) { color: var(--twx-text); font-weight: 700; } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td.bbds-num:nth-last-child(3) { font-size: 15px; font-weight: 700; color: var(--twx-text); letter-spacing: -0.01em; } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td.bbds-num:nth-last-child(3) .text-xs { font-size: 12px; font-weight: 500; color: var(--twx-warning-text) !important; letter-spacing: 0; } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td:nth-last-child(2) { font-size: 13px; } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tfoot td { font-variant-numeric: tabular-nums; } /* ---- shift roster and weekly grids: day numbers lead, planned vs not-planned is obvious ---- */ html [data-route="hrm"] table.bbds-roster thead th { background: var(--twx-surface-sunk); color: var(--twx-text); border-bottom: 1px solid var(--twx-border); font-weight: 600; } html [data-route="hrm"] table.bbds-roster .bbds-roster-d { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--twx-text); } html [data-route="hrm"] table.bbds-roster th .bbds-roster-w { font-size: 12px; font-weight: 500; color: var(--twx-text-muted); } html [data-route="hrm"] table.bbds-roster th input { font-size: 12px; color: var(--twx-text); background-color: var(--twx-surface); border-color: var(--twx-border-strong); } html [data-route="hrm"] table.bbds-roster tbody td { border-top: 1px solid var(--twx-border); vertical-align: middle; } html [data-route="hrm"] table.bbds-roster tbody tr:first-child td { border-top: 0; } html [data-route="hrm"] table.bbds-roster td.bbds-roster-p { font-weight: 600; color: var(--twx-text); } html [data-route="hrm"] table.bbds-roster td.bbds-roster-p button { text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; } html [data-route="hrm"] table.bbds-roster td.bbds-roster-p .text-xs { color: var(--twx-text-muted) !important; font-weight: 400; } html [data-route="hrm"] .bbds-shift { border-radius: var(--twx-radius); transition: box-shadow var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"] .bbds-shift:hover { box-shadow: var(--twx-shadow-1); } html [data-route="hrm"] .bbds-shift-c { letter-spacing: -0.005em; } html [data-route="hrm"] .bbds-shift-n { font-size: 12px; } html [data-route="hrm"] .bbds-shift-none { border-color: var(--twx-border-strong); } html [data-route="hrm"] .bbds-shift-none .bbds-shift-c, html [data-route="hrm"] .bbds-shift-none .bbds-shift-n { color: var(--twx-text-muted); font-weight: 500; } html [data-route="hrm"] .bbds-shift-draft { border-style: dashed; border-width: 1.5px; } html [data-route="hrm"] .bbds-pickchip { border-radius: var(--twx-radius); border-color: var(--twx-border-strong); } html [data-route="hrm"] .bbds-pickchip-on { border-color: var(--twx-accent); box-shadow: inset 0 0 0 1px var(--twx-accent); } /* ---- attendance, leave, recruitment, documents: row action buttons and chips ---- */ html [data-route="hrm"] .bbds-btn-icon { border-radius: var(--twx-radius-sm); color: var(--twx-text-muted); } html [data-route="hrm"] .bbds-btn-icon:hover { color: var(--twx-text); background: var(--twx-surface-sunk); } html [data-route="hrm"] .bbds-btn-icon-bad { color: var(--twx-danger-text); } html [data-route="hrm"] .bbds-btn-sm { font-weight: 600; } html [data-route="hrm"] .bb-badge { letter-spacing: 0; } /* ---- tasks ---- */ html [data-route="tasks"] [data-ui="card"] { border-color: var(--twx-border); } html [data-route="tasks"] table tbody td:first-child { font-weight: 500; } html [data-route="tasks"] table tbody td .text-xs { color: var(--twx-text-muted); line-height: 1.5; } /* ========================================================================== * Redesign pass 2: efficient and calm. Same elements, same order, same content; surface, * type scale and density change. Nothing that leads the page (header, tiles, first table * row, primary buttons) sits lower than before: paddings are equal or tighter. * ========================================================================== */ /* premium pass (2026-11-01): the page background, header card, tiles, cards and tables come from 00-base.css; this file keeps the People specifics */ /* header: a slim banded panel */ html [data-route="hrm"] [data-ui="page-header"].bb-page-head, html [data-route="tasks"] [data-ui="page-header"].bb-page-head { border: 1px solid var(--twx-border); border-top: 3px solid #DB2777; border-radius: 14px; padding: 12px 20px; background: var(--twx-surface) !important; box-shadow: var(--twx-shadow-1); } html[data-theme="dark"] [data-route="hrm"] [data-ui="page-header"].bb-page-head, html[data-theme="dark"] [data-route="tasks"] [data-ui="page-header"].bb-page-head { border-top-color: #F472B6; } html [data-route="hrm"] .bb-page-head h1 { font-size: 26px !important; letter-spacing: -0.03em; line-height: 1.1 !important; } html [data-route="hrm"] .bb-page-head .bb-eyebrow { line-height: 1.2; letter-spacing: 0.14em; font-size: 12px; color: var(--twx-text-muted) !important; } html [data-route="hrm"] .bb-page-head > .text-sm { margin-top: 2px; } html [data-route="hrm"] .bb-page-chips { margin-top: 6px; gap: 6px; } /* company strip: figure-led tiles, no taller than before */ html [data-route="hrm"] .bb-hrstrip { gap: 12px; } html [data-route="hrm"] [data-ui="stat"], html [data-route="tasks"] [data-ui="stat"] { border-top: 1px solid var(--twx-border); border-right: 1px solid var(--twx-border); border-bottom: 1px solid var(--twx-border); border-radius: 14px !important; } html [data-route="hrm"] .bb-hrstrip [data-ui="stat"] { padding: 10px 16px !important; background: var(--twx-surface) !important; box-shadow: var(--twx-shadow-1); } html [data-route="hrm"] [data-ui="stat"].bb-stat-go:hover, html [data-route="tasks"] [data-ui="stat"].bb-stat-go:hover { box-shadow: var(--twx-shadow-2); border-color: color-mix(in srgb, var(--twx-accent) 35%, var(--twx-border)) !important; } html [data-route="hrm"] .bb-hrstrip [data-ui="stat"] .bb-fig { line-height: 1.05; font-weight: 750; letter-spacing: -0.025em; } html [data-route="hrm"] .bb-hrstrip [data-ui="stat"] .bb-label { font-size: 12px; letter-spacing: 0.06em; } html [data-route="hrm"] .bb-hrstrip [data-ui="stat"] .text-xs { font-size: 12px; margin-top: 2px; } html [data-route="hrm"] .bb-card [data-ui="stat"] { border-radius: 12px !important; background: var(--twx-surface-sunk) !important; box-shadow: none; } html [data-route="hrm"] .bb-card [data-ui="stat"] .bb-fig { font-weight: 800; letter-spacing: -0.025em; } /* section cards */ html [data-route="hrm"] [data-ui="card"] .bbds-sechead .bbds-page-h, html [data-route="hrm"] .bbds-sechead .bbds-page-h { font-size: 17px; font-weight: 750; } html [data-route="hrm"] .bbds-page .bbds-page-h { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; } html [data-route="hrm"] .bbds-mark { width: 4px; border-radius: 3px; background: #DB2777 !important; } /* tables: small-caps header band, soft row rules; cell padding equal to or tighter than before */ html [data-route="hrm"] .bb-tablewrap, html [data-route="hrm"] .overflow-auto { border-radius: var(--twx-radius); } html [data-route="hrm"] [data-ui="table"] thead th { position: sticky; top: 0; z-index: 2; } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tbody td.bbds-num:nth-last-child(3) { font-size: 15px; font-weight: 750; } /* roster / shift grid */ html [data-route="hrm"] table.bbds-roster td.bbds-roster-p { background: var(--twx-surface); } html [data-route="hrm"] table.bbds-roster tbody tr:nth-child(even) td.bbds-roster-p { background: color-mix(in srgb, var(--twx-surface-sunk) 60%, var(--twx-surface)); } html [data-route="hrm"] table.bbds-roster th:first-child, html [data-route="hrm"] table.bbds-roster td.bbds-roster-p { position: sticky; left: 0; z-index: 2; box-shadow: 6px 0 8px -6px color-mix(in srgb, var(--twx-text) 20%, transparent); } html [data-route="hrm"] table.bbds-roster .bbds-roster-d { font-size: 18px; font-weight: 750; } html [data-route="hrm"] .bbds-shift { border-radius: 10px; } html [data-route="hrm"] .bbds-pickchip { border-radius: 999px; font-weight: 600; } /* buttons and inputs */ html [data-route="hrm"] .bb-btn { border-radius: 10px; } html [data-route="hrm"] .bbds-field input:not([type=checkbox]):not([type=radio]), html [data-route="hrm"] .bbds-field select { border-radius: 10px; } html [data-route="hrm"] .bb-badge { font-size: 12px; } @media (max-width: 640px) { html [data-route="hrm"] .bb-page-head h1 { font-size: 24px !important; } html [data-route="hrm"] .bb-hrstrip [data-ui="stat"] .bb-fig { font-size: 24px; } /* the page-header row is stacked here; its 320px flex-basis was read as a 320px HEIGHT and left a blank band above "How this works" */ html [data-route="hrm"] .bbds-page-main { flex: 0 1 auto; } } /* keep button rows on one line exactly as before (heavier button text must not wrap a filter row) */ html [data-route="hrm"] .bbds-filters .bb-btn, html [data-route="hrm"] .bbds-filters-acts .bb-btn { font-weight: 500; letter-spacing: -0.005em; } html [data-route="hrm"] .bb-hrstrip [data-ui="stat"] .bb-fig { font-size: 24px; } /* the side navigation is a few pixels wider under the shared theme, so filter fields start slightly narrower to keep each filter row on the same number of lines */ html [data-route="hrm"] .bbds-filters .bbds-field { flex-basis: 164px; min-width: 0; } html [data-route="hrm"] .bbds-filters .bbds-field input, html [data-route="hrm"] .bbds-filters .bbds-field select { min-width: 0; } html [data-route="hrm"] .bb-hrstrip [data-ui="stat"] .bb-fig { line-height: 1 !important; } /* breathing room between the header panel and the tiles (the saved space above pays for it) */ html [data-route="hrm"] [data-ui="page-header"].bb-page-head { margin-bottom: 14px !important; } html [data-route="hrm"] .bb-hrstrip { margin-bottom: 10px; } /* ========================================================================== * People made easy (2026-11-02, docs/notes/PEOPLE-EASY-USE-PARITY.md): the Overview "Waiting on you" line. * An addition only; the tiles and figures below it are untouched. * ========================================================================== */ html [data-route="hrm"] .bb-hrwait { padding: 10px 12px; border: 1px solid var(--twx-border); border-radius: 14px; background: var(--twx-surface); box-shadow: var(--twx-shadow-1); } html [data-route="hrm"] .bb-hrwait .bb-hrwait-t { font-size: 13px; font-weight: 650; color: var(--twx-text); margin-right: 4px; } html [data-route="hrm"] .bb-hrwait .bb-hrwait-none { font-size: 13px; color: var(--twx-text-muted); } html [data-route="hrm"] .bb-hrwait .bb-hrwait-chip { min-height: 32px; padding: 4px 12px; border-radius: var(--twx-radius-pill); border: 1px solid var(--twx-border); background: var(--twx-surface); color: var(--twx-text); font-size: 13px; font-weight: 500; } html [data-route="hrm"] .bb-hrwait .bb-hrwait-chip:hover { background: var(--twx-surface-hover); } html [data-route="hrm"] .bb-hrwait .bb-hrwait-chip:focus-visible { outline: 2px solid var(--twx-focus); outline-offset: 2px; } html [data-route="hrm"] .bb-hrwait .bb-hrwait-n { min-width: 20px; padding: 0 6px; border-radius: var(--twx-radius-pill); background: var(--twx-warning-soft); color: var(--twx-warning-text); font-variant-numeric: tabular-nums; text-align: center; } /* ---- prodfix (2026-11-02): People Overview tiles keep their numbers aligned. Visual only. ---- */ [data-route="hrm"][data-section="overview"] .bb-hrstrip [data-ui="stat"] { font-variant-numeric: tabular-nums; } /* ==== 61-people-flow.css ==== */ /* 61-people-flow: Leave Requests, Loans & Advances, and the recommend / forward step box (also on Expense Claims). * docs/notes/BUILD-PEOPLE-FLOW-NAV-BRIEF.md section C ("flow"); parity note docs/notes/FLOW-PARITY.md. * * Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under [data-route="hrm"] and the section it is for. Leave Requests, Loans & Advances, and on * Expense Claims ONLY the step box (.bb-flow): agent E owns the rest of that page's look. * 2. VISUAL properties only. Never hide, never reword, never reorder. * The new elements (.bb-flow*, .bb-lv*, .bb-ln-req) carry inline fallback styles from the bundle (patch_flow.code.js), * so they read well before this file loads; the rules below only refine them (!important where an inline style is beaten). */ /* ---- Leave Requests: the card, the toolbar, the rows ------------------------------------------------------------- */ html [data-route="hrm"][data-section="leave"] .bb-lv-card { border-radius: var(--twx-radius-lg); border: 1px solid var(--twx-border); border-top: 3px solid #DB2777; box-shadow: var(--twx-shadow-1); background: var(--twx-surface); } html [data-route="hrm"][data-section="leave"] .bb-lv-card > div:first-child .font-medium { font-size: var(--twx-text-lg); font-weight: 650; color: var(--twx-text); } html [data-route="hrm"][data-section="leave"] .bb-flow-toolbar { padding: var(--twx-space-2) 0 var(--twx-space-3); border-bottom: 1px solid var(--twx-border); } html [data-route="hrm"][data-section="leave"] .bb-lvrow { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--twx-space-3); align-items: start; padding: var(--twx-space-3) var(--twx-space-2) !important; border-top: 1px solid var(--twx-border) !important; border-radius: var(--twx-radius); transition: background-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"][data-section="leave"] .bb-lvrow:hover { background: var(--twx-surface-hover); } html [data-route="hrm"][data-section="leave"] .bb-lvrow > .bb-flow-av { grid-column: 1; grid-row: 1 / span 9; } html [data-route="hrm"][data-section="leave"] .bb-lvrow > :not(.bb-flow-av) { grid-column: 2; min-width: 0; } html [data-route="hrm"][data-section="leave"] .bb-lvrow-main { row-gap: var(--twx-space-2); } html [data-route="hrm"][data-section="leave"] .bb-lvrow-main > span:first-child { color: var(--twx-text); line-height: var(--twx-leading); } html [data-route="hrm"][data-section="leave"] .bb-lvrow[data-status="pending"], html [data-route="hrm"][data-section="leave"] .bb-lvrow[data-status="final"] { box-shadow: inset 3px 0 0 var(--twx-warning); } html [data-route="hrm"][data-section="leave"] .bb-lvrow .text-xs { line-height: var(--twx-leading); } /* ---- Loans & Advances ------------------------------------------------------------------------------------------- */ html [data-route="hrm"][data-section="loans"] .bb-flow-card, html [data-route="hrm"][data-section="loans"] [data-ui="card"] { border-radius: var(--twx-radius-lg); border: 1px solid var(--twx-border); box-shadow: var(--twx-shadow-1); background: var(--twx-surface); } html [data-route="hrm"][data-section="loans"] .bb-flow-card { border-top: 3px solid #DB2777; } html [data-route="hrm"][data-section="loans"] [data-ui="card"] > .font-medium:first-child, html [data-route="hrm"][data-section="loans"] .bb-flow-card .font-medium { font-size: var(--twx-text-lg); font-weight: 650; color: var(--twx-text); } html [data-route="hrm"][data-section="loans"] .bb-flow-tiles { gap: var(--twx-space-3) !important; } html [data-route="hrm"][data-section="loans"] .bb-ln-req { border-top: 1px solid var(--twx-border) !important; padding: var(--twx-space-3) var(--twx-space-2) !important; border-radius: var(--twx-radius); transition: background-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"][data-section="loans"] .bb-ln-req:hover { background: var(--twx-surface-hover); } html [data-route="hrm"][data-section="loans"] .bb-ln-req[data-status="pending"] { box-shadow: inset 3px 0 0 var(--twx-warning); } html [data-route="hrm"][data-section="loans"] table.bbds-tbl th { color: var(--twx-text-muted); font-weight: 600; } html [data-route="hrm"][data-section="loans"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="loans"] table.bbds-tbl th.bbds-num { text-align: right; font-variant-numeric: tabular-nums; } /* ---- the shared pieces: tabs, search, chips, avatar, step box, timeline (Leave, Loans, and the box on Claims) ---- */ html [data-route="hrm"][data-section="leave"] .bb-flow-tab, html [data-route="hrm"][data-section="loans"] .bb-flow-tab { min-height: 32px; border-radius: var(--twx-radius-pill) !important; border-color: var(--twx-border) !important; background: var(--twx-surface) !important; color: var(--twx-text) !important; font-size: var(--twx-text-sm); transition: background-color var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"][data-section="leave"] .bb-flow-tab:hover, html [data-route="hrm"][data-section="loans"] .bb-flow-tab:hover { background: var(--twx-surface-hover) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-tab[aria-pressed="true"], html [data-route="hrm"][data-section="loans"] .bb-flow-tab[aria-pressed="true"] { background: var(--twx-accent) !important; border-color: var(--twx-accent) !important; color: var(--twx-on-accent) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-tab .bb-flow-n, html [data-route="hrm"][data-section="loans"] .bb-flow-tab .bb-flow-n { min-width: 20px; padding: 0 6px; border-radius: var(--twx-radius-pill); background: var(--twx-surface-sunk); color: var(--twx-text); text-align: center; font-size: var(--twx-text-xs); } html [data-route="hrm"][data-section="leave"] .bb-flow-tab[aria-pressed="true"] .bb-flow-n, html [data-route="hrm"][data-section="loans"] .bb-flow-tab[aria-pressed="true"] .bb-flow-n { background: var(--twx-surface); color: var(--twx-accent-text); } html [data-route="hrm"][data-section="leave"] .bb-flow-search, html [data-route="hrm"][data-section="loans"] .bb-flow-search { min-height: var(--twx-control-h-sm); border-radius: var(--twx-radius-pill) !important; border-color: var(--twx-border) !important; background: var(--twx-surface) !important; color: var(--twx-text) !important; padding-left: var(--twx-space-4) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-av, html [data-route="hrm"][data-section="loans"] .bb-flow-av { background: var(--twx-accent) !important; color: var(--twx-on-accent) !important; border-color: transparent !important; font-size: var(--twx-text-sm) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-chip, html [data-route="hrm"][data-section="loans"] .bb-flow-chip, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-chip { border-color: var(--twx-border) !important; color: var(--twx-text-muted) !important; background: var(--twx-surface-sunk); font-size: var(--twx-text-xs) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-chip[data-tone="warn"], html [data-route="hrm"][data-section="loans"] .bb-flow-chip[data-tone="warn"], html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-chip[data-tone="warn"] { border-color: transparent !important; background: var(--twx-warning-soft); color: var(--twx-warning-text) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-fwd, html [data-route="hrm"][data-section="loans"] .bb-flow-fwd, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-fwd { background: var(--twx-surface-sunk) !important; border: 1px solid var(--twx-border); border-radius: var(--twx-radius) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-fwd select, html [data-route="hrm"][data-section="loans"] .bb-flow-fwd select, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-fwd select, html [data-route="hrm"][data-section="leave"] .bb-flow-fwd input, html [data-route="hrm"][data-section="loans"] .bb-flow-fwd input, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-fwd input, html [data-route="hrm"][data-section="leave"] .bb-flow-bar input, html [data-route="hrm"][data-section="loans"] .bb-flow-bar input, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-bar input { border-color: var(--twx-border) !important; background: var(--twx-surface) !important; color: var(--twx-text) !important; border-radius: var(--twx-radius-sm) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-fwd label, html [data-route="hrm"][data-section="loans"] .bb-flow-fwd label, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-fwd label { color: var(--twx-text-muted) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-tl, html [data-route="hrm"][data-section="loans"] .bb-flow-tl, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-tl { border-left: 2px solid var(--twx-border); padding-left: var(--twx-space-3) !important; margin-left: var(--twx-space-1) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-tl-item b, html [data-route="hrm"][data-section="loans"] .bb-flow-tl-item b, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-tl-item b { color: var(--twx-text) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-tl-item span, html [data-route="hrm"][data-section="loans"] .bb-flow-tl-item span, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-tl-item span { color: var(--twx-text-muted); } html [data-route="hrm"][data-section="leave"] .bb-flow-tl-item[data-tone="good"] > span:first-child, html [data-route="hrm"][data-section="loans"] .bb-flow-tl-item[data-tone="good"] > span:first-child, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-tl-item[data-tone="good"] > span:first-child { background: var(--twx-success) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-tl-item[data-tone="bad"] > span:first-child, html [data-route="hrm"][data-section="loans"] .bb-flow-tl-item[data-tone="bad"] > span:first-child, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-tl-item[data-tone="bad"] > span:first-child { background: var(--twx-danger) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-tl-item[data-tone="warn"] > span:first-child, html [data-route="hrm"][data-section="loans"] .bb-flow-tl-item[data-tone="warn"] > span:first-child, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-tl-item[data-tone="warn"] > span:first-child { background: var(--twx-warning) !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-empty, html [data-route="hrm"][data-section="loans"] .bb-flow-empty { color: var(--twx-text-muted) !important; } /* chips stay on one line on a wide screen (they wrap inside themselves otherwise) */ html [data-route="hrm"][data-section="leave"] .bb-flow-chip, html [data-route="hrm"][data-section="loans"] .bb-flow-chip, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-chip { white-space: nowrap; } /* ---- phone ------------------------------------------------------------------------------------------------------ */ @media (max-width: 767px) { html [data-route="hrm"][data-section="leave"] .bb-lvrow { grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--twx-space-2); } html [data-route="hrm"][data-section="leave"] .bb-flow-search, html [data-route="hrm"][data-section="loans"] .bb-flow-search { flex: 1 1 100% !important; min-width: 0 !important; } html [data-route="hrm"][data-section="leave"] .bb-flow-tabs, html [data-route="hrm"][data-section="loans"] .bb-flow-tabs { width: 100%; } html [data-route="hrm"][data-section="leave"] .bb-flow-chip, html [data-route="hrm"][data-section="loans"] .bb-flow-chip, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-chip { white-space: normal; } html [data-route="hrm"][data-section="leave"] .bb-lv-days { white-space: nowrap; } html [data-route="hrm"][data-section="leave"] .bb-flow-chip-fwd, html [data-route="hrm"][data-section="loans"] .bb-flow-chip-fwd, html [data-route="hrm"][data-section="expenseclaims"] .bb-flow-chip-fwd { border-radius: var(--twx-radius) !important; } html [data-route="hrm"][data-section="leave"] .bb-lvrow-main > div, html [data-route="hrm"][data-section="leave"] .bb-lvrow-main span.flex { flex-wrap: wrap; } html [data-route="hrm"][data-section="leave"] .bb-lvrow-main span[title] { white-space: normal; max-width: 100%; } } /* ==== 62-people-a.css ==== */ /* 62-people-a: People part 1 — Team, Hiring & employment, Time & leave (not Leave Requests), Documents & policies. * docs/notes/BUILD-PEOPLE-FLOW-NAV-BRIEF.md section D ("peoplea"); parity note docs/notes/PEOPLEA-PARITY.md. * * Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. * * Every rule names its sections through :is([data-section=...]), so Leave Requests (C), Overview (B) and the Pay / * Performance / Services / Reports groups (E) are never touched. Table rows keep their paddings and line boxes * (the gate's hover highlight check moves with them); only colour, borders, radii and type change inside a row. * Rules start with "html" so they win a specificity tie with the styles the bundle injects at run time; inline * styles the bundle writes on cards and inputs are only overridden where noted (!important). */ /* ---- 1. card titles: the bare "font-medium" title of a card becomes a real heading with the People mark ---- */ html [data-route="hrm"][data-section="staff"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="departments"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="positions"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="orgchart"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="assignments"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="recruitment"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="joining"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="transfers"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="promotion"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="offboarding"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="disciplinary"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="attendance"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="shifts"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="leavecal"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="leaveEntitlement"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="holidays"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="fieldvisits"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="dailytasks"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="letters"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="docfolders"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="posdocs"] [data-ui="card"] > div.font-medium:first-child, html [data-route="hrm"][data-section="policies"] [data-ui="card"] > div.font-medium:first-child { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; color: var(--twx-text); border-left: 3px solid #DB2777; padding-left: 11px; line-height: 1.35; margin-bottom: 6px; } /* ---- 2. explanatory lines under a card title: calm and readable, not a wall ---- */ html [data-route="hrm"][data-section="staff"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="departments"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="positions"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="orgchart"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="assignments"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="recruitment"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="joining"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="transfers"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="promotion"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="offboarding"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="disciplinary"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="attendance"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="shifts"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="leavecal"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="leaveEntitlement"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="holidays"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="fieldvisits"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="dailytasks"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="letters"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="docfolders"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="posdocs"] [data-ui="card"] > div.text-xs:not([data-bb-how]), html [data-route="hrm"][data-section="policies"] [data-ui="card"] > div.text-xs:not([data-bb-how]) { font-size: 13px; line-height: 1.55; color: var(--twx-text-muted); max-width: 88ch; } /* ---- 3. a one-line "nothing here" sentence at the end of a card: an empty state box ---- */ html [data-route="hrm"][data-section="staff"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="departments"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="positions"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="orgchart"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="assignments"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="recruitment"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="joining"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="transfers"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="promotion"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="offboarding"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="disciplinary"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="attendance"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="shifts"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="leavecal"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="leaveEntitlement"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="holidays"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="fieldvisits"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="dailytasks"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="letters"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="docfolders"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="posdocs"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid), html [data-route="hrm"][data-section="policies"] [data-ui="card"] > div.text-sm:last-child:not(.flex):not(.grid) { background: var(--twx-surface-sunk); border: 1px dashed var(--twx-border-strong); border-radius: 12px; padding: 16px 18px; text-align: center; color: var(--twx-text-muted); line-height: 1.5; margin-top: 4px; } /* ---- 4. one-person-per-line lists (check-in board, settlements, checklists): structured rows ---- */ html [data-route="hrm"][data-section="attendance"] [data-ui="card"] > div.flex.justify-between.items-center.py-2, html [data-route="hrm"][data-section="offboarding"] [data-ui="card"] > div.flex.justify-between.items-center.py-2, html [data-route="hrm"][data-section="joining"] [data-ui="card"] > div.flex.justify-between.items-center.py-2, html [data-route="hrm"][data-section="assignments"] [data-ui="card"] > div.flex.justify-between.items-center.py-2, html [data-route="hrm"][data-section="policies"] [data-ui="card"] > div.flex.justify-between.items-center.py-2, html [data-route="hrm"][data-section="posdocs"] [data-ui="card"] > div.flex.justify-between.items-center.py-2, html [data-route="hrm"][data-section="offboarding"] [data-ui="card"] [data-bb-emp].py-2 { border-top-color: var(--twx-border) !important; padding-left: 10px; padding-right: 10px; border-radius: 10px; transition: background-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"][data-section="attendance"] [data-ui="card"] > div.flex.justify-between.items-center.py-2:hover, html [data-route="hrm"][data-section="offboarding"] [data-ui="card"] > div.flex.justify-between.items-center.py-2:hover, html [data-route="hrm"][data-section="joining"] [data-ui="card"] > div.flex.justify-between.items-center.py-2:hover, html [data-route="hrm"][data-section="assignments"] [data-ui="card"] > div.flex.justify-between.items-center.py-2:hover, html [data-route="hrm"][data-section="policies"] [data-ui="card"] > div.flex.justify-between.items-center.py-2:hover, html [data-route="hrm"][data-section="posdocs"] [data-ui="card"] > div.flex.justify-between.items-center.py-2:hover, html [data-route="hrm"][data-section="offboarding"] [data-ui="card"] [data-bb-emp].py-2:hover { background: var(--twx-surface-hover); } html [data-route="hrm"][data-section="attendance"] [data-ui="card"] > div.flex.justify-between.items-center.py-2 span.font-medium { font-weight: 600; color: var(--twx-text); } html [data-route="hrm"][data-section="attendance"] [data-ui="card"] > div.flex.justify-between.items-center.py-2 span.text-xs { font-size: 12px; font-variant-numeric: tabular-nums; background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); border-radius: var(--twx-radius-pill); padding: 1px 8px; margin-left: 6px; color: var(--twx-text-muted); } /* ---- 5. tables: the header stays in view, names read as names, figures line up ---- */ html [data-route="hrm"][data-section="staff"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="departments"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="positions"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="assignments"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="transfers"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="promotion"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="disciplinary"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="leaveEntitlement"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="holidays"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="fieldvisits"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="docfolders"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="posdocs"] table.bbds-tbl thead th, html [data-route="hrm"][data-section="policies"] table.bbds-tbl thead th { position: sticky; top: 0; z-index: 1; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; color: var(--twx-text-muted); background-color: var(--twx-surface-sunk); border-bottom: 1px solid var(--twx-border); } html [data-route="hrm"][data-section="staff"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="departments"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="positions"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="assignments"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="transfers"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="promotion"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="disciplinary"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="leaveEntitlement"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="holidays"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="fieldvisits"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="docfolders"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="posdocs"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="policies"] table.bbds-tbl td.bbds-num, html [data-route="hrm"][data-section="staff"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="departments"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="positions"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="assignments"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="transfers"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="promotion"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="disciplinary"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="leaveEntitlement"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="holidays"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="fieldvisits"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="docfolders"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="posdocs"] table.bbds-tbl th.bbds-num, html [data-route="hrm"][data-section="policies"] table.bbds-tbl th.bbds-num { text-align: right; font-variant-numeric: tabular-nums; } html [data-route="hrm"][data-section="staff"] table.bbds-tbl .bbds-av { font-size: 12px; font-weight: 650; letter-spacing: 0.02em; box-shadow: 0 0 0 2px var(--twx-surface); } html [data-route="hrm"][data-section="staff"] table.bbds-tbl tbody td:first-child { font-size: 13px; } /* ---- 6. recruitment pipeline: the stage columns read as cards, the empty ones as quiet placeholders ---- */ html [data-route="hrm"][data-section="recruitment"] .grid > div[style*="border-radius"] { border-radius: 14px !important; } html [data-route="hrm"][data-section="recruitment"] [role="group"] button[aria-pressed="true"] { box-shadow: var(--twx-shadow-2); } /* ---- 7. forms in the open panels: two-column grid, roomy labels, helper text under the field ---- */ html [data-route="hrm"][data-section="staff"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="departments"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="positions"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="joining"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="transfers"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="promotion"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="offboarding"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="disciplinary"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="attendance"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="shifts"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="leaveEntitlement"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="holidays"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="fieldvisits"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="dailytasks"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="letters"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="posdocs"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="policies"] [data-ui="form-row"] > .bb-label, html [data-route="hrm"][data-section="staff"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="departments"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="positions"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="joining"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="transfers"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="promotion"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="offboarding"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="disciplinary"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="attendance"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="shifts"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="leaveEntitlement"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="holidays"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="fieldvisits"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="dailytasks"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="letters"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="posdocs"] [data-ui="form-row"] > span.bb-label, html [data-route="hrm"][data-section="policies"] [data-ui="form-row"] > span.bb-label { font-size: 12px; font-weight: 650; letter-spacing: 0.04em; color: var(--twx-text-muted); margin-bottom: 4px; } html [data-route="hrm"][data-section="transfers"] .grid.gap-4, html [data-route="hrm"][data-section="disciplinary"] .grid.gap-4, html [data-route="hrm"][data-section="fieldvisits"] .grid.gap-4, html [data-route="hrm"][data-section="holidays"] .grid.gap-4 { column-gap: 20px; row-gap: 16px; } html [data-route="hrm"][data-section="transfers"] [data-ui="form-row"] .text-xs, html [data-route="hrm"][data-section="disciplinary"] [data-ui="form-row"] .text-xs, html [data-route="hrm"][data-section="fieldvisits"] [data-ui="form-row"] .text-xs, html [data-route="hrm"][data-section="holidays"] [data-ui="form-row"] .text-xs, html [data-route="hrm"][data-section="offboarding"] [data-ui="form-row"] .text-xs, html [data-route="hrm"][data-section="joining"] [data-ui="form-row"] .text-xs { font-size: 12px; line-height: 1.45; color: var(--twx-text-muted); } html [data-route="hrm"][data-section="staff"] .bbds-filters, html [data-route="hrm"][data-section="departments"] .bbds-filters, html [data-route="hrm"][data-section="positions"] .bbds-filters, html [data-route="hrm"][data-section="joining"] .bbds-filters, html [data-route="hrm"][data-section="transfers"] .bbds-filters, html [data-route="hrm"][data-section="promotion"] .bbds-filters, html [data-route="hrm"][data-section="offboarding"] .bbds-filters, html [data-route="hrm"][data-section="disciplinary"] .bbds-filters, html [data-route="hrm"][data-section="attendance"] .bbds-filters, html [data-route="hrm"][data-section="shifts"] .bbds-filters, html [data-route="hrm"][data-section="leaveEntitlement"] .bbds-filters, html [data-route="hrm"][data-section="holidays"] .bbds-filters, html [data-route="hrm"][data-section="fieldvisits"] .bbds-filters, html [data-route="hrm"][data-section="dailytasks"] .bbds-filters, html [data-route="hrm"][data-section="letters"] .bbds-filters, html [data-route="hrm"][data-section="docfolders"] .bbds-filters, html [data-route="hrm"][data-section="posdocs"] .bbds-filters, html [data-route="hrm"][data-section="policies"] .bbds-filters { background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); border-radius: 14px; padding: 12px 14px; gap: 12px; } /* ---- 8. day-by-day lists (daily task updates): the date is a heading, each update a row ---- */ html [data-route="hrm"][data-section="dailytasks"] [data-ui="card"] .mb-4 > .bb-label { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; color: var(--twx-text); padding: 6px 10px; background: var(--twx-surface-sunk); border-radius: 8px; margin-bottom: 6px; } /* ---- 9. the org chart cards and the leave calendar ---- */ html [data-route="hrm"][data-section="orgchart"] [data-ui="card"] .text-center { border-radius: 14px; transition: box-shadow var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"][data-section="orgchart"] [data-ui="card"] .text-center:hover { box-shadow: var(--twx-shadow-2); border-color: var(--twx-border-strong); } html [data-route="hrm"][data-section="leavecal"] table thead th { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; color: var(--twx-text-muted); } /* ---- 10. the People part-1 kit: status chips with counts, Export CSV ---- */ html [data-route="hrm"] .bb-pa-kit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; } html [data-route="hrm"] .bb-pa-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } html [data-route="hrm"] .bb-pa-kit-r { display: flex; align-items: center; gap: 10px; margin-left: auto; } html [data-route="hrm"] .bb-pa-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 8px 6px 14px; border: 1px solid var(--twx-border); border-radius: var(--twx-radius-pill); background: var(--twx-surface); color: var(--twx-text); font-size: 13px; font-weight: 550; box-shadow: var(--twx-shadow-1); cursor: pointer; transition: background-color var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"] .bb-pa-chip:hover { background: var(--twx-surface-hover); border-color: var(--twx-border-strong); } html [data-route="hrm"] .bb-pa-chip-n { min-width: 24px; padding: 1px 8px; border-radius: var(--twx-radius-pill); background: var(--twx-surface-sunk); color: var(--twx-text-muted); font-size: 12px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; } html [data-route="hrm"] .bb-pa-chip.bb-pa-chip-on { background: var(--twx-accent); border-color: var(--twx-accent); color: var(--twx-on-accent); } html [data-route="hrm"] .bb-pa-chip.bb-pa-chip-on .bb-pa-chip-n { background: var(--twx-on-accent); color: var(--twx-accent); } html [data-route="hrm"] .bb-pa-said { font-size: 13px; color: var(--twx-text-muted); } /* ---- 11. a name that opens the quick view ---- */ html [data-route="hrm"] [data-pa-emp] { cursor: pointer; } html [data-route="hrm"] [data-pa-emp]:hover { color: var(--twx-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } html [data-route="hrm"] [data-pa-emp]:focus-visible { outline: 2px solid var(--twx-focus); outline-offset: 2px; border-radius: 4px; } /* ---- 12. the quick-view panel ---- */ html [data-route="hrm"] [data-pa-quick] { display: flex; flex-direction: column; gap: 18px; } html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-head { display: flex; align-items: center; gap: 14px; } html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-av { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, #DB2777 14%, var(--twx-surface)); color: var(--twx-text); font-size: 18px; font-weight: 700; object-fit: cover; } html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--twx-text); } html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; } html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-row dt { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--twx-text-muted); } html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-row dd { margin: 2px 0 0; font-size: 14px; color: var(--twx-text); overflow-wrap: anywhere; } html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-today { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 12px; background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); font-size: 14px; color: var(--twx-text); } @media (max-width: 480px) { html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-grid, html [data-route="hrm"] [data-pa-quick] .bb-pa-qv-today { grid-template-columns: minmax(0, 1fr); } html [data-route="hrm"] .bb-pa-kit-r { margin-left: 0; } } /* ==== 63-people-b.css ==== */ /* 63-people-b: People part 2 (agent E "peopleb", docs/notes/BUILD-PEOPLE-FLOW-NAV-BRIEF.md section E) * Pay & benefits (not Loans & Advances), Performance & learning, Employee services, People reports. * Expense Claims: the page look only (cards, empty state, submit panel). Its decision buttons, chips and * timeline belong to agent C (61-people-flow.css) and are not styled here. * Basic Salary Approval: look only. No counts, no badges. * Rules follow docs/modernization/VISUAL-REDESIGN-RULES.md: visual properties only, every rule scoped under * [data-route="hrm"][data-section="..."], --twx-* tokens, no table-row padding or height changes, print untouched. */ /* ========================================================================== * 1. Shared look for every section in this file * ========================================================================== */ /* cards: one calm panel style, generous padding, soft shadow */ html [data-route="hrm"][data-section="payroll"] [data-ui="card"], html [data-route="hrm"][data-section="mypay"] [data-ui="card"], html [data-route="hrm"][data-section="payschemes"] [data-ui="card"], html [data-route="hrm"][data-section="basicapprove"] [data-ui="card"], html [data-route="hrm"][data-section="bonuses"] [data-ui="card"], html [data-route="hrm"][data-section="expenseclaims"] [data-ui="card"], html [data-route="hrm"][data-section="benefits"] [data-ui="card"], html [data-route="hrm"][data-section="attribution"] [data-ui="card"], html [data-route="hrm"][data-section="performance"] [data-ui="card"], html [data-route="hrm"][data-section="scorecards"] [data-ui="card"], html [data-route="hrm"][data-section="training"] [data-ui="card"], html [data-route="hrm"][data-section="skills"] [data-ui="card"], html [data-route="hrm"][data-section="qcppay"] [data-ui="card"], html [data-route="hrm"][data-section="announcements"] [data-ui="card"], html [data-route="hrm"][data-section="helpdesk"] [data-ui="card"], html [data-route="hrm"][data-section="surveys"] [data-ui="card"], html [data-route="hrm"][data-section="assets"] [data-ui="card"], html [data-route="hrm"][data-section="peopleanalytics"] [data-ui="card"], html [data-route="hrm"][data-section="hrreports"] [data-ui="card"] { border: 1px solid var(--twx-border); border-radius: 14px; background: var(--twx-surface); box-shadow: var(--twx-shadow-1); } /* card titles that the screens draw as a plain "font-medium" line read as headings */ html [data-route="hrm"][data-section="bonuses"] [data-ui="card"] > .font-medium, html [data-route="hrm"][data-section="announcements"] [data-ui="card"] > .font-medium, html [data-route="hrm"][data-section="qcppay"] [data-ui="card"] > .font-medium, html [data-route="hrm"][data-section="hrreports"] [data-ui="card"] > .font-medium, html [data-route="hrm"][data-section="peopleanalytics"] [data-ui="card"] > .font-medium, html [data-route="hrm"][data-section="expenseclaims"] [data-ui="card"] > .font-medium { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--twx-text); } /* fold-out panels ("Log a Bonus", "Add Training", "Post an Announcement", ...): a clear, clickable header row */ html [data-route="hrm"][data-section="bonuses"] .bb-sec-head, html [data-route="hrm"][data-section="expenseclaims"] .bb-sec-head, html [data-route="hrm"][data-section="performance"] .bb-sec-head, html [data-route="hrm"][data-section="training"] .bb-sec-head, html [data-route="hrm"][data-section="qcppay"] .bb-sec-head, html [data-route="hrm"][data-section="announcements"] .bb-sec-head, html [data-route="hrm"][data-section="basicapprove"] .bb-sec-head, html [data-route="hrm"][data-section="benefits"] .bb-sec-head { border-radius: 14px; transition: background-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"][data-section="bonuses"] .bb-sec-head:hover, html [data-route="hrm"][data-section="expenseclaims"] .bb-sec-head:hover, html [data-route="hrm"][data-section="performance"] .bb-sec-head:hover, html [data-route="hrm"][data-section="training"] .bb-sec-head:hover, html [data-route="hrm"][data-section="qcppay"] .bb-sec-head:hover, html [data-route="hrm"][data-section="announcements"] .bb-sec-head:hover, html [data-route="hrm"][data-section="basicapprove"] .bb-sec-head:hover, html [data-route="hrm"][data-section="benefits"] .bb-sec-head:hover { background: var(--twx-surface-hover); } html [data-route="hrm"][data-section="bonuses"] .bb-sec-head .font-medium, html [data-route="hrm"][data-section="expenseclaims"] .bb-sec-head .font-medium, html [data-route="hrm"][data-section="performance"] .bb-sec-head .font-medium, html [data-route="hrm"][data-section="training"] .bb-sec-head .font-medium, html [data-route="hrm"][data-section="qcppay"] .bb-sec-head .font-medium, html [data-route="hrm"][data-section="announcements"] .bb-sec-head .font-medium, html [data-route="hrm"][data-section="basicapprove"] .bb-sec-head .font-medium, html [data-route="hrm"][data-section="benefits"] .bb-sec-head .font-medium { font-weight: 650; color: var(--twx-text); } /* empty states: a soft, centred panel instead of a bare line of grey text */ html [data-route="hrm"][data-section="bonuses"] .bbds-empty, html [data-route="hrm"][data-section="expenseclaims"] .bbds-empty, html [data-route="hrm"][data-section="performance"] .bbds-empty, html [data-route="hrm"][data-section="training"] .bbds-empty, html [data-route="hrm"][data-section="qcppay"] .bbds-empty, html [data-route="hrm"][data-section="basicapprove"] .bbds-empty, html [data-route="hrm"][data-section="announcements"] [data-pb="empty"], html [data-route="hrm"][data-section="helpdesk"] [data-pb="empty"], html [data-route="hrm"][data-section="hrreports"] [data-pb="empty"] { border: 1px dashed var(--twx-border-strong); border-radius: 12px; background: var(--twx-surface-sunk); padding: 22px 18px; text-align: center; } html [data-route="hrm"][data-section="announcements"] [data-pb="empty"], html [data-route="hrm"][data-section="helpdesk"] [data-pb="empty"], html [data-route="hrm"][data-section="hrreports"] [data-pb="empty"] { color: var(--twx-text-muted) !important; font-size: 14px; } html [data-route="hrm"][data-section="bonuses"] .bbds-empty-t, html [data-route="hrm"][data-section="expenseclaims"] .bbds-empty-t, html [data-route="hrm"][data-section="performance"] .bbds-empty-t, html [data-route="hrm"][data-section="training"] .bbds-empty-t, html [data-route="hrm"][data-section="qcppay"] .bbds-empty-t, html [data-route="hrm"][data-section="basicapprove"] .bbds-empty-t { font-size: 15px; font-weight: 650; color: var(--twx-text); } html [data-route="hrm"][data-section="bonuses"] .bbds-empty-n, html [data-route="hrm"][data-section="expenseclaims"] .bbds-empty-n, html [data-route="hrm"][data-section="performance"] .bbds-empty-n, html [data-route="hrm"][data-section="training"] .bbds-empty-n, html [data-route="hrm"][data-section="qcppay"] .bbds-empty-n, html [data-route="hrm"][data-section="basicapprove"] .bbds-empty-n { color: var(--twx-text-muted); line-height: 1.5; } /* inside a table the empty row keeps its own cell; only the inner panel is drawn */ html [data-route="hrm"][data-section="bonuses"] td.bb-empty-row .bbds-empty, html [data-route="hrm"][data-section="performance"] td.bb-empty-row .bbds-empty { margin: 6px 0; } /* monospace figures (Reports, Analytics, Performance Scores): the app font with tabular digits */ html [data-route="hrm"][data-section="hrreports"] [style*="IBM Plex Mono"], html [data-route="hrm"][data-section="peopleanalytics"] [style*="IBM Plex Mono"], html [data-route="hrm"][data-section="scorecards"] [style*="IBM Plex Mono"], html [data-route="hrm"][data-section="payschemes"] [style*="IBM Plex Mono"], html [data-route="hrm"][data-section="attribution"] [style*="IBM Plex Mono"], html [data-route="hrm"][data-section="mypay"] [style*="IBM Plex Mono"] { font-family: var(--twx-font) !important; font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -0.01em; } /* ========================================================================== * 2. The summary strip (tiles + Export CSV) added by .dev/patch_peopleb.js * ========================================================================== */ html [data-route="hrm"] .bb-pbstrip { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; } html [data-route="hrm"] .bb-pbtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } html [data-route="hrm"] .bb-pbtiles [data-ui="stat"] { margin: 0; padding: 12px 16px !important; border: 1px solid var(--twx-border); border-radius: 14px !important; background: var(--twx-surface) !important; box-shadow: var(--twx-shadow-1); } html [data-route="hrm"] .bb-pbtiles [data-ui="stat"] .bb-fig { font-size: 24px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; } html [data-route="hrm"] .bb-pbtiles [data-ui="stat"] .text-xs { font-size: 12px; } html [data-route="hrm"] .bb-pbtiles [data-ui="stat"][data-tone="bad"] { border-color: color-mix(in srgb, var(--twx-danger) 40%, var(--twx-border)); box-shadow: inset 3px 0 0 var(--twx-danger), var(--twx-shadow-1); } html [data-route="hrm"] .bb-pbtiles [data-ui="stat"][data-tone="warn"] { border-color: color-mix(in srgb, var(--twx-warning) 40%, var(--twx-border)); box-shadow: inset 3px 0 0 var(--twx-warning), var(--twx-shadow-1); } html [data-route="hrm"] .bb-pbacts { display: flex; justify-content: flex-end; gap: 8px; } html [data-route="hrm"] .bb-pbacts .bb-btn { min-height: 34px; border-radius: 10px; border-color: var(--twx-border-strong) !important; background: var(--twx-surface) !important; font-weight: 600; } html [data-route="hrm"] .bb-pbacts .bb-btn:hover { background: var(--twx-surface-hover) !important; } /* Reports & Dashboards: the strip sits under the existing tiles and only carries the export */ html [data-route="hrm"][data-section="hrreports"] .bb-pbstrip { margin-top: -4px; } /* ========================================================================== * 3. Per-section touches * ========================================================================== */ /* ---- Payroll: the controls panel and the contributions bar read as one toolbar ---- */ html [data-route="hrm"][data-section="payroll"] .bbds-filters { border-radius: 12px; } html [data-route="hrm"][data-section="payroll"] table.bbds-tbl tfoot td { font-weight: 650; color: var(--twx-text); } /* ---- My Payroll: the "My month" box is a soft inner panel ---- */ html [data-route="hrm"][data-section="mypay"] [data-ui="card"] [data-ui="card"] { background: var(--twx-surface-sunk); box-shadow: none; border-radius: 12px; } /* ---- Compensation Profiles: profile rows lift on hover ---- */ html [data-route="hrm"][data-section="payschemes"] [data-ui="card"] [data-ui="card"] { border-radius: 12px; box-shadow: none; transition: box-shadow var(--twx-dur) var(--twx-ease), border-color var(--twx-dur) var(--twx-ease); } html [data-route="hrm"][data-section="payschemes"] [data-ui="card"] [data-ui="card"]:hover { box-shadow: var(--twx-shadow-2); border-color: color-mix(in srgb, var(--twx-accent) 30%, var(--twx-border)); } /* ---- Basic Salary Approval (look only): the line checkboxes sit as tidy pills ---- */ html [data-route="hrm"][data-section="basicapprove"] label.flex.items-center.gap-2.text-sm { padding: 4px 10px; border: 1px solid var(--twx-border); border-radius: var(--twx-radius-pill); background: var(--twx-surface); min-height: 30px; } html [data-route="hrm"][data-section="basicapprove"] label.flex.items-center.gap-2.text-sm:hover { background: var(--twx-surface-hover); } html [data-route="hrm"][data-section="basicapprove"] .bb-main > div > .bbds-empty, html [data-route="hrm"][data-section="basicapprove"] .bbds-empty { box-shadow: var(--twx-shadow-1); } /* ---- Performance: review / feedback rows as quiet list items ---- */ html [data-route="hrm"][data-section="performance"] .bbds-defs { border-radius: 10px; background: var(--twx-surface-sunk); padding: 8px 12px; } /* ---- Performance Scores: each person a clean card; the name leads ---- */ html [data-route="hrm"][data-section="scorecards"] .flex.flex-col.gap-2 > div { border-radius: 12px !important; border-color: var(--twx-border) !important; background: var(--twx-surface); padding: 12px 14px !important; transition: box-shadow var(--twx-dur) var(--twx-ease); } html [data-route="hrm"][data-section="scorecards"] .flex.flex-col.gap-2 > div:hover { box-shadow: var(--twx-shadow-1); } html [data-route="hrm"][data-section="scorecards"] [data-pb="scr-who"] { flex: 1 1 320px; min-width: 0; } html [data-route="hrm"][data-section="scorecards"] [data-pb="scr-name"] { font-size: 15px; font-weight: 650; color: var(--twx-text); margin-bottom: 2px; } /* ---- Training: each training a soft row ---- */ html [data-route="hrm"][data-section="training"] [data-ui="card"] .py-3 { padding-left: 4px; padding-right: 4px; } /* ---- Skills & Certifications: the two add forms sit on a sunk band ---- */ html [data-route="hrm"][data-section="skills"] [data-ui="card"] .bbds-field input, html [data-route="hrm"][data-section="skills"] [data-ui="card"] .bbds-field select { border-radius: 10px; } /* ---- Programme Payments: the total line ---- */ html [data-route="hrm"][data-section="qcppay"] .bbds-num { font-variant-numeric: tabular-nums; font-weight: 650; } /* ---- Announcements: each one a card, pinned ones edged in the accent ---- */ html [data-route="hrm"][data-section="announcements"] [data-pb="ann-row"] { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--twx-border) !important; border-radius: 12px; background: var(--twx-surface); } html [data-route="hrm"][data-section="announcements"] [data-pb="ann-row"][data-pinned="1"] { box-shadow: inset 3px 0 0 var(--twx-accent); background: color-mix(in srgb, var(--twx-accent) 5%, var(--twx-surface)); } html [data-route="hrm"][data-section="announcements"] [data-pb="ann-row"] .font-medium { font-size: 15px; font-weight: 650; color: var(--twx-text); } html [data-route="hrm"][data-section="announcements"] [data-pb="ann-row"] .text-sm { line-height: 1.55; color: var(--twx-text); } html [data-route="hrm"][data-section="announcements"] [data-pb="ann-row"] button { min-width: 28px; min-height: 28px; border-radius: 8px; } html [data-route="hrm"][data-section="announcements"] [data-pb="ann-row"] button:hover { background: var(--twx-danger-soft); } /* ---- Help Desk: request rows breathe ---- */ html [data-route="hrm"][data-section="helpdesk"] [data-ui="card"] .py-2 { padding-top: 12px; padding-bottom: 12px; } /* ---- Employee Surveys: the writer form and list share one rhythm ---- */ html [data-route="hrm"][data-section="surveys"] [data-ui="card"] input:not([type=checkbox]), html [data-route="hrm"][data-section="surveys"] [data-ui="card"] select { border-radius: 10px; } /* ---- People Analytics: bars and the period chips ---- */ html [data-route="hrm"][data-section="peopleanalytics"] [data-ui="card"] [data-ui="stat"] { border-radius: 12px !important; } /* ---- Reports & Dashboards: label · meter · figure rows instead of a newspaper column ---- */ html [data-route="hrm"][data-section="hrreports"] [data-pb="hr-row"] { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(80px, 2fr) minmax(48px, auto); align-items: center; gap: 14px; padding-top: 8px !important; padding-bottom: 8px !important; border-top: 1px solid var(--twx-border); font-size: 14px; } html [data-route="hrm"][data-section="hrreports"] [data-pb="hr-row"]:first-of-type { border-top: 0; } html [data-route="hrm"][data-section="hrreports"] [data-pb="hr-row"] > span:last-child { text-align: right; color: var(--twx-text); } html [data-route="hrm"] .bb-pbmeter { display: block; height: 8px; border-radius: var(--twx-radius-pill); background: var(--twx-surface-sunk); overflow: hidden; } html [data-route="hrm"] .bb-pbmeter-f { display: block; height: 100%; border-radius: var(--twx-radius-pill); background: var(--twx-accent); } /* ========================================================================== * 4. Phone width * ========================================================================== */ @media (max-width: 640px) { html [data-route="hrm"] .bb-pbtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html [data-route="hrm"] .bb-pbtiles [data-ui="stat"] .bb-fig { font-size: 20px; } html [data-route="hrm"] .bb-pbacts { justify-content: flex-start; } html [data-route="hrm"][data-section="hrreports"] [data-pb="hr-row"] { grid-template-columns: minmax(90px, 1fr) minmax(60px, 1fr) auto; gap: 10px; } } /* ========================================================================== * 5. CLAIMS (agent G, BUILD-CASH-CLAIMS-META-BRIEF.md section G): the Pay step, the * Paid / Approved, not paid chip, the list tiles and filter on Expense Claims, and the * "My claims" page (route myclaims) for a login without People → Expense Claims. * Look only; every element is drawn by the bundle (.dev/patch_claims.code.js). * ========================================================================== */ html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-chip, html [data-route="myclaims"] .bb-clm-chip { border-radius: var(--twx-radius-pill) !important; font-size: var(--twx-text-xs) !important; background: var(--twx-surface-sunk); color: var(--twx-text-muted) !important; border-color: var(--twx-border) !important; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-chip[data-tone="good"], html [data-route="myclaims"] .bb-clm-chip[data-tone="good"] { background: var(--twx-success-soft); color: var(--twx-success-text) !important; border-color: var(--twx-success) !important; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-chip[data-tone="warn"], html [data-route="myclaims"] .bb-clm-chip[data-tone="warn"] { background: var(--twx-warning-soft); color: var(--twx-warning-text) !important; border-color: var(--twx-warning) !important; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-pay, html [data-route="myclaims"] .bb-clm-pay { background: var(--twx-surface-sunk) !important; border: 1px solid var(--twx-border); border-radius: var(--twx-radius) !important; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-pay select, html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-pay input, html [data-route="myclaims"] .bb-clm-pay select, html [data-route="myclaims"] .bb-clm-pay input, html [data-route="myclaims"] .bb-clm-grid select, html [data-route="myclaims"] .bb-clm-grid input { min-height: var(--twx-control-h-sm); border-radius: var(--twx-radius-sm) !important; border: 1px solid var(--twx-border-strong) !important; background: var(--twx-surface) !important; color: var(--twx-text) !important; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-f, html [data-route="myclaims"] .bb-clm-f { color: var(--twx-text-muted) !important; font-weight: 500; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-legacy, html [data-route="myclaims"] .bb-clm-legacy { padding: var(--twx-space-2) var(--twx-space-3); border-left: 3px solid var(--twx-warning); border-radius: var(--twx-radius-sm); background: var(--twx-warning-soft); margin-bottom: var(--twx-space-2); } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-legacy .text-xs, html [data-route="myclaims"] .bb-clm-legacy .text-xs { color: var(--twx-warning-text) !important; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-paid, html [data-route="myclaims"] .bb-clm-paid { color: var(--twx-success-text) !important; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-head [data-ui="stat"], html [data-route="myclaims"] .bb-clm-head [data-ui="stat"] { border-radius: var(--twx-radius-lg) !important; } /* the My claims page: a page header card with the People hue, cards, rows */ html [data-route="myclaims"] .bb-clm-pagehead { padding: 18px 22px; border-radius: var(--twx-radius-lg); background: var(--twx-surface); border: 1px solid var(--twx-border); border-top: 3px solid #DB2777; box-shadow: var(--twx-shadow-1); } html [data-route="myclaims"] .bb-clm-title { color: var(--twx-text) !important; font-size: var(--twx-text-xl) !important; } html [data-route="myclaims"] .bb-clm-sub { color: var(--twx-text-muted) !important; } html [data-route="myclaims"] .bb-clm-card { border-radius: var(--twx-radius-lg) !important; border: 1px solid var(--twx-border) !important; box-shadow: var(--twx-shadow-1); } html [data-route="myclaims"] .bb-clm-item { border-top-color: var(--twx-border) !important; } html [data-route="myclaims"] .bb-clm-item:hover { background: var(--twx-surface-hover); } html [data-route="myclaims"] .bb-clm-item .bbds-num { font-variant-numeric: tabular-nums; font-weight: 600; } @media (max-width: 640px) { html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-row > *, html [data-route="myclaims"] .bb-clm-row > * { flex: 1 1 100%; } html [data-route="hrm"][data-section="expenseclaims"] .bb-clm-chip, html [data-route="myclaims"] .bb-clm-chip { white-space: normal !important; } html [data-route="myclaims"] .bb-clm-pagehead { padding: 14px 16px; } } /* ==== 70-system.css ==== */ /* 70-system: settings, reports, activity, approvals */ /* Twixen visual theme, area file. Built by tools/theme/build.mjs into assets/theme-.css (linked AFTER the base CSS). * RULES (docs/modernization/VISUAL-REDESIGN-RULES.md; enforced by tools/theme/lint.mjs and the visual gate): * 1. Scope EVERY rule under a [data-route="..."] (and, where needed, [data-section="..."] / [data-tab="..."]) selector. Only 00-base.css may use bare [data-ui] / :root rules. * 2. VISUAL properties only: color, background, border, radius, shadow, spacing, typography, and layout/grid of elements that already exist. * 3. NEVER display:none, visibility:hidden, opacity:0, content:, pointer-events:none, clip/clip-path hiding, height:0 / max-height:0 with overflow hidden, * font-size under 12px for text, or a text colour equal to its background. Never reorder in a way that hides something. Print styles stay as they are. * 4. Do not rename, reword, add, remove or hide any option, column, status, row rule, action, filter, tab, tile, export, print, wording or behaviour. */ /* ========================================================================== * System area: settings, reports, activity, approvals. Visuals only. * Specificity: `html [data-route]` beats the bundle's inline-less utility classes; * !important only where the bundle writes inline style="" (settings tabs, headings). * ========================================================================== */ /* Premium pass (2026-11-01): page header, stat tiles and cards come from 00-base. * This file only adds what is particular to the system routes. No gradients, no coloured outlines. */ /* ---- stat rows: an even grid (tile look itself is base) ----------------------- */ html [data-route="reports"] .flex:has(> [data-ui="stat"]), html [data-route="activity"] .flex:has(> [data-ui="stat"]), html [data-route="approvals"] .flex:has(> [data-ui="stat"]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; } html [data-route="reports"] [data-ui="stat"], html [data-route="activity"] [data-ui="stat"], html [data-route="approvals"] [data-ui="stat"] { min-width: 0; } html [data-route="approvals"] [data-ui="stat"].bb-stat-go { cursor: pointer; transition: transform var(--twx-dur) var(--twx-ease), box-shadow var(--twx-dur) var(--twx-ease); } html [data-route="approvals"] [data-ui="stat"].bb-stat-go:hover { transform: translateY(-2px); box-shadow: var(--twx-shadow-2); } /* ---- card headings ------------------------------------------------------------- */ html [data-route="reports"] [data-ui="card"] [role="heading"][aria-level="2"], html [data-route="approvals"] [data-ui="card"] [role="heading"][aria-level="2"] { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; } html [data-route="reports"] [data-bb-how] { color: var(--twx-text-muted); font-size: 13px; line-height: 1.55; } /* ---- reports: period picker as one calm segmented bar -------------------------- */ html [data-route="reports"] [data-ui="page-header"] + div > .flex.flex-wrap.items-center.gap-2 { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); max-width: 100%; } html [data-route="reports"] [data-ui="page-header"] + div > .flex.flex-wrap.items-center.gap-2 > .bb-btn { border-radius: 9px; border-color: transparent; background: transparent; padding: 6px 14px; font-size: 14px; box-shadow: none; } html [data-route="reports"] [data-ui="page-header"] + div > .flex.flex-wrap.items-center.gap-2 > .bb-btn-ghost:hover { background: var(--twx-surface); } html [data-route="reports"] [data-ui="page-header"] + div > .flex.flex-wrap.items-center.gap-2 > .bb-btn-accent { background: var(--twx-surface); color: var(--twx-accent-text); box-shadow: var(--twx-shadow-1); } html [data-route="reports"] [data-ui="page-header"] + div + .text-xs { font-size: 13px; margin: 6px 4px 12px; color: var(--twx-text-muted); } /* chart legibility on the card surface */ html [data-route="reports"] svg text { fill: var(--twx-text-muted); font-size: 12px; font-family: inherit; } html [data-route="reports"] svg text[font-weight="600"], html [data-route="reports"] svg text[font-weight="700"] { fill: var(--twx-text); } html [data-route="reports"] svg line[stroke], html [data-route="reports"] svg path[stroke-dasharray] { stroke: var(--twx-border); } /* ---- activity: one quiet toolbar strip, readable feed --------------------------- */ html [data-route="activity"] .tab-content > div > .mb-3.p-2.rounded.text-xs { padding: 10px 14px; border-radius: 12px; font-size: 13px; background: var(--twx-surface-sunk); border: 1px solid var(--twx-border); color: var(--twx-text-muted); } html [data-route="activity"] .tab-content > div > .flex.flex-wrap.gap-2.mb-4.items-center.justify-between { padding: 10px 14px; border-radius: 12px; background: var(--twx-surface); border: 1px solid var(--twx-border); box-shadow: var(--twx-shadow-1); margin-bottom: 14px; gap: 10px; } html [data-route="activity"] [data-ui="card"] { padding: 6px 8px; } html [data-route="activity"] [data-ui="card"] > .py-2 { padding: 12px 14px; border-bottom: 1px solid var(--twx-border); transition: background-color var(--twx-dur) var(--twx-ease); } html [data-route="activity"] [data-ui="card"] > .py-2:last-child { border-bottom: 0; } html [data-route="activity"] [data-ui="card"] > .py-2:hover { background: var(--twx-surface-hover); border-radius: 10px; } html [data-route="activity"] [data-ui="card"] > .py-2 .text-sm { font-size: 14px; font-weight: 500; line-height: 1.45; } html [data-route="activity"] [data-ui="card"] > .py-2 .text-xs { font-size: 13px; line-height: 1.5; margin-top: 2px; color: var(--twx-text-muted); } html [data-route="activity"] [data-ui="card"] > .flex { padding: 16px 14px 8px; } /* ---- approvals: queue items as calm cards ---------------------------------------- */ html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg { padding: 14px 18px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--twx-border); background: var(--twx-surface); box-shadow: var(--twx-shadow-1); transition: border-color var(--twx-dur) var(--twx-ease); } html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg:hover { border-color: color-mix(in srgb, var(--twx-accent) 35%, var(--twx-border)); } html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg > .flex:first-child { gap: 16px; align-items: center; } html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg .font-medium { font-size: 15px; font-weight: 600; } html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg .text-xs { font-size: 13px; line-height: 1.6; } html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg > .text-xs.mt-2.p-2.rounded { padding: 8px 12px; margin-top: 10px; border-radius: 10px; background: var(--twx-surface-sunk); } html [data-route="approvals"] [data-ui="card"] img.rounded { border-radius: 10px; border: 1px solid var(--twx-border); } /* ========================================================================== * Settings: like the Partners settings page. * Calm left section list, filled accent pill for the active one, content cards, tidy form rows. * ========================================================================== */ html [data-route="settings"] .tab-content > div > .flex.items-center.gap-2.flex-wrap.mb-4 { margin-bottom: 16px; } html [data-route="settings"] .tab-content > div > .flex.items-center.gap-2.flex-wrap.mb-4 input { box-sizing: border-box; max-width: 100%; min-height: 40px; width: min(100%, 480px); padding: 0 16px; border-radius: var(--twx-radius-pill); font-size: 14px; background: var(--twx-surface); border: 1px solid var(--twx-border); } /* section list: the shared sub-menu panel (00-base [data-ui="subnav"], 2026-11-02 premium sub-menus); only the sticky column is set here */ html [data-route="settings"] .bb-set-rail { position: sticky; top: 12px; } html [data-route="settings"] .bb-set-rail > div { margin-bottom: 18px; } html [data-route="settings"] .bb-set-rail > div:last-child { margin-bottom: 0; } html [data-route="settings"] .bb-set-rail > div > .uppercase { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--twx-text-muted); padding: 0 12px; margin-bottom: 6px; } html [data-route="settings"] .bb-set-rail button { border-radius: 10px; padding: 0 12px; min-height: 40px; font-size: 14px; margin-bottom: 2px; gap: 10px; transition: background-color var(--twx-dur) var(--twx-ease), color var(--twx-dur) var(--twx-ease); } html [data-route="settings"] .bb-set-rail button[style*="background: transparent"]:hover { background: var(--twx-surface-hover) !important; } html [data-route="settings"] .bb-set-rail button:not([style*="background: transparent"]) { background: var(--twx-accent) !important; color: var(--twx-on-accent) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--twx-accent) 35%, transparent); } /* content column: header card */ html [data-route="settings"] .bb-settings { min-width: 0; } html [data-route="settings"] .bb-settings > .mb-3 { padding: 18px 22px 0; margin-bottom: 14px; border: 1px solid var(--twx-border); border-top: 3px solid var(--twx-text-muted); border-radius: 14px; background: var(--twx-surface); box-shadow: var(--twx-shadow-1); } html [data-route="settings"] .bb-settings > .mb-3 > .mt-0\.5 { font-size: 14px !important; line-height: 1.5 !important; max-width: none !important; } html [data-route="settings"] .bb-settings .bb-btn { min-height: 38px; border-radius: 10px; } /* inner tabs: underline bar inside the header card */ html [data-route="settings"] .bb-set-tabs { gap: 4px !important; margin: 12px -22px 0 !important; padding: 0 14px; border-bottom: 0 !important; border-top: 1px solid var(--twx-border); } html [data-route="settings"] .bb-set-tabs > button { padding: 10px 12px !important; font-size: 14px !important; transition: color var(--twx-dur) var(--twx-ease); } html [data-route="settings"] .bb-set-tabs > button:hover { color: var(--twx-text) !important; } /* content cards */ html [data-route="settings"] [data-ui="tabpanel"] [data-ui="card"] { padding: 0; margin-bottom: 12px; border-radius: 14px; overflow: hidden; } html [data-route="settings"] .bb-sec-head { padding: 14px 20px; transition: background-color var(--twx-dur) var(--twx-ease); } html [data-route="settings"] .bb-sec-head:hover { background: var(--twx-surface-hover); } html [data-route="settings"] .bb-sec-head .font-medium { font-size: 15px; font-weight: 600; } html [data-route="settings"] .bb-sec-head[aria-expanded="true"] { border-bottom: 1px solid var(--twx-border); } html [data-route="settings"] [data-ui="tabpanel"] [data-ui="card"] > .px-4.pb-4 { padding: 16px 20px 20px; } html [data-route="settings"] [data-ui="tabpanel"] .text-xs { font-size: 13px; line-height: 1.55; } /* tidy form rows */ html [data-route="settings"] .bb-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), html [data-route="settings"] .bb-main select, html [data-route="settings"] .bb-main textarea { border-radius: 10px; min-height: 40px; padding-left: 12px; padding-right: 12px; } html [data-route="settings"] .bb-main textarea { padding-top: 10px; padding-bottom: 10px; line-height: 1.5; } html [data-route="settings"] .bb-main label { font-size: 13px; } html [data-route="settings"] .bb-main input[type="checkbox"], html [data-route="settings"] .bb-main input[type="radio"] { width: 18px; height: 18px; accent-color: var(--twx-accent); cursor: pointer; vertical-align: middle; } html [data-route="settings"] [data-ui="form-row"] { margin-bottom: 14px; } /* permission matrices */ html [data-route="settings"] [data-ui="table"] td:has(> input[type="checkbox"]), html [data-route="settings"] [data-ui="table"] td:has(> label > input[type="checkbox"]) { text-align: center; } html [data-route="settings"] [data-ui="table"] tbody td:first-child, html [data-route="settings"] [data-ui="table"] thead th:first-child { padding-left: 16px; } /* document design: the preview sits on a desk */ html [data-route="settings"][data-section="invoice"] .bb-main [style*="dashed"] { border-radius: 14px; background: var(--twx-surface-sunk) !important; padding: 20px !important; } /* ---- phones: compact, no sideways scroll --------------------------------------- */ @media (max-width: 640px) { html [data-route="reports"] .flex:has(> [data-ui="stat"]), html [data-route="activity"] .flex:has(> [data-ui="stat"]), html [data-route="approvals"] .flex:has(> [data-ui="stat"]) { grid-template-columns: 1fr 1fr; gap: 10px; } html [data-route="reports"] [data-ui="page-header"] + div > .flex.flex-wrap.items-center.gap-2 { display: flex; flex-wrap: wrap; } html [data-route="reports"] [data-ui="page-header"] + div > .flex.flex-wrap.items-center.gap-2 > .bb-btn { white-space: nowrap; padding: 8px 12px; } html [data-route="settings"] .bb-set-rail { position: static; } html [data-route="settings"] .tab-content > div > .flex.items-center.gap-2.flex-wrap.mb-4 > * { min-width: 0; max-width: 100%; } html [data-route="settings"] .tab-content > div > .flex.items-center.gap-2.flex-wrap.mb-4 input { width: 100% !important; } html [data-route="settings"] .bb-settings > .mb-3 { padding: 16px 16px 0; } html [data-route="settings"] .bb-set-tabs { margin: 12px -16px 0 !important; padding: 0 8px; overflow-x: auto; } html [data-route="settings"] .bb-sec-head { padding: 14px 16px; } html [data-route="settings"] [data-ui="tabpanel"] [data-ui="card"] > .px-4.pb-4 { padding: 14px 16px 16px; } html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg { padding: 14px; } html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg > .flex:first-child .flex.gap-2 { width: 100%; } html [data-route="approvals"] [data-ui="card"] > .p-3.mb-2.rounded-lg > .flex:first-child .flex.gap-2 .bb-btn { flex: 1; } } @media (min-width: 768px) { html [data-route="settings"] .bb-set-rail { width: 248px; flex-basis: 248px; } } }