/* ---- css/lx.css (scoped to .sim-lx; generated by tools/tour/build-tour-css.mjs — do not edit) ---- */ /* ============================================================================ LX — the single stylesheet for Tijara Retail ERP v2. One import manifest. Order matters: tokens, then reset, then everything that reads them. Brand override is last so a customer branch can win. Replaces: tijara-theme.css · site.css · portal-shell.css · portal-components.css · portal-analytics.css · owner-portal.css · platform-detail.css · shop.css · and the seven portal-theme-*.css files. ========================================================================== *//* ============================================================================ LX · TOKENS The only file in which a colour, a size or a duration is INVENTED. Every other file in this library references these and defines none of its own. Source of truth: MASTER_REBUILD_HANDOVER §6.2 (palette), §6.4 (type), §6.5 (density), §6.9 (shape, elevation, motion). RULE THAT GOVERNS THIS FILE: colour carries meaning or it does not appear. Deep teal is structure. Teal is action. Orange is the brand highlight. Red, amber and green are states. BRAND (QA, Oct 2026): the palette follows the Tijara logo (wwwroot/brand/tijara-logo.png) - deep teal wordmark #0A4F57, teal-green cart #0E7A6E, orange-to-amber swoosh #F47B20 → #FDB515. The token NAMES (--navy-*, --accent-*) are kept so no component or view had to change; only the values moved. The Online Store does not load this file. There is no decorative colour. If a screen needs a hue that is not here, the screen is doing too much - it is not this file that is short. ========================================================================== */ .sim-lx{ /* ── deep teal · the spine (logo wordmark) ──────────────────────────── */ --navy-950:#03262A; --navy-900:#063A40; --navy-800:#0A4F57; --navy-700:#0E5E63; --navy-600:#11756F; /* ── accent · action, and only action (logo cart teal) ───────────────── 600 carries white text at 5.9:1, so every filled button stays AA. */ --accent-700:#0A5A55; --accent-600:#0E6E68; --accent-500:#13857A; --accent-100:#CDEDE7; --accent-050:#ECF7F5; /* ── brand highlight · the logo swoosh. Marks and bars, never status ── */ --brand-orange:#F47B20; --brand-orange-600:#E2650D; --brand-amber:#FDB515; --brand-orange-050:#FFF4EA; /* translucent tints of --brand-orange (F47B20 = 244,123,32) at the alphas the sign-in pages use for glows, tick badges and their borders */ --brand-orange-18:rgba(244,123,32,.18); --brand-orange-30:rgba(244,123,32,.30); --brand-orange-45:rgba(244,123,32,.45); --brand-gradient:linear-gradient(135deg,#F47B20 0%,#FDB515 100%); --portal-marker:var(--brand-orange); /* ── neutrals ──────────────────────────────────────────────────────── */ --canvas:#F5F7FA; --surface:#FFFFFF; --surface-2:#F1F4F8; --line:#E4E9F0; --line-soft:#EFF2F6; --line-hard:#CBD5E1; --text-1:#0B2A2E; --text-2:#475569; --text-3:#8A97A8; --on-dark:#FFFFFF; --on-dark-2:#A9C9C9; --on-dark-3:#6F9A9C; --on-dark-4:#CDE4E3; /* ink that sits ON a filled control - not the same idea as --surface */ --on-fill:#FFFFFF; /* disabled primary: still 4.5:1 readable, never invisible */ --fill-off:#93C2BC; --on-fill-off:#F4FAF9; --success-bright:#5FD3A6; /* ── semantic · status only, never decoration ──────────────────────── */ --success:#0E9F6E; --success-wash:#E6F6F0; --success-ink:#05684A; --warning:#B45309; --warning-wash:#FEF3C7; --warning-ink:#8A4308; --danger:#DC2626; --danger-wash:#FEE2E2; --danger-ink:#A81C1C; --danger-deep:#B91C1C; --danger-wash-2:#FDD3D3; --info:#0369A1; --info-wash:#E0F2FE; --info-ink:#075985; /* ── charts · assigned in order, never by meaning ──────────────────── */ --c1:#0E6E68; --c2:#F47B20; --c3:#2563EB; --c4:#7C3AED; --c5:#CA8A04; --c6:#BE185D; /* ── shape ─────────────────────────────────────────────────────────── */ --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-full:999px; /* ── elevation · nothing deeper than these three ───────────────────── */ --sh-1:0 1px 2px rgba(6,58,64,.04), 0 1px 3px rgba(6,58,64,.06); --sh-2:0 4px 16px rgba(6,58,64,.08); --sh-3:0 12px 32px rgba(6,58,64,.14); /* ── space · 4px grid, no value off it ─────────────────────────────── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; /* ── motion · 120 hover, 200 panel, 240 modal. Nothing longer. ─────── */ --t-fast:120ms; --t-mid:200ms; --t-slow:240ms; --ease:cubic-bezier(.2,0,.2,1); /* ── structure ─────────────────────────────────────────────────────── */ --side-w:248px; --top-h:56px; --content-max:1560px; /* ── type · self-hosted only. No external font request, ever. ──────── */ --font:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-ar:'IBM Plex Sans Arabic','Inter',sans-serif; --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace; /* ── density · overridden by density.css. Console is the default. ──── */ --d-base:14px; --d-line:20px; --d-row:44px; --d-target:38px; --d-pad:24px; --d-field:40px; /* ── chart renderer bridge ────────────────────────────────────────── wwwroot/js/portal-charts.js resolves its series and axis colours with getComputedStyle(document.body).getPropertyValue('--p-primary') and nine siblings. Those names came from the seven portal-theme-*.css files, which are deleted. Without this block every chart silently falls back to the hard-coded literals inside the script - the OLD saturated palette - and a dashboard would show a green series next to a green status badge, which is exactly the rule §6.2 exists to prevent. These are ALIASES, not new colours. Nothing is invented here; each one points at a token above, so the chart follows the palette and this file remains the only place a colour is decided. They are declared last so it is obvious they are a bridge and can be deleted the day the renderer is rewritten to read LX names directly. ──────────────────────────────────────────────────────────────────── */ --p-primary:var(--accent-600); --p-primary-soft:var(--accent-050); --p-success:var(--success); --p-warn:var(--warning); --p-danger:var(--danger); --p-info:var(--info); --p-accent:var(--c4); --p-ink:var(--navy-900); --p-muted:var(--text-3); --p-line:var(--line); } /* ============================================================================ LX · RESET Only what the library actually relies on. Not a normalise. ========================================================================== */ .sim-lx *,.sim-lx *::before,.sim-lx *::after{box-sizing:border-box} .sim-lx,.sim-lx{margin:0;padding:0} .sim-lx{ font-family:var(--font); font-size:var(--d-base); line-height:var(--d-line); color:var(--text-1); background:var(--canvas); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .sim-lx h1,.sim-lx h2,.sim-lx h3,.sim-lx h4,.sim-lx h5,.sim-lx h6,.sim-lx p,.sim-lx ul,.sim-lx ol,.sim-lx figure,.sim-lx dl,.sim-lx dd{margin:0} .sim-lx ul,.sim-lx ol{padding:0;list-style:none} .sim-lx a{color:var(--accent-600);text-decoration:none} .sim-lx a:hover{text-decoration:underline} .sim-lx button,.sim-lx input,.sim-lx select,.sim-lx textarea{font-family:inherit;font-size:inherit;color:inherit} .sim-lx button{background:none;border:0;padding:0;cursor:pointer} .sim-lx table{border-collapse:collapse;width:100%} .sim-lx img,.sim-lx svg,.sim-lx video{max-width:100%} .sim-lx hr{border:0;border-top:1px solid var(--line);margin:var(--s4) 0} .sim-lx [hidden]{display:none!important} /* Keyboard focus is never removed. A warehouse user on a keyboard cannot see where they are without it. Any rule that sets outline:none replaces it. */ .sim-lx :focus-visible{outline:2px solid var(--accent-500);outline-offset:2px;border-radius:2px} @media (prefers-reduced-motion:reduce){ .sim-lx *,.sim-lx *::before,.sim-lx *::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ============================================================================ LX · TYPOGRAPHY Inter for everything readable · IBM Plex Sans Arabic for Arabic · JetBrains Mono for codes, timestamps and SKUs. All self-hosted. tabular-nums is applied to every money, quantity, count and percentage. A column of dirhams whose decimal points do not line up is a defect. ========================================================================== */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('/lib/fonts/inter/Inter-Regular.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('/lib/fonts/inter/Inter-Medium.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('/lib/fonts/inter/Inter-SemiBold.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('/lib/fonts/inter/Inter-Bold.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap; src:url('/lib/fonts/jetbrains/JetBrainsMono-Regular.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap; src:url('/lib/fonts/jetbrains/JetBrainsMono-Medium.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap; src:url('/lib/fonts/plex-ar/IBMPlexSansArabic-Regular.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap; src:url('/lib/fonts/plex-ar/IBMPlexSansArabic-SemiBold.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap; src:url('/lib/fonts/plex-ar/IBMPlexSansArabic-Bold.woff2') format('woff2')} .sim-lx[lang="ar"] body,.sim-lx[dir="rtl"] body{font-family:var(--font-ar)} .sim-lx .display{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.02em} .sim-lx h1,.sim-lx .h1{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em} .sim-lx h2,.sim-lx .h2{font-size:18px;line-height:24px;font-weight:600} .sim-lx h3,.sim-lx .h3{font-size:15px;line-height:20px;font-weight:600} .sim-lx .body-sm{font-size:13px;line-height:18px} .sim-lx .label{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3)} .sim-lx .mono{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.01em} .sim-lx .muted{color:var(--text-3)} .sim-lx .dim{color:var(--text-2)} .sim-lx .strong{color:var(--text-1);font-weight:600} /* Every number that is read as a number. */ .sim-lx .tabular,.sim-lx .num,.sim-lx .money,.sim-lx .qty,.sim-lx .pct,.sim-lx .metric-val,.sim-lx .ledger .v,.sim-lx td.num,.sim-lx th.num,.sim-lx input[type=number]{font-variant-numeric:tabular-nums} .sim-lx .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sim-lx .nowrap{white-space:nowrap} .sim-lx .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Free-text a person typed - keep their line breaks, use the reading face. */ .sim-lx .pre-wrap{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:19px; color:var(--text-2);margin:0} /* ============================================================================ LX · DENSITY — three modes, ONE system Same tokens, same components. Only the six density variables change. Console is the default and lives in _tokens.css. Console desk, all day, wants density 14px · 44px row · 38px target Counter arm's length, fluorescent, a queue 18px · 48px row · 56px target Field one thumb, moving, sometimes gloved 16px · 56px row · 64px target ========================================================================== */ .sim-lx .d-console{--d-base:14px;--d-line:20px;--d-row:44px;--d-target:38px;--d-pad:24px;--d-field:40px} .sim-lx .d-counter{--d-base:18px;--d-line:26px;--d-row:48px;--d-target:56px;--d-pad:20px;--d-field:52px} .sim-lx .d-field {--d-base:16px;--d-line:24px;--d-row:56px;--d-target:64px;--d-pad:16px;--d-field:56px} .sim-lx .d-console,.sim-lx .d-counter,.sim-lx .d-field{font-size:var(--d-base);line-height:var(--d-line)} /* Components read the density variables rather than fixed pixels. */ .sim-lx .d-counter .btn,.sim-lx .d-field .btn{height:var(--d-target);font-size:calc(var(--d-base) - 1px); padding:0 20px;border-radius:var(--r-md)} .sim-lx .d-counter .tbl tbody td,.sim-lx .d-field .tbl tbody td{height:var(--d-row); font-size:var(--d-base)} .sim-lx .d-counter .f input,.sim-lx .d-counter .f select,.sim-lx .d-counter .f textarea,.sim-lx .d-field .f input,.sim-lx .d-field .f select,.sim-lx .d-field .f textarea{ height:var(--d-field);font-size:var(--d-base)} .sim-lx .d-field .card{border-radius:var(--r-xl)} /* Console offers a persisted user toggle: compact / default / comfortable. */ .sim-lx .d-console.rows-compact {--d-row:40px} .sim-lx .d-console.rows-default {--d-row:44px} .sim-lx .d-console.rows-comfortable{--d-row:52px} /* Minimum tap target on any touch surface is 44x44. Never shrink the target - add an invisible hit area instead. */ .sim-lx .d-counter .icon-btn,.sim-lx .d-field .icon-btn{width:var(--d-target);height:var(--d-target)} .sim-lx .hit::after{content:"";position:absolute;inset:50% 50%; width:44px;height:44px;transform:translate(-50%,-50%)} /* ============================================================================ LX · SHELL — STRUCTURE ONLY Sidebar · top bar · page header · content well. This file contains NO COLOUR DECISIONS. It reads --side-*, --top-* and --nav-* and never sets a hex value. theme-light.css and theme-deep.css are the only two files that give those variables a value. That separation is the whole reason a retheme is a values change and not a rewrite - it is the token contract from the v1 portal-shell.css, kept. ========================================================================== */ .sim-lx .lx-wrap{display:flex;align-items:flex-start;min-height:100vh} /* ── SIDEBAR ──────────────────────────────────────────────────────────── */ .sim-lx .lx-side{ width:var(--side-w);flex:0 0 var(--side-w); background:var(--side-bg);border-inline-end:1px solid var(--side-line); position:sticky;top:0;height:100vh;overflow-y:auto; display:flex;flex-direction:column} .sim-lx .lx-brand{padding:16px 16px 14px;border-bottom:1px solid var(--side-line); display:flex;gap:10px;align-items:center} .sim-lx .lx-brand .mark{width:32px;height:32px;border-radius:8px;flex:0 0 32px; background:var(--brand-mark-bg);color:var(--brand-mark-ink); display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:-.02em; overflow:hidden} .sim-lx .lx-brand .mark img{width:100%;height:100%;object-fit:contain} .sim-lx .lx-brand .co{font-size:14px;font-weight:700;line-height:17px;color:var(--side-ink-1)} .sim-lx .lx-brand .portal{font-size:10px;font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:var(--side-ink-3);margin-top:2px} .sim-lx .lx-nav{padding:8px 10px 24px;flex:1} .sim-lx .lx-nav .sec{font-size:10px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--side-ink-3);padding:16px 8px 6px} .sim-lx .lx-nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px; border-radius:8px;color:var(--side-ink-2);font-size:13.5px;font-weight:500; position:relative;text-decoration:none} .sim-lx .lx-nav a:hover{background:var(--side-hover);color:var(--side-ink-1);text-decoration:none} .sim-lx .lx-nav a.on{background:var(--side-on-bg);color:var(--side-on-ink);font-weight:600} .sim-lx .lx-nav a.on::before{content:"";position:absolute;inset-inline-start:-10px;top:7px; bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--side-on-bar)} .sim-lx .lx-nav a svg,.sim-lx .lx-nav a .ic{width:18px;height:18px;flex:0 0 18px;opacity:.85} .sim-lx .lx-nav a .cnt{margin-inline-start:auto;font-size:11px;font-weight:700; padding:1px 7px;border-radius:var(--r-full); background:var(--side-cnt-bg);color:var(--side-cnt-ink)} .sim-lx .lx-nav a .cnt.hot{background:var(--side-cnt-hot-bg);color:var(--side-cnt-hot-ink)} .sim-lx .lx-user{border-top:1px solid var(--side-line);padding:10px 12px;display:flex; gap:10px;align-items:center;margin-top:auto;color:var(--side-ink-1)} .sim-lx .lx-user .nm{font-size:13px;font-weight:600;color:var(--side-ink-1)} .sim-lx .lx-user .rl{font-size:11.5px;color:var(--side-ink-3)} .sim-lx .lx-user .who{min-width:0;flex:1} /* ── MAIN + TOP BAR ───────────────────────────────────────────────────── */ .sim-lx .lx-main{flex:1;min-width:0} .sim-lx .lx-top{height:var(--top-h);background:var(--surface); border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px; padding:0 20px;position:sticky;top:0;z-index:20} .sim-lx .lx-top .marker{width:3px;height:22px;border-radius:2px;background:var(--portal-marker)} .sim-lx .lx-top .grow{flex:1} .sim-lx .crumb{font-size:13px;color:var(--text-3);display:flex;gap:7px;align-items:center} .sim-lx .crumb b{color:var(--text-1);font-weight:600} .sim-lx .crumb .sep{opacity:.5} .sim-lx .lx-search{height:34px;width:260px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-2);padding:0 12px;font-size:13px;color:var(--text-2); display:flex;align-items:center;gap:8px} .sim-lx .lx-search input{border:0;background:transparent;outline:none;width:100%;font-size:13px} .sim-lx .lx-content{padding:var(--d-pad);max-width:var(--content-max)} /* ── SIDEBAR TOGGLE · below 960px the rail becomes a drawer ───────────── */ .sim-lx .lx-burger{display:none} @media(max-width:960px){ .sim-lx .lx-side{position:fixed;z-index:60;inset-inline-start:0;top:0; transform:translateX(-100%);transition:transform var(--t-mid) var(--ease)} .sim-lx[dir="rtl"] .lx-side{transform:translateX(100%)} .sim-lx .lx-side.open{transform:translateX(0)} .sim-lx .lx-burger{display:grid} .sim-lx .lx-scrim{position:fixed;inset:0;background:rgba(3,38,42,.45);z-index:55} .sim-lx .lx-search{display:none} } /* ── PAGE HEADER ──────────────────────────────────────────────────────── */ .sim-lx .page-head{margin-bottom:20px} .sim-lx .page-head .eyebrow{font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3);margin-bottom:6px} .sim-lx .page-head .row{display:flex;align-items:flex-start;gap:16px} .sim-lx .page-head h1{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em} .sim-lx .page-head .sub{font-size:14px;color:var(--text-2);margin-top:4px} .sim-lx .page-head .acts{margin-inline-start:auto;display:flex;gap:8px;flex-shrink:0} .sim-lx .page-head hr{border:0;border-top:1px solid var(--line);margin:16px 0 0} @media(max-width:720px){ .sim-lx .page-head .row{flex-direction:column} .sim-lx .page-head .acts{margin-inline-start:0;width:100%;flex-wrap:wrap} } /* ── AUTH SHELL · moved to lx/auth.css (sign-in redesign, Oct 2026) ── */ /* Sign-out sits in the identity block, not as a nav item - it is not a place you go. The icon button carries an aria-label and a tooltip. */ .sim-lx .lx-user form{margin-inline-start:auto;display:flex} .sim-lx .lx-user .icon-btn{color:var(--side-ink-3)} .sim-lx .lx-user .icon-btn:hover{background:var(--side-hover);color:var(--side-ink-1)} /* Password reveal sits inside the field, never beside it. */ .sim-lx .pw{position:relative} .sim-lx .pw input{padding-inline-end:44px} .sim-lx .pw .rev{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%); width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center; color:var(--text-3);background:none;border:0;cursor:pointer} .sim-lx .pw .rev:hover{background:var(--surface-2);color:var(--text-1)} /* ============================================================================ LX · LIGHT SHELL Head Office · Branch · Delivery Manager · Marketing · Warehouse. Eight hours a day. A dark rail beside white tables is the single biggest source of eye fatigue in an ERP, so the operational portals get this one. Values only - no structure lives here. ========================================================================== */ .sim-lx .lx-side{ --side-bg:var(--surface); --side-line:var(--line); --side-ink-1:var(--text-1); --side-ink-2:var(--text-2); --side-ink-3:var(--text-3); --side-hover:var(--surface-2); --side-on-bg:var(--accent-050); --side-on-ink:var(--accent-600); --side-on-bar:var(--brand-orange); --side-cnt-bg:var(--surface-2); --side-cnt-ink:var(--text-2); --side-cnt-hot-bg:var(--danger-wash); --side-cnt-hot-ink:var(--danger-ink); --brand-mark-bg:var(--navy-900); --brand-mark-ink:var(--on-fill); } /* ============================================================================ LX · DEEP SHELL Owner and Tijara Admin. Short sessions, oversight, reads as a console. Values only - identical structure to the light shell. ========================================================================== */ .sim-lx .lx-side.deep{ --side-bg:var(--navy-950); --side-line:rgba(255,255,255,.09); --side-ink-1:var(--on-fill); --side-ink-2:var(--on-dark-2); --side-ink-3:var(--on-dark-3); --side-hover:rgba(255,255,255,.06); --side-on-bg:rgba(255,255,255,.09); --side-on-ink:var(--on-fill); --side-on-bar:var(--brand-orange); --side-cnt-bg:rgba(255,255,255,.12); --side-cnt-ink:var(--on-dark-4); --side-cnt-hot-bg:var(--danger); --side-cnt-hot-ink:var(--on-fill); --brand-mark-bg:rgba(255,255,255,.12); --brand-mark-ink:var(--on-fill); } .sim-lx .lx-side.deep .avatar{background:rgba(255,255,255,.14);color:var(--on-fill)} /* ============================================================================ LX · AUTH — sign-in, platform sign-in, access denied, error pages. QA redesign, Oct 2026. Reads tokens only; no colour is invented here. Brand panel (inline-start): deep-teal ground from the logo, two soft glows (teal and the logo's orange), a fine dot texture, the logo on a white badge. Form (inline-end): one raised card. Below 1080px the brand panel collapses into a header band instead of disappearing. ========================================================================== */ .sim-lx .auth-body{background:var(--canvas)} .sim-lx .auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} /* ── brand panel ─────────────────────────────────────────────────────────── */ .sim-lx .auth-brand{position:relative;overflow:hidden;color:var(--on-fill); padding:44px 56px;display:flex;flex-direction:column;gap:32px; background: radial-gradient(560px 420px at 92% 6%, var(--brand-orange-30), transparent 60%), radial-gradient(640px 520px at -8% 104%, rgba(19,133,122,.55), transparent 62%), linear-gradient(158deg, var(--navy-950) 0%, var(--navy-900) 48%, var(--navy-800) 100%)} .sim-lx .auth-brand::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%); mask-image:linear-gradient(180deg,#000 0%,transparent 85%)} .sim-lx .auth-brand::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px; background:var(--brand-gradient)} .sim-lx .auth-brand > *{position:relative} .sim-lx .auth-logo{display:inline-flex;align-items:center;background:var(--surface); border-radius:16px;padding:10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25)} .sim-lx .auth-logo img{height:52px;width:auto;display:block} .sim-lx .auth-brand-mid{margin-block:auto;max-width:520px} .sim-lx .auth-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--brand-amber)} .sim-lx .auth-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--brand-gradient)} .sim-lx .auth-brand .display{color:var(--on-fill);font-size:40px;line-height:46px;font-weight:800; letter-spacing:-.02em;margin-top:14px;max-width:18ch} .sim-lx .auth-brand .auth-note{color:var(--on-dark-2);font-size:15px;line-height:24px;max-width:44ch;margin-top:16px} .sim-lx .auth-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px} .sim-lx .auth-points li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--on-dark-4)} .sim-lx .auth-points .tick{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center; background:var(--brand-orange-18);color:var(--brand-amber);border:1px solid var(--brand-orange-45)} .sim-lx .auth-brand-foot{display:flex;align-items:center;justify-content:space-between;gap:12px; font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3)} .sim-lx .auth-ar{font-family:var(--font-ar);font-size:18px;letter-spacing:0;text-transform:none;color:var(--brand-orange)} /* ── form side ───────────────────────────────────────────────────────────── */ .sim-lx .auth-form{display:grid;place-items:center;padding:40px 28px; background: radial-gradient(520px 360px at 100% 0%, var(--accent-050), transparent 70%), var(--canvas)} .sim-lx .auth-form .inner{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line); border-radius:20px;box-shadow:0 1px 2px rgba(6,58,64,.04), 0 24px 48px -18px rgba(6,58,64,.22); padding:40px 40px 32px} .sim-lx .auth-form .inner > .alert{margin-bottom:18px} .sim-lx .auth-form h1{font-size:28px;line-height:34px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;color:var(--text-1)} .sim-lx .auth-form .lead{color:var(--text-2);font-size:14.5px;margin-bottom:26px} .sim-lx .auth-form .f{margin-bottom:18px} .sim-lx .auth-form .f label{font-size:12px;font-weight:700;letter-spacing:.06em} .sim-lx .auth-form .f input{height:52px;font-size:15px;border-radius:12px;background:var(--surface)} .sim-lx .auth-form .btn-xl{width:100%;height:54px;border-radius:12px;font-size:15.5px;font-weight:700;margin-top:6px;gap:10px} .sim-lx .auth-form .btn-xl:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(14,110,104,.65)} .sim-lx .auth-form .btn-xl:active{transform:none} .sim-lx .auth-form .note{border-radius:12px} .sim-lx .auth-mobile-logo{display:none} /* Inputs with a leading icon. The icon is decoration; the label is the name. */ .sim-lx .ifield{position:relative} .sim-lx .ifield > .ico{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%); color:var(--text-3);pointer-events:none;display:grid} /* Specific enough to beat .f input in components/field.css, which loads later. */ .sim-lx .auth-form .f .ifield > input{padding-inline-start:44px} .sim-lx .auth-form .f .pw > input{padding-inline-end:48px} .sim-lx .ifield:focus-within > .ico{color:var(--accent-600)} .sim-lx .auth-divider{display:flex;align-items:center;gap:12px;margin:24px 0 16px; font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)} .sim-lx .auth-divider::before,.sim-lx .auth-divider::after{content:"";flex:1;height:1px;background:var(--line)} .sim-lx .auth-demo{border:1px dashed var(--accent-100);background:var(--accent-050);border-radius:12px; padding:12px 14px;font-size:13px;line-height:21px;color:var(--text-2)} .sim-lx .auth-demo b{color:var(--text-1)} .sim-lx .auth-demo code{font-family:var(--mono);font-size:12px;background:var(--surface);border:1px solid var(--accent-100); border-radius:6px;padding:1px 6px;color:var(--accent-700)} .sim-lx .auth-help{margin-top:16px;font-size:13px;line-height:21px;color:var(--text-2)} .sim-lx .auth-help a{font-weight:600} .sim-lx .auth-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:12px; color:var(--text-3);display:flex;flex-wrap:wrap;gap:10px;align-items:center} .sim-lx .auth-lang{margin-inline-start:auto} /* ── narrow: the brand panel becomes a header band ───────────────────────── */ @media(max-width:1080px){ .sim-lx .auth{grid-template-columns:1fr;grid-template-rows:auto 1fr} .sim-lx .auth-brand{padding:20px 24px 24px;gap:14px} .sim-lx .auth-brand::after{inset:auto 0 0 0;width:auto;height:3px} .sim-lx .auth-brand-mid{margin:0} .sim-lx .auth-brand .display{font-size:24px;line-height:30px;margin-top:8px;max-width:none} .sim-lx .auth-brand .auth-note,.sim-lx .auth-points,.sim-lx .auth-brand-foot,.sim-lx .auth-kicker{display:none} .sim-lx .auth-logo{padding:8px 12px;border-radius:12px} .sim-lx .auth-logo img{height:38px} .sim-lx .auth-form{place-items:start center;padding:24px 16px 40px} .sim-lx .auth-form .inner{margin-top:-6px} } @media(max-width:520px){ .sim-lx .auth-form .inner{padding:28px 20px 22px;border-radius:16px} .sim-lx .auth-form h1{font-size:24px;line-height:30px} } /* ── BUTTON · the full contract (§6.6) ─────────────────────────────────── Seven variants, five sizes, seven states. Order is [Secondary] [Primary], primary at the inline-end. One primary per screen region. Two primaries means the design has not decided. ────────────────────────────────────────────────────────────────────── */ .sim-lx .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; height:var(--d-target);padding:0 16px;border-radius:var(--r-md); font-size:14px;line-height:20px;font-weight:600;border:1px solid transparent; cursor:pointer;white-space:nowrap;background:transparent;color:var(--text-2); transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .sim-lx .btn:hover{text-decoration:none} .sim-lx .btn:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px} .sim-lx .btn svg{width:16px;height:16px;flex:0 0 16px} .sim-lx .btn-primary{background:var(--accent-600);color:var(--on-fill);box-shadow:var(--sh-1)} .sim-lx .btn-primary:hover{background:var(--accent-500);color:var(--on-fill)} .sim-lx .btn-primary:active{background:var(--accent-700)} .sim-lx .btn-secondary{background:var(--surface);color:var(--navy-900);border-color:var(--line-hard)} .sim-lx .btn-secondary:hover{background:var(--surface-2);color:var(--navy-900)} .sim-lx .btn-tertiary{color:var(--text-2)} .sim-lx .btn-tertiary:hover{background:var(--surface-2);color:var(--text-1)} .sim-lx .btn-danger{background:var(--danger);color:var(--on-fill)} .sim-lx .btn-danger:hover{background:var(--danger-deep);color:var(--on-fill)} .sim-lx .btn-danger-ghost{color:var(--danger);border-color:rgba(220,38,38,.32)} .sim-lx .btn-danger-ghost:hover{background:var(--danger-wash);color:var(--danger-ink)} .sim-lx .btn-link{color:var(--accent-600);padding:0;height:auto} .sim-lx .btn-link:hover{text-decoration:underline} .sim-lx .btn-on-dark{background:rgba(255,255,255,.14);color:var(--on-fill);border-color:rgba(255,255,255,.2)} .sim-lx .btn-on-dark:hover{background:rgba(255,255,255,.22);color:var(--on-fill)} /* Disabled must still be readable - 4.5:1 minimum. */ .sim-lx .btn[disabled],.sim-lx .btn.is-disabled{background:var(--fill-off);color:var(--on-fill-off);box-shadow:none; cursor:not-allowed;border-color:transparent} .sim-lx .btn-secondary[disabled],.sim-lx .btn-tertiary[disabled]{background:var(--surface-2); color:var(--text-3);border-color:var(--line)} /* Loading keeps the button's width - measured before the label is swapped. */ .sim-lx .btn.is-loading{position:relative;color:transparent!important;pointer-events:none} .sim-lx .btn.is-loading::after{content:"";position:absolute;width:15px;height:15px; border:2px solid currentColor;border-top-color:transparent;border-radius:50%; color:var(--on-fill);animation:lx-spin .6s linear infinite} .sim-lx .btn-secondary.is-loading::after,.sim-lx .btn-tertiary.is-loading::after{color:var(--text-2)} @keyframes lx-spin{to{transform:rotate(360deg)}} .sim-lx .btn-xs{height:28px;padding:0 10px;font-size:12px;line-height:16px;border-radius:var(--r-sm)} .sim-lx .btn-xs svg{width:14px;height:14px;flex:0 0 14px} .sim-lx .btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px} .sim-lx .btn-md{height:38px} .sim-lx .btn-lg{height:44px;padding:0 20px;font-size:15px} .sim-lx .btn-xl{height:52px;padding:0 24px;font-size:16px} .sim-lx .btn-block{width:100%} .sim-lx .btn-icon{width:var(--d-target);padding:0} .sim-lx .icon-btn{width:34px;height:34px;border-radius:var(--r-md);border:1px solid transparent; background:transparent;display:grid;place-items:center;color:var(--text-2); cursor:pointer;position:relative} .sim-lx .icon-btn:hover{background:var(--surface-2)} .sim-lx .icon-btn:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px} .sim-lx .icon-btn .dot{position:absolute;top:6px;inset-inline-end:6px;width:7px;height:7px; border-radius:50%;background:var(--danger);border:1.5px solid var(--surface)} /* ── CARD ─────────────────────────────────────────────────────────────── */ .sim-lx .card{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-1)} .sim-lx .card-h{padding:14px 16px;border-bottom:1px solid var(--line-soft); display:flex;align-items:center;gap:12px} .sim-lx .card-h h2{font-size:15px;line-height:20px;font-weight:600} .sim-lx .card-h .sub{font-size:12.5px;color:var(--text-3);margin-top:1px} .sim-lx .card-h .acts{margin-inline-start:auto;display:flex;gap:6px;align-items:center} .sim-lx .card-b{padding:16px} .sim-lx .card-b.flush{padding:0} .sim-lx .card-f{padding:12px 16px;border-top:1px solid var(--line-soft); font-size:13px;color:var(--text-3)} .sim-lx .grid{display:grid;gap:16px} .sim-lx .g5{grid-template-columns:repeat(5,1fr)} .sim-lx .g4{grid-template-columns:repeat(4,1fr)} .sim-lx .g3{grid-template-columns:repeat(3,1fr)} .sim-lx .g2{grid-template-columns:repeat(2,1fr)} .sim-lx .g-2-1{grid-template-columns:2fr 1fr} .sim-lx .g-1-2{grid-template-columns:1fr 2fr} @media(max-width:1180px){ .sim-lx .g5,.sim-lx .g4{grid-template-columns:repeat(2,1fr)} .sim-lx .g-2-1,.sim-lx .g-1-2,.sim-lx .g3{grid-template-columns:1fr}} @media(max-width:720px){.sim-lx .g5,.sim-lx .g4,.sim-lx .g2{grid-template-columns:1fr}} .sim-lx .note{border:1px solid var(--line);border-inline-start:3px solid var(--accent-600); background:var(--accent-050);border-radius:var(--r-md);padding:12px 14px; font-size:13px;color:var(--text-2)} .sim-lx .note b{color:var(--text-1)} .sim-lx .note.warn{border-inline-start-color:var(--warning);background:var(--warning-wash)} .sim-lx .note.bad{border-inline-start-color:var(--danger);background:var(--danger-wash)} .sim-lx .note.ok{border-inline-start-color:var(--success);background:var(--success-wash)} /* A single-column form does not want the full content width - a 60ch line is unreadable as a field label row. */ .sim-lx .form-narrow{max-width:680px} .sim-lx .form-narrow.wide{max-width:920px} /* Product image strip and gallery. */ .sim-lx .img-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .sim-lx .img-thumb{width:70px;height:70px;object-fit:cover;border-radius:8px; border:1px solid var(--line)} .sim-lx .img-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; background:var(--surface)} .sim-lx .img-card.is-primary{border-color:var(--accent-600);box-shadow:0 0 0 2px var(--accent-100)} .sim-lx .img-card img{width:100%;height:120px;object-fit:cover;display:block} .sim-lx .img-acts{padding:8px;display:flex;gap:6px;align-items:center;justify-content:center; flex-wrap:wrap;border-top:1px solid var(--line-soft)} /* ── TILE · a card that is itself a link ───────────────────────────────── The report indexes, the owner's section jumps and the admin console entry points are all the same shape: an icon, a name, a sentence explaining what you get, and a go affordance. One block, used by all of them, so a report list cannot drift between the Head Office and the Branch portals. ────────────────────────────────────────────────────────────────────── */ .sim-lx .tile{display:flex;flex-direction:column;gap:6px;padding:18px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1);height:100%;color:var(--text-2)} .sim-lx .tile:hover{border-color:var(--accent-600);box-shadow:var(--sh-2);text-decoration:none} .sim-lx .tile .ic{width:36px;height:36px;border-radius:var(--r-md);background:var(--accent-050); color:var(--accent-600);display:flex;align-items:center;justify-content:center; margin-bottom:6px} .sim-lx .tile .ic svg{width:19px;height:19px} .sim-lx .tile h3{font-size:15px;line-height:20px;font-weight:600;color:var(--text-1)} .sim-lx .tile p{font-size:13px;line-height:19px;color:var(--text-2);flex:1} .sim-lx .tile .go{font-size:12.5px;font-weight:600;color:var(--accent-600); display:inline-flex;align-items:center;gap:5px;margin-top:4px} .sim-lx .tile .go svg{width:14px;height:14px} .sim-lx .tile.off{opacity:.62} .sim-lx .tile.off:hover{border-color:var(--line);box-shadow:var(--sh-1)} /* Section rule between groups of cards on a long index page. */ .sim-lx .sec{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px} .sim-lx .sec h2{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--text-3)} .sim-lx .sec .sub{font-size:12.5px;color:var(--text-3)} .sim-lx .sec::after{content:"";flex:1;height:1px;background:var(--line)} .sim-lx .sec:first-child{margin-top:0} /* ── DRIVER LOAD STRIP · "who can I send" ──────────────────────────────── The board is close to useless without this, and the old screen answered it only inside a per-card dropdown, one order at a time. A dispatcher holding a packed bag wants the whole roster at a glance. ────────────────────────────────────────────────────────────────────── */ .sim-lx .rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;margin-bottom:16px} .sim-lx .rail .drv{flex:0 0 auto;min-width:186px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px; display:flex;gap:10px;align-items:center;box-shadow:var(--sh-1)} .sim-lx .rail .drv .nm{font-weight:600;font-size:13px;line-height:16px;color:var(--text-1)} .sim-lx .rail .drv .st{font-size:11px;color:var(--text-2);display:flex;align-items:center;gap:5px;margin-top:1px} .sim-lx .rail .drv .load{margin-inline-start:auto;text-align:end} .sim-lx .rail .drv .load b{font-size:16px;font-variant-numeric:tabular-nums;display:block;line-height:18px} .sim-lx .rail .drv .load span{font-size:10px;color:var(--text-3)} .sim-lx .rail .drv.off{opacity:.66} /* The state dot. Green out, amber at the branch, grey off shift — three real states read from dbo.DeliveryBoyShifts, not three decorations. */ .sim-lx .sdot{width:7px;height:7px;border-radius:50%;background:var(--text-3);flex:0 0 7px} .sim-lx .sdot.on{background:var(--success)} .sim-lx .sdot.idle{background:var(--warning)} .sim-lx .sdot.off{background:var(--line-hard)} /* ── LANE HEADER FOOT · the count line under a lane's title ──────────── */ .sim-lx .lane .foot{font-size:11px;color:var(--text-2);margin-top:4px;font-variant-numeric:tabular-nums} .sim-lx .lane > .card-h .cnt{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums; background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full); padding:0 8px;margin-inline-start:auto} /* ── DROP CARD EXTRAS · channel tag, meta row, age chip ──────────────── */ .sim-lx .drop.late{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger-wash)} .sim-lx .drop .c-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .sim-lx .drop .chan{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--text-3)} /* Two lines of address and then an ellipsis. A dispatcher scans; a fourth line of "behind the Lulu Hypermarket" pushes the money off the card. */ .sim-lx .drop .where.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sim-lx .drop .meta{display:flex;gap:14px;margin-top:10px;padding-top:10px; border-top:1px solid var(--line-soft)} .sim-lx .drop .meta > div{min-width:0} .sim-lx .drop .meta .k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--text-3)} .sim-lx .drop .meta .v{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:1px; color:var(--text-1)} /* Cash that has NOT been collected. One of exactly two things red means here. */ .sim-lx .drop .meta .v.cod{color:var(--danger);font-size:15px} .sim-lx .drop .c-act{margin-top:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .sim-lx .drop .age{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-3); margin-inline-start:auto;display:flex;align-items:center;gap:4px} .sim-lx .drop .age.hot{color:var(--danger-ink);font-weight:600} /* ── PICK LINE · one row of a pick list, on a phone in an aisle ────────── Field density in a console shell: the picker is walking, holding a trolley, and the three choices per line (in full / short / substitute) must be thumb-sized without turning the list into a scroll marathon. ────────────────────────────────────────────────────────────────────── */ .sim-lx .pick-line{border:1px solid var(--line);border-radius:var(--r-md);padding:12px; background:var(--surface);margin-bottom:10px} .sim-lx .pick-line.done{border-color:var(--success);background:var(--success-wash)} .sim-lx .pick-line.short{border-color:var(--warning);background:var(--warning-wash)} .sim-lx .pick-line .nm{font-size:14.5px;font-weight:600;color:var(--text-1)} .sim-lx .pick-line .sub{font-size:12px;color:var(--text-2);margin-top:2px} .sim-lx .pick-line .qty{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums; color:var(--text-1);white-space:nowrap} .sim-lx .pick-line .choices{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .sim-lx .pick-line .choices .btn{min-height:40px} .sim-lx .pick-line .panel{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)} .sim-lx .pick-line .panel[hidden]{display:none} .sim-lx .pick-line .swapped{font-size:12px;color:var(--warning-ink);background:var(--warning-wash); border-radius:var(--r-sm);padding:6px 9px;margin-top:8px;line-height:1.4} .sim-lx .pick-foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line); padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap; box-shadow:0 -1px 0 var(--line-soft)} /* ── BOARD · lanes of work, for the dispatch screen ────────────────────── Four columns, each a queue. The lane header carries the count, because the count is the job. Tablet-first at 1024px (§6.11) — the Delivery Manager is not at a desk, but he is not on a phone either, and he needs the unassigned queue and the drivers side by side. ────────────────────────────────────────────────────────────────────── */ .sim-lx .board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start} @media(max-width:1180px){.sim-lx .board{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){.sim-lx .board{grid-template-columns:1fr}} .sim-lx .lane{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-1)} .sim-lx .lane > .card-h{padding:12px 14px} .sim-lx .lane > .card-h h2{font-size:13px;letter-spacing:.04em;text-transform:uppercase; color:var(--text-2)} .sim-lx .lane-b{padding:10px;display:flex;flex-direction:column;gap:10px} .sim-lx .lane-empty{padding:18px 10px;font-size:13px;color:var(--text-3);text-align:center} /* One unit of work. Everything about one drop, in the order it is needed: who and where first, then what it is worth, then the single action. */ .sim-lx .drop{border:1px solid var(--line);border-radius:var(--r-md);padding:11px; background:var(--surface)} .sim-lx .drop .who{font-size:13.5px;font-weight:600;color:var(--text-1)} .sim-lx .drop .ref{font-family:var(--mono);font-size:11.5px;color:var(--text-3)} .sim-lx .drop .where{font-size:12.5px;color:var(--text-2);margin-top:3px} /* Cash to collect is the largest thing on the card. The most common expensive mistake in delivery is forgetting to take the money. */ .sim-lx .drop .money{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums; color:var(--navy-900);margin-top:7px} .sim-lx .drop .money .mode{font-size:12px;font-weight:500;color:var(--text-3); margin-inline-start:6px} .sim-lx .drop details{margin-top:7px} .sim-lx .drop details summary{font-size:12px;color:var(--accent-600);cursor:pointer; font-weight:600} .sim-lx .drop details ul{margin:6px 0 0;padding-inline-start:18px;font-size:12.5px; color:var(--text-2)} .sim-lx .drop form{margin-top:9px;display:flex;gap:6px;align-items:center} .sim-lx .drop form select{flex:1;min-width:0} /* ── STOP CARD · one drop, on a phone, in a moving vehicle ─────────────── Field density. The reference screens have no cash anywhere; ours puts COD in the largest type on the card, because the most common expensive mistake in delivery is forgetting to take the money (§7.5, deviation 1). ────────────────────────────────────────────────────────────────────── */ .sim-lx .stop{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:16px;margin-bottom:12px} .sim-lx .stop .who{font-size:17px;line-height:24px;font-weight:700;color:var(--text-1)} .sim-lx .stop .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .sim-lx .stop .where{font-size:15px;line-height:22px;color:var(--text-2);margin-top:10px} .sim-lx .stop .tel{display:inline-flex;align-items:center;gap:8px;min-height:44px; font-size:15px;font-weight:600;color:var(--accent-600)} .sim-lx .stop .tel svg{width:18px;height:18px} /* The money line. Largest element on the card, and red only when it is cash the driver has to physically collect. */ .sim-lx .stop .cod{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)} .sim-lx .stop .cod .k{font-size:12px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3)} .sim-lx .stop .cod .v{font-size:30px;line-height:36px;font-weight:700; font-variant-numeric:tabular-nums;color:var(--navy-900)} .sim-lx .stop .cod.collect .v{color:var(--danger)} .sim-lx .stop .acts{margin-top:14px;display:flex;flex-direction:column;gap:8px} .sim-lx .stop .acts .btn{width:100%} /* Signature pad. Sized by CSS, never by a style attribute on the canvas. */ .sim-lx .sigpad{border:1px solid var(--line-hard);border-radius:var(--r-md); width:100%;height:110px;touch-action:none;display:block;background:var(--surface)} /* ── LIST ROWS · a card whose body is a list, not a table ──────────────── Used where the thing is a short roster rather than a data grid: locations, module switches, a chronological feed. Same hairline dividers as the table, no header row, and the row height follows the density variable so the deep shell and the field shell both get it right. ────────────────────────────────────────────────────────────────────── */ .sim-lx .rows .row-item{display:flex;align-items:center;gap:12px;padding:12px 16px; border-top:1px solid var(--line-soft);min-height:var(--d-row)} .sim-lx .rows .row-item:first-child{border-top:0} .sim-lx .rows .row-item .ic{width:20px;height:20px;color:var(--text-3);flex:0 0 20px} .sim-lx .rows .row-item .ic.ok{color:var(--success)} .sim-lx .rows .row-item .t{font-size:13.5px;font-weight:600;color:var(--text-1)} .sim-lx .rows .row-item .m{font-size:12px;color:var(--text-3);margin-top:2px} .sim-lx .rows .row-item .grow{min-width:0} .sim-lx .rows .row-item.off .t{color:var(--text-2)} /* Usage meter. Only ever shows a limit that actually exists — in v2 a single customer is not rate-limited on branches, so this survives only until the plan screens go. */ .sim-lx .meter{height:5px;background:var(--surface-2);margin:0 16px 12px} .sim-lx .meter i{display:block;height:100%;background:var(--accent-600);border-radius:3px} .sim-lx .meter i.warn{background:var(--warning)} .sim-lx .meter i.bad{background:var(--danger)} /* ── DOCUMENT · an invoice, a receipt, a dispatch note ─────────────────── Something that is printed and kept. Fixed reading width, hairline rules, and a totals block whose figures line up because they are tabular. The print rules live in _utilities.css so every document sheds its chrome the same way. ────────────────────────────────────────────────────────────────────── */ .sim-lx .doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1);padding:32px;max-width:820px} .sim-lx .doc-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; margin-bottom:28px} .sim-lx .doc-head .issuer{font-size:19px;font-weight:800;color:var(--text-1)} .sim-lx .doc-head .kind{font-size:17px;font-weight:800;color:var(--text-1);text-align:end} .sim-lx .doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px} .sim-lx .doc-parties .to{text-align:end} @media(max-width:640px){.sim-lx .doc{padding:20px}.sim-lx .doc-parties{grid-template-columns:1fr} .sim-lx .doc-parties .to{text-align:start}} .sim-lx .doc .label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3);margin-bottom:4px} .sim-lx .doc .name{font-size:15px;font-weight:700;color:var(--text-1)} .sim-lx .doc-pay{display:flex;justify-content:space-between;gap:12px; border-bottom:1px solid var(--line-soft);padding:8px 0;font-size:13px} .sim-lx .doc-pay .when{color:var(--text-3)} /* ── DANGER ZONE · the destructive corner of a settings screen ─────────── Set apart so it cannot be reached by accident while doing something else. The action inside it is still a plain destructive button — this is a container, not a second way of saying "red". ────────────────────────────────────────────────────────────────────── */ .sim-lx .zone{border-top:1px solid var(--line);background:var(--danger-wash); padding:16px;border-radius:0 0 var(--r-lg) var(--r-lg)} .sim-lx .zone .zt{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--danger-ink);margin-bottom:10px;display:flex;align-items:center;gap:7px} .sim-lx .zone .zn{font-size:12.5px;color:var(--danger-ink);margin-top:10px} /* ── SOLO · a single card on an empty page ─────────────────────────────── The storefront's own sign-in, register and landing pages. They render with Layout = null on purpose: no sidebar, no nav model, no authenticated lookup, so they still work when the shells cannot. This is the one bit of page geometry they need. ────────────────────────────────────────────────────────────────────── */ .sim-lx .solo{min-height:100vh;display:flex;align-items:center;justify-content:center; padding:24px 16px;background:var(--canvas)} .sim-lx .solo .card{width:100%;max-width:420px;overflow:hidden} .sim-lx .solo .hd{background:var(--navy-800);color:var(--on-dark);padding:24px} .sim-lx .solo .hd h1{font-size:21px;line-height:27px;font-weight:700;color:var(--on-dark)} .sim-lx .solo .hd p{font-size:13px;color:var(--on-dark-2);margin-top:6px} .sim-lx .solo .alt{text-align:center;margin-top:16px;font-size:13.5px;color:var(--text-2)} /* ── METRIC CARD · replaces the rejected saturated colour blocks ────────── White card. Colour appears in an 8px status dot, and in the figure ONLY when the figure is the exception. Maximum four per screen. ────────────────────────────────────────────────────────────────────── */ .sim-lx .metric{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1);display:block} .sim-lx .metric .top{display:flex;align-items:center;gap:7px;margin-bottom:10px} .sim-lx .metric .dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex:0 0 8px} .sim-lx .metric .dot.ok{background:var(--success)} .sim-lx .metric .dot.warn{background:var(--warning)} .sim-lx .metric .dot.bad{background:var(--danger)} .sim-lx .metric .dot.info{background:var(--accent-600)} .sim-lx .metric .k{font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3)} .sim-lx .metric-val{font-size:30px;line-height:34px;font-weight:700;letter-spacing:-.02em; color:var(--navy-900);font-variant-numeric:tabular-nums} .sim-lx .metric-val.lg{font-size:40px;line-height:44px} .sim-lx .metric-val.bad{color:var(--danger)} .sim-lx .metric-val.warn{color:var(--warning-ink)} .sim-lx .metric .unit{font-size:13px;color:var(--text-3);margin-top:4px} .sim-lx .metric .delta{font-size:12.5px;font-weight:600;margin-top:10px; display:flex;align-items:center;gap:5px} .sim-lx .delta.up{color:var(--success)} .sim-lx .delta.down{color:var(--danger)} .sim-lx .delta.flat{color:var(--text-3)} .sim-lx a.metric:hover{border-color:var(--line-hard);box-shadow:var(--sh-2);text-decoration:none} .sim-lx .bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden} .sim-lx .bar i{display:block;height:100%;background:var(--accent-600);border-radius:3px} .sim-lx .bar i.ok{background:var(--success)} .sim-lx .bar i.warn{background:var(--warning)} .sim-lx .bar i.bad{background:var(--danger)} /* ── PROPORTION BAR · , not a div with an inline width ───────── A share-of-total bar is the one thing in the library whose length is a DATUM, not a style. Writing it as style="width:37%" is the only reason a rebuilt view would still carry an inline style, and the acceptance test for this redesign is that the count reaches zero. puts the number where it belongs - in an attribute the browser and a screen reader both understand - and the appearance stays here. Vendor pseudo-elements cannot be combined in one rule; they are listed separately on purpose, because a single invalid selector drops the block. ────────────────────────────────────────────────────────────────────── */ .sim-lx progress.bar,.sim-lx progress.meter{appearance:none;-webkit-appearance:none;border:0; display:block;width:100%;background:var(--surface-2)} .sim-lx progress.bar{height:6px;border-radius:3px} .sim-lx progress.meter{height:5px;margin:0 16px 12px;width:calc(100% - 32px)} .sim-lx progress.bar::-webkit-progress-bar,.sim-lx progress.meter::-webkit-progress-bar{ background:var(--surface-2);border-radius:3px} .sim-lx progress.bar::-webkit-progress-value{background:var(--accent-600);border-radius:3px} .sim-lx progress.meter::-webkit-progress-value{background:var(--accent-600)} .sim-lx progress.bar::-moz-progress-bar{background:var(--accent-600);border-radius:3px} .sim-lx progress.meter::-moz-progress-bar{background:var(--accent-600)} .sim-lx progress.warn::-webkit-progress-value{background:var(--warning)} .sim-lx progress.warn::-moz-progress-bar{background:var(--warning)} .sim-lx progress.bad::-webkit-progress-value{background:var(--danger)} .sim-lx progress.bad::-moz-progress-bar{background:var(--danger)} /* ── LEDGER FIGURE · THE SIGNATURE COMPONENT ───────────────────────────── A 3px accent bar on the inline-start edge. Used ONLY for a number that is the sum of a ledger - stock on hand, points balance, cash position, COD collected, open backorders. NOTHING ELSE IN THE INTERFACE GETS THAT BAR. That is what makes it mean exactly one thing: this number is derived, and you can see the rows behind it. A user learns it once and it is the same at the counter, in the portal and in the PWA. Every instance states its basis and freshness in words - "as at 14:35". A figure with no stated basis is worse than no figure, because someone will price against it. ────────────────────────────────────────────────────────────────────── */ .sim-lx .ledger{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:16px;padding-inline-start:19px; position:relative;overflow:hidden;box-shadow:var(--sh-1)} .sim-lx .ledger::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0; width:3px;background:var(--accent-600)} .sim-lx .ledger .k{font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3);margin-bottom:8px} .sim-lx .ledger .v{font-size:32px;line-height:36px;font-weight:700;letter-spacing:-.02em; font-variant-numeric:tabular-nums;color:var(--navy-900)} .sim-lx .ledger .m{font-size:12.5px;color:var(--text-3);margin-top:4px} .sim-lx .ledger .go{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--accent-600); display:inline-flex;gap:5px;align-items:center} .sim-lx .ledger.neg::before{background:var(--danger)} .sim-lx .ledger.neg .v{color:var(--danger)} .sim-lx .ledger.lg .v{font-size:40px;line-height:44px} /* Counter and Field densities: same component, bigger figure. */ .sim-lx .d-counter .ledger .v,.sim-lx .d-field .ledger .v{font-size:36px;line-height:40px} /* The freshness stamp that accompanies any rpt-derived figure. */ .sim-lx .freshness{font-size:12px;color:var(--text-3);display:inline-flex; align-items:center;gap:6px} .sim-lx .freshness::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)} .sim-lx .freshness.stale::before{background:var(--warning)} /* ── DATA TABLE ────────────────────────────────────────────────────────── Sticky header · sticky group headers with counts · ZEBRA OFF, hairline dividers only · numbers right-aligned and tabular · decimals only where the unit has them · badges on exceptions only · at most two inline actions then a menu · skeleton rows while loading, never a spinner over a blank table · horizontal scroll with the first column pinned, never shrink type to fit. ────────────────────────────────────────────────────────────────────── */ .sim-lx .tbl-wrap{overflow-x:auto} .sim-lx .tbl{font-size:13.5px} .sim-lx .tbl thead th{font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3);text-align:start;padding:10px 14px; background:var(--surface);border-bottom:1px solid var(--line-hard); white-space:nowrap;position:sticky;top:0;z-index:2} .sim-lx .tbl thead th.num{text-align:end} .sim-lx .tbl tbody td{padding:0 14px;height:var(--d-row); border-bottom:1px solid var(--line-soft);color:var(--text-2)} .sim-lx .tbl tbody td.num{text-align:end;font-variant-numeric:tabular-nums; color:var(--text-1);font-weight:500} .sim-lx .tbl tbody td .pri{color:var(--text-1);font-weight:600} .sim-lx .tbl tbody tr:hover{background:var(--accent-050)} .sim-lx .tbl tbody tr.bad{background:var(--danger-wash)} .sim-lx .tbl tbody tr.bad:hover{background:var(--danger-wash-2)} .sim-lx .tbl tbody tr.sel{background:var(--accent-100);box-shadow:inset 3px 0 0 var(--accent-600)} .sim-lx .tbl tbody tr.muted-row td{color:var(--text-3)} /* The branch is the grouping, not a column repeated on twelve rows. */ .sim-lx .tbl .grp td{background:var(--surface-2);height:36px;font-size:11px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--text-2); border-bottom:1px solid var(--line);position:sticky;top:37px;z-index:1} .sim-lx .tbl .grp .n{font-weight:600;color:var(--text-3);letter-spacing:0; text-transform:none;font-size:12px;margin-inline-start:10px} .sim-lx .tbl .act{display:flex;gap:4px;justify-content:flex-end} .sim-lx .tbl td.pin,.sim-lx .tbl th.pin{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1} .sim-lx .tbl tbody tr:hover td.pin{background:var(--accent-050)} .sim-lx .tbl-foot{display:flex;align-items:center;gap:12px;padding:12px 16px; border-top:1px solid var(--line-soft);font-size:13px;color:var(--text-3)} /* The total row. A rule twice the weight of a body divider, because the eye needs to know where the column stops adding up. */ .sim-lx .tbl tfoot td{height:var(--d-row);padding:0 14px;color:var(--text-1);font-weight:700; border-top:2px solid var(--line-hard);background:var(--surface-2)} .sim-lx .tbl tfoot td.num{text-align:end;font-variant-numeric:tabular-nums} /* ── BADGE · EXCEPTIONS ONLY ───────────────────────────────────────────── A badge on 33 of 36 rows carries no information. No badge means normal. ────────────────────────────────────────────────────────────────────── */ .sim-lx .badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px; border-radius:var(--r-full);font-size:12px;line-height:16px;font-weight:600; background:var(--surface-2);color:var(--text-2)} .sim-lx .badge::before{content:"";width:6px;height:6px;border-radius:50%; background:currentColor;opacity:.75} .sim-lx .badge.plain::before{display:none} .sim-lx .badge.ok{background:var(--success-wash);color:var(--success-ink)} .sim-lx .badge.warn{background:var(--warning-wash);color:var(--warning-ink)} .sim-lx .badge.bad{background:var(--danger-wash);color:var(--danger-ink)} .sim-lx .badge.info{background:var(--info-wash);color:var(--info-ink)} .sim-lx .badge.acc{background:var(--accent-050);color:var(--accent-700)} .sim-lx .badge.sm{height:20px;padding:0 8px;font-size:11px} .sim-lx .avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-100); color:var(--accent-700);display:grid;place-items:center;font-size:12px; font-weight:700;flex:0 0 30px} .sim-lx .avatar.sq{border-radius:8px} .sim-lx .avatar.lg{width:38px;height:38px;flex:0 0 38px;font-size:13px} .sim-lx .avatar.xl{width:48px;height:48px;flex:0 0 48px;font-size:15px} /* ── STATE · the quiet half of the badge rule ────────────────────────────── F-006 / F-008 / F-015 / F-019. "Badges on exceptions only. No badge = normal" is the right rule and it stays: a green tick on 33 of 36 rows carries no information. But the QA pass found the cost of expressing "normal" as an EMPTY CELL — a blank Status column cannot be told apart from data that failed to load, and on a terminal state ("Received", "Approved") the reader has no way to know the journey finished rather than never started. So the exception keeps the badge, and the normal/terminal state gets a quiet text label instead: named, but visually silent. No wash, no dot, no competition for the eye. */ .sim-lx .state{font-size:12px;line-height:16px;font-weight:500;color:var(--text-3)} .sim-lx .state.done{color:var(--text-2)} /* ── FORM FIELD + FORM GRID ───────────────────────────────────────────── Validation state is carried on the field, and the message says what to do. Errors do not apologise and are never vague. ────────────────────────────────────────────────────────────────────── */ .sim-lx .f{margin-bottom:16px} .sim-lx .f label,.sim-lx .f .lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3);margin-bottom:6px} .sim-lx .f label .req{color:var(--danger);margin-inline-start:3px} .sim-lx .f input,.sim-lx .f select,.sim-lx .f textarea{width:100%;height:var(--d-field); border:1px solid var(--line-hard);border-radius:var(--r-md);padding:0 12px; font-size:14px;font-family:inherit;color:var(--text-1);background:var(--surface)} .sim-lx .f textarea{height:auto;min-height:88px;padding:10px 12px;line-height:20px} .sim-lx .f select{appearance:none;padding-inline-end:34px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A97A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;background-size:16px} .sim-lx[dir="rtl"] .f select{background-position:left 11px center} .sim-lx .f input:focus,.sim-lx .f select:focus,.sim-lx .f textarea:focus{outline:none; border-color:var(--accent-600);box-shadow:0 0 0 3px var(--accent-100)} .sim-lx .f input[readonly],.sim-lx .f input[disabled],.sim-lx .f select[disabled],.sim-lx .f textarea[disabled]{ background:var(--surface-2);color:var(--text-2);cursor:not-allowed} .sim-lx .f .help{font-size:12px;color:var(--text-3);margin-top:6px} .sim-lx .f .err,.sim-lx .field-validation-error{display:block;font-size:12px;color:var(--danger-ink);margin-top:6px} .sim-lx .f.has-err input,.sim-lx .f.has-err select,.sim-lx .f.has-err textarea,.sim-lx .input-validation-error{border-color:var(--danger)!important} .sim-lx .f.has-err input:focus{box-shadow:0 0 0 3px var(--danger-wash)} .sim-lx .validation-summary-errors{border:1px solid var(--danger);background:var(--danger-wash); color:var(--danger-ink);border-radius:var(--r-md);padding:12px 14px; font-size:13px;margin-bottom:16px} .sim-lx .validation-summary-errors ul{margin:0} .sim-lx .validation-summary-valid{display:none} .sim-lx .f-inline{display:flex;align-items:center;gap:10px} .sim-lx .f-inline label{margin-bottom:0} .sim-lx .check{display:inline-flex;align-items:center;gap:8px;font-size:14px; color:var(--text-1);cursor:pointer;min-height:24px} .sim-lx .check input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--accent-600);margin:0} .sim-lx .form-grid{display:grid;gap:0 16px;grid-template-columns:repeat(2,1fr)} .sim-lx .form-grid.c1{grid-template-columns:1fr} .sim-lx .form-grid.c3{grid-template-columns:repeat(3,1fr)} .sim-lx .form-grid .span2{grid-column:span 2} .sim-lx .form-grid .span3{grid-column:span 3} @media(max-width:820px){ .sim-lx .form-grid,.sim-lx .form-grid.c3{grid-template-columns:1fr} .sim-lx .form-grid .span2,.sim-lx .form-grid .span3{grid-column:auto}} .sim-lx .form-acts{display:flex;gap:8px;justify-content:flex-end;padding-top:4px} @media(max-width:560px){.sim-lx .form-acts{flex-direction:column-reverse} .sim-lx .form-acts .btn{width:100%}} /* Scan input - warehouse and counter. Never loses focus, never autocorrects. */ .sim-lx .scan{display:flex;align-items:center;gap:10px;border:2px solid var(--accent-600); border-radius:var(--r-md);background:var(--surface);padding:0 14px; height:var(--d-field)} .sim-lx .scan input{border:0;outline:none;width:100%;font-family:var(--mono); font-size:var(--d-base);letter-spacing:.02em;background:transparent} .sim-lx .scan svg{color:var(--accent-600);flex:0 0 20px} /* A repeating line-item row: product, quantity, price, remove. The remove button aligns to the input row, not to the label row above it. */ .sim-lx .po-item{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end} .sim-lx .po-item .f{margin-bottom:0} .sim-lx .po-item > .btn{margin-bottom:0} @media(max-width:820px){ .sim-lx .po-item{grid-template-columns:1fr 1fr;padding-bottom:12px; border-bottom:1px solid var(--line-soft)} .sim-lx .po-item .f:first-child{grid-column:span 2} } /* Inputs that sit inside a table cell size to their content, not to the column. */ .sim-lx .in-sm{width:100px} .sim-lx .in-md{width:150px} .sim-lx .tbl input.in-sm,.sim-lx .tbl input.in-md{height:34px;border:1px solid var(--line-hard); border-radius:var(--r-sm);padding:0 9px;font-size:13px;background:var(--surface); font-variant-numeric:tabular-nums} .sim-lx .tbl input.in-sm:focus,.sim-lx .tbl input.in-md:focus{outline:none;border-color:var(--accent-600); box-shadow:0 0 0 3px var(--accent-100)} .sim-lx .grn-wh{max-width:340px} /* A long list of checkboxes - products, categories, branches. Scrolls rather than pushing the submit button off the bottom of a 60,000-SKU catalogue. */ .sim-lx .check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px 16px} .sim-lx .check-grid.cols4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .sim-lx .check-grid.scroll{max-height:280px;overflow-y:auto;border:1px solid var(--line); border-radius:var(--r-md);padding:12px;background:var(--surface-2)} /* Type-ahead search with a results panel that overlays the content below it. */ .sim-lx .typeahead{position:relative} .sim-lx .typeahead input{width:100%;height:var(--d-field);border:1px solid var(--line-hard); border-radius:var(--r-md);padding:0 12px;font-size:14px;background:var(--surface)} .sim-lx .typeahead input:focus{outline:none;border-color:var(--accent-600); box-shadow:0 0 0 3px var(--accent-100)} .sim-lx .ta-results{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 4px); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--sh-2);max-height:280px;overflow-y:auto;padding:6px} .sim-lx .ta-item{display:block;width:100%;text-align:start;padding:8px 10px;border:0; background:none;border-radius:var(--r-sm);cursor:pointer} .sim-lx .ta-item:hover{background:var(--surface-2)} .sim-lx .ta-item .t{display:block;font-size:13.5px;font-weight:600;color:var(--text-1)} .sim-lx .ta-item .m{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px} .sim-lx .ta-empty{padding:12px 10px;font-size:13px;color:var(--text-3)} /* An input with actions welded to it — a store URL to copy, a code to reveal. One control, so it reads as one control. */ .sim-lx .input-group{display:flex;gap:0} .sim-lx .input-group input{flex:1;min-width:0;height:var(--d-field); border:1px solid var(--line-hard);border-radius:var(--r-md) 0 0 var(--r-md); padding:0 12px;font-family:var(--mono);font-size:13px;background:var(--surface-2)} .sim-lx .input-group .btn{border-radius:0} .sim-lx .input-group .btn:last-child{border-start-end-radius:var(--r-md); border-end-end-radius:var(--r-md)} .sim-lx[dir="rtl"] .input-group input{border-radius:0 var(--r-md) var(--r-md) 0} /* Readiness list. A tick is not a badge — it is a checklist state, and the cross is the only one that stops you. */ .sim-lx .checklist{list-style:none;margin:0;padding:0} .sim-lx .checklist li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:14px} .sim-lx .checklist svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;color:var(--success)} .sim-lx .checklist li.no svg{color:var(--danger)} .sim-lx .checklist li.warn svg{color:var(--warning)} /* A QR code is an image to be printed, not decoration. */ .sim-lx .qr{text-align:center;padding:20px;border:1px solid var(--line); border-radius:var(--r-md);background:var(--surface);margin-top:16px} .sim-lx .qr img{width:190px;height:190px;display:block;margin:0 auto} .sim-lx .qr .m{font-size:12px;color:var(--text-3);margin-top:10px;line-height:18px} /* Dispatch board — assign a driver. The select carried no width and overlapped the Send button, so the native dropdown opened under it and the click hit Send with nothing chosen. */ .sim-lx .dm-assign { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .sim-lx .dm-assign select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line-hard, #CBD5E1); border-radius: 8px; background: var(--surface, #fff); font: inherit; font-size: 13px; } .sim-lx .dm-assign select:focus-visible { outline: 2px solid var(--accent-600, #0E6E68); outline-offset: 2px; } .sim-lx .dm-assign button { width: 100%; } /* ── FILTER BAR ───────────────────────────────────────────────────────── */ .sim-lx .filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .sim-lx .fld{height:36px;border:1px solid var(--line-hard);border-radius:var(--r-md); background:var(--surface);padding:0 12px;display:inline-flex;align-items:center; gap:8px;font-size:13px;color:var(--text-1);cursor:pointer} .sim-lx .fld .lb{color:var(--text-3);font-size:12px} .sim-lx .fld:hover{border-color:var(--text-3)} .sim-lx .fld:focus,.sim-lx .fld:focus-within{outline:none;border-color:var(--accent-600); box-shadow:0 0 0 3px var(--accent-100)} .sim-lx .fld.wide{min-width:230px} .sim-lx .fld.on{border-color:var(--accent-600);background:var(--accent-050);color:var(--accent-700)} .sim-lx .fld select,.sim-lx .fld input{border:0;outline:none;background:transparent;font-size:13px; color:inherit;padding:0;height:100%;min-width:80px} .sim-lx .fld select{appearance:none;padding-inline-end:16px} /* ── EMPTY STATE · an invitation to act, never "No data found" ────────── */ .sim-lx .empty{text-align:center;padding:48px 24px;max-width:340px;margin:0 auto} .sim-lx .empty .ic{width:44px;height:44px;color:var(--text-3);margin:0 auto 14px} .sim-lx .empty h3{font-size:16px;line-height:24px;font-weight:600;margin-bottom:6px} .sim-lx .empty p{font-size:14px;color:var(--text-2);margin-bottom:16px} /* ── MODAL ─────────────────────────────────────────────────────────────── Destructive action is never the default focus. In a confirm modal, focus lands on Cancel. The class names below deliberately match the Bootstrap JS contract (.modal / .fade / .show / .modal-backdrop). bootstrap.bundle.js is retained for the eight views that drive modals, dropdowns and tabs through data-bs-* attributes - the BEHAVIOUR is unchanged, only the appearance. ────────────────────────────────────────────────────────────────────── */ .sim-lx .modal{position:fixed;inset:0;z-index:1055;display:none;overflow-y:auto} .sim-lx .modal.show{display:block} .sim-lx .modal-backdrop{position:fixed;inset:0;z-index:1050;background:rgba(3,38,42,.5)} .sim-lx .modal-backdrop.show{opacity:1} .sim-lx .modal-dialog{max-width:520px;margin:48px auto;max-height:calc(100vh - 96px); transition:transform var(--t-slow) var(--ease)} .sim-lx .modal-dialog.modal-sm{max-width:400px} .sim-lx .modal-dialog.modal-lg{max-width:820px} .sim-lx .modal.fade .modal-dialog{transform:translateY(-8px)} .sim-lx .modal.show .modal-dialog{transform:none} .sim-lx .modal-content{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-3);display:flex;flex-direction:column} .sim-lx .modal-header{padding:16px 20px;border-bottom:1px solid var(--line-soft); display:flex;align-items:center;gap:12px;flex-shrink:0} .sim-lx .modal-title{font-size:16px;line-height:22px;font-weight:600} .sim-lx .modal-body{padding:20px;font-size:14px;color:var(--text-2);flex:1;min-height:0;overflow-y:auto} .sim-lx .modal-footer{padding:14px 20px;border-top:1px solid var(--line-soft); display:flex;gap:8px;justify-content:flex-end;flex-shrink:0} .sim-lx .btn-close{width:32px;height:32px;border-radius:var(--r-md); margin-inline-start:auto;display:grid;place-items:center;color:var(--text-3); background:none;border:0;cursor:pointer;font-size:0} .sim-lx .btn-close::before{content:"";width:14px;height:14px;background:currentColor; -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat} .sim-lx .btn-close:hover{background:var(--surface-2);color:var(--text-1)} /* ── RESPONSIVE MODAL ADJUSTMENTS ────────────────────────────────────── Mobile: reduce margin to give modal more vertical space. Calculation: 100vh - (48px top margin + 48px bottom margin = 96px) On very small screens: reduce further. ────────────────────────────────────────────────────────────────────── */ @media(max-height: 600px){ .sim-lx .modal-dialog{margin:20px auto;max-height:calc(100vh - 40px)} } @media(max-height: 400px){ .sim-lx .modal-dialog{margin:10px auto;max-height:calc(100vh - 20px)} } /* ── DRAWER · side panel for detail without losing the list ───────────── */ .sim-lx .drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(480px,100%); background:var(--surface);border-inline-start:1px solid var(--line); box-shadow:var(--sh-3);z-index:1060;display:flex;flex-direction:column; transform:translateX(100%);transition:transform var(--t-mid) var(--ease)} .sim-lx[dir="rtl"] .drawer{transform:translateX(-100%)} .sim-lx .drawer.open{transform:none} .sim-lx .drawer-h{padding:16px 20px;border-bottom:1px solid var(--line-soft); display:flex;align-items:center;gap:12px} .sim-lx .drawer-h h2{font-size:16px;font-weight:600} .sim-lx .drawer-b{padding:20px;overflow-y:auto;flex:1} .sim-lx .drawer-f{padding:14px 20px;border-top:1px solid var(--line-soft); display:flex;gap:8px;justify-content:flex-end} .sim-lx .drawer-scrim{position:fixed;inset:0;background:rgba(3,38,42,.45);z-index:1055} /* ── TOAST · the button's label, in the past tense ──────────────────────── "Approve" produces "Approved". "Send stock" produces "Stock sent". ────────────────────────────────────────────────────────────────────── */ .sim-lx .toast-stack{position:fixed;bottom:20px;inset-inline-end:20px;z-index:1080; display:flex;flex-direction:column;gap:8px;max-width:380px} .sim-lx .toast{background:var(--navy-900);color:var(--on-fill);border-radius:var(--r-md); padding:12px 14px;box-shadow:var(--sh-3);font-size:13.5px;line-height:19px; display:flex;align-items:flex-start;gap:10px; animation:lx-toast-in var(--t-mid) var(--ease)} .sim-lx .toast .ic{flex:0 0 18px;margin-top:1px} .sim-lx .toast.ok .ic{color:var(--success-bright)} .sim-lx .toast.bad{background:var(--danger-ink)} .sim-lx .toast.warn{background:var(--warning-ink)} .sim-lx .toast .x{margin-inline-start:auto;opacity:.6;cursor:pointer;background:none; border:0;color:inherit} .sim-lx .toast .x:hover{opacity:1} @keyframes lx-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Server-rendered TempData messages use the same voice. */ .sim-lx .alert{border-radius:var(--r-md);padding:12px 14px;font-size:13.5px; margin-bottom:16px;border:1px solid transparent;display:flex; align-items:flex-start;gap:10px} .sim-lx .alert-success{background:var(--success-wash);color:var(--success-ink); border-color:rgba(14,159,110,.28)} .sim-lx .alert-danger{background:var(--danger-wash);color:var(--danger-ink); border-color:rgba(220,38,38,.28)} .sim-lx .alert-warning{background:var(--warning-wash);color:var(--warning-ink); border-color:rgba(180,83,9,.28)} .sim-lx .alert-info{background:var(--info-wash);color:var(--info-ink); border-color:rgba(3,105,161,.28)} .sim-lx .alert .btn-close{margin-inline-start:auto} .sim-lx .alert.fade{opacity:1} /* ── PAGINATION ───────────────────────────────────────────────────────── */ .sim-lx .pager{display:flex;align-items:center;gap:4px} .sim-lx .pager a,.sim-lx .pager span{min-width:32px;height:32px;padding:0 8px;border-radius:var(--r-sm); display:inline-flex;align-items:center;justify-content:center;font-size:13px; font-weight:500;color:var(--text-2);border:1px solid transparent} .sim-lx .pager a:hover{background:var(--surface-2);color:var(--text-1);text-decoration:none} .sim-lx .pager .on{background:var(--accent-050);color:var(--accent-700); border-color:var(--accent-100);font-weight:600} .sim-lx .pager .off{color:var(--text-3);pointer-events:none} .sim-lx .pager .gap{pointer-events:none;color:var(--text-3)} .sim-lx .pager-info{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums} /* ── CHART CARD ────────────────────────────────────────────────────────── Series colours are assigned in order from --c1..--c6 and never carry meaning. A red series must not appear next to a red status badge. ────────────────────────────────────────────────────────────────────── */ .sim-lx .chart-card{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-1)} .sim-lx .chart-card .card-b{padding:16px} .sim-lx .chart-wrap{position:relative;width:100%} .sim-lx .chart-wrap.h180{height:180px} .sim-lx .chart-wrap.h240{height:240px} .sim-lx .chart-wrap.h320{height:320px} .sim-lx .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12.5px; color:var(--text-2)} .sim-lx .legend i{width:9px;height:9px;border-radius:2px;display:inline-block; margin-inline-end:6px} .sim-lx .legend .s1{background:var(--c1)}.sim-lx .legend .s2{background:var(--c2)} .sim-lx .legend .s3{background:var(--c3)}.sim-lx .legend .s4{background:var(--c4)} .sim-lx .legend .s5{background:var(--c5)}.sim-lx .legend .s6{background:var(--c6)} /* The stated-logic block. Collapsed by default: it is reference, not chrome — but it is on the page, not in a tooltip, because nobody hovers in a meeting. */ .sim-lx .an-logic { border:1px solid var(--line); border-radius:10px; background:var(--surface); margin:12px 0; font-size:13px; } .sim-lx .an-logic > summary { cursor:pointer; padding:10px 14px; font-weight:600; color:var(--text-2); list-style:none; } .sim-lx .an-logic > summary::-webkit-details-marker { display:none; } .sim-lx .an-logic > summary::before { content:"?"; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--surface-2); color:var(--text-2); font-size:11px; font-weight:700; margin-inline-end:8px; } .sim-lx .an-logic dl { margin:0; padding:0 14px 12px; } .sim-lx .an-logic dl > div { display:flex; gap:12px; padding:4px 0; border-top:1px solid var(--line-soft); } .sim-lx .an-logic dt { flex:0 0 84px; font-weight:600; color:var(--text-3); font-size:12px; text-transform:uppercase; letter-spacing:.05em; } .sim-lx .an-logic dd { margin:0; color:var(--text-2); line-height:19px; } /* ── PORTAL CHARTS · the renderer's own output ──────────────────────────── wwwroot/js/portal-charts.js builds SVG and a handful of DOM wrappers of its own: .pc-empty, .pc-tip, .pc-legend, .pc-hbar*, .pc-donut*. Those class names are the renderer's contract, not this library's, so they are spelled here exactly as it emits them and NOT renamed. WHY THIS FILE EXISTS AT ALL. The styling for these lived in portal-analytics.css, which no layout references any more. Every chart on a rebuilt page was therefore drawing correctly and rendering unstyled - no tooltip background, no ranking bars, a legend in a vertical stack. Nothing reported it because a chart that draws is not a chart that looks right. The values are ported to LX tokens. The geometry is unchanged: it was correct, and changing it would have been a second reason for one change. ────────────────────────────────────────────────────────────────────── */ .sim-lx .pc-chart{position:relative;width:100%;min-height:60px} .sim-lx .pc-empty{padding:34px 16px;text-align:center;color:var(--text-3); font-size:13px;background:var(--surface-2);border-radius:var(--r-md)} .sim-lx .pc-tip{position:absolute;z-index:5;pointer-events:none; background:var(--navy-900);color:var(--on-dark);font-size:11.5px;line-height:1.45; padding:6px 9px;border-radius:var(--r-sm);white-space:nowrap;box-shadow:var(--sh-2)} .sim-lx .pc-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;justify-content:center} .sim-lx .pc-legend-col{flex-direction:column;gap:8px;justify-content:flex-start;margin-top:0} .sim-lx .pc-legend-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2)} .sim-lx .pc-dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px} .sim-lx .pc-legend-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .sim-lx .pc-legend-val{color:var(--text-3);font-variant-numeric:tabular-nums; margin-inline-start:auto} .sim-lx .pc-donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .sim-lx .pc-donut-svg{width:190px;flex:0 0 190px} .sim-lx .pc-donut .pc-legend{flex:1;min-width:150px} .sim-lx .pc-hbar{display:flex;flex-direction:column;gap:13px} .sim-lx .pc-hbar-row{display:flex;gap:11px;align-items:flex-start} .sim-lx .pc-hbar-rank{width:21px;height:21px;flex:0 0 21px;border-radius:var(--r-sm); background:var(--surface-2);color:var(--text-2);font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center; font-variant-numeric:tabular-nums} /* First place is the only rank that is filled. A rank list where every rank is coloured tells you nothing about which one is first. */ .sim-lx .pc-hbar-row:nth-child(1) .pc-hbar-rank{background:var(--accent-600);color:var(--on-fill)} .sim-lx .pc-hbar-body{flex:1;min-width:0} .sim-lx .pc-hbar-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .sim-lx .pc-hbar-label{font-size:13px;color:var(--text-1);font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sim-lx .pc-hbar-val{font-size:12.5px;color:var(--text-1);font-weight:700; font-variant-numeric:tabular-nums;white-space:nowrap} .sim-lx .pc-hbar-track{height:6px;background:var(--surface-2);border-radius:4px; margin-top:5px;overflow:hidden} .sim-lx .pc-hbar-track i{display:block;height:100%;border-radius:4px} .sim-lx .pc-hbar-sub{font-size:11px;color:var(--text-3);margin-top:4px} /* Charts are drawn, not mirrored. An axis reads left-to-right in both directions, exactly as a number does. Only the legend column flips. */ .sim-lx [dir="rtl"] .pc-hbar-label,.sim-lx [dir="rtl"] .pc-hbar-val{direction:rtl} /* ── TABS + SEGMENTED ──────────────────────────────────────────────────── .nav-tabs / .nav-link / .tab-pane names match the Bootstrap JS contract so data-bs-toggle="tab" keeps working. Appearance only. ────────────────────────────────────────────────────────────────────── */ .sim-lx .tabs,.sim-lx .nav-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line); margin-bottom:16px} .sim-lx .tabs a,.sim-lx .nav-tabs .nav-link{padding:0 14px;height:38px;display:inline-flex; align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text-2); border:0;border-bottom:2px solid transparent;background:none;cursor:pointer} .sim-lx .tabs a:hover,.sim-lx .nav-tabs .nav-link:hover{color:var(--text-1);text-decoration:none} .sim-lx .tabs a.on,.sim-lx .nav-tabs .nav-link.active{color:var(--accent-600); border-bottom-color:var(--accent-600)} .sim-lx .tabs .cnt,.sim-lx .nav-tabs .cnt{font-size:11px;font-weight:700;padding:1px 7px; border-radius:var(--r-full);background:var(--surface-2);color:var(--text-2)} .sim-lx .tab-pane{display:none} .sim-lx .tab-pane.active{display:block} .sim-lx .seg{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px} .sim-lx .seg button,.sim-lx .seg a{height:26px;padding:0 12px;border:0;background:transparent; border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer; display:inline-flex;align-items:center} .sim-lx .seg button.on,.sim-lx .seg a.on{background:var(--surface);color:var(--navy-900); box-shadow:var(--sh-1);text-decoration:none} /* ── DROPDOWN · row overflow menu ──────────────────────────────────────── Table rows carry at most two inline actions, then everything else lives behind a menu. Class names match the Bootstrap JS contract. ────────────────────────────────────────────────────────────────────── */ .sim-lx .dropdown{position:relative} .sim-lx .dropdown-menu{position:absolute;z-index:1000;display:none;min-width:190px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--sh-2);padding:6px;inset-inline-end:0;margin-top:4px} .sim-lx .dropdown-menu.show{display:block} .sim-lx .dropdown-item{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px; border-radius:var(--r-sm);font-size:13.5px;color:var(--text-2);width:100%; text-align:start;background:none;border:0;cursor:pointer} .sim-lx .dropdown-item:hover{background:var(--surface-2);color:var(--text-1);text-decoration:none} .sim-lx .dropdown-item.danger{color:var(--danger)} .sim-lx .dropdown-item.danger:hover{background:var(--danger-wash);color:var(--danger-ink)} .sim-lx .dropdown-divider{height:1px;background:var(--line-soft);margin:5px 0} .sim-lx .dropdown-header{font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3);padding:8px 10px 4px} /* Notification row - built by _Notifications.cshtml. Unread is carried by a class, not by a colour set in script, so the palette stays in the CSS. */ .sim-lx .notif-item{display:block;width:100%;text-align:start;padding:9px 10px; border:0;background:none;border-radius:var(--r-sm);cursor:pointer} .sim-lx .notif-item:hover{background:var(--surface-2)} .sim-lx .notif-item .t{display:block;font-size:13px;font-weight:500;color:var(--text-1)} .sim-lx .notif-item .m{display:block;font-size:12px;color:var(--text-2);margin-top:2px} .sim-lx .notif-item .w{display:block;font-size:11px;color:var(--text-3); font-family:var(--mono);margin-top:3px} .sim-lx .notif-item.unread{background:var(--accent-050)} .sim-lx .notif-item.unread .t{font-weight:700} .sim-lx .notif-item.unread:hover{background:var(--accent-100)} .sim-lx #notifDropdown{width:340px;max-height:420px;overflow-y:auto} .sim-lx #notifDropdown .empty{padding:24px 12px} .sim-lx #notifDropdown .empty p{margin-bottom:0} /* ── TIMELINE / FEED ───────────────────────────────────────────────────── The owner's activity log reads as a story, not a table. Chronology is the information, so the spine carries it and the rows do not repeat a date column twelve times. ────────────────────────────────────────────────────────────────────── */ .sim-lx .feed{position:relative;padding-inline-start:22px} .sim-lx .feed::before{content:"";position:absolute;inset-inline-start:6px;top:6px;bottom:6px; width:1px;background:var(--line)} .sim-lx .feed .it{position:relative;padding:11px 0} .sim-lx .feed .it::before{content:"";position:absolute;inset-inline-start:-19px;top:16px; width:9px;height:9px;border-radius:50%;background:var(--line-hard); border:2px solid var(--surface)} .sim-lx .feed .it.acc::before{background:var(--accent-600)} .sim-lx .feed .it.bad::before{background:var(--danger)} .sim-lx .feed .it.ok::before{background:var(--success)} .sim-lx .feed .it.warn::before{background:var(--warning)} .sim-lx .feed .w{font-size:13.5px;line-height:20px;color:var(--text-2)} .sim-lx .feed .w b{color:var(--text-1);font-weight:600} .sim-lx .feed .t{font-size:11.5px;color:var(--text-3);font-family:var(--mono);margin-top:3px} .sim-lx .feed .day{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--text-3);padding:14px 0 4px} /* Stepper - approval route progress. */ .sim-lx .stepper{display:flex;align-items:center;gap:0} .sim-lx .stepper .st{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3)} .sim-lx .stepper .st .n{width:22px;height:22px;border-radius:50%;background:var(--surface-2); color:var(--text-3);display:grid;place-items:center;font-size:11px;font-weight:700} .sim-lx .stepper .st.done .n{background:var(--success);color:var(--on-fill)} .sim-lx .stepper .st.now .n{background:var(--accent-600);color:var(--on-fill)} .sim-lx .stepper .st.now{color:var(--text-1);font-weight:600} .sim-lx .stepper .ln{flex:1;height:1px;background:var(--line);margin:0 10px;min-width:24px} /* Notification list. An unread row is marked by weight and a wash, not by a badge on every row - a badge on almost every row carries no information. */ .sim-lx .pn-list{display:flex;flex-direction:column} .sim-lx .pn-item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px; border-bottom:1px solid var(--line-soft)} .sim-lx .pn-item:last-child{border-bottom:0} .sim-lx .pn-item.is-unread{background:var(--accent-050)} .sim-lx .pn-icon{width:30px;height:30px;flex:0 0 30px;border-radius:50%; display:grid;place-items:center;background:var(--surface-2);color:var(--text-2)} .sim-lx .pn-icon.k-warn{background:var(--warning-wash);color:var(--warning-ink)} .sim-lx .pn-icon.k-danger{background:var(--danger-wash);color:var(--danger-ink)} .sim-lx .pn-icon.k-success{background:var(--success-wash);color:var(--success-ink)} .sim-lx .pn-icon.k-info{background:var(--info-wash);color:var(--info-ink)} .sim-lx .pn-body{flex:1;min-width:0} .sim-lx .pn-title{font-size:14px;font-weight:600;color:var(--text-1)} .sim-lx .pn-item.is-unread .pn-title{font-weight:700} .sim-lx .pn-msg{font-size:13px;color:var(--text-2);margin-top:2px} .sim-lx .pn-time{font-size:11px;color:var(--text-3);margin-top:4px} /* ── SKELETON · never a spinner over a blank table ────────────────────── */ .sim-lx .sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line-soft) 37%,var(--surface-2) 63%); background-size:400% 100%;animation:lx-sk 1.4s ease infinite;border-radius:var(--r-sm)} .sim-lx .sk-line{height:12px;margin:6px 0} .sim-lx .sk-line.w40{width:40%}.sim-lx .sk-line.w60{width:60%}.sim-lx .sk-line.w80{width:80%} .sim-lx .sk-row{height:var(--d-row);border-bottom:1px solid var(--line-soft)} @keyframes lx-sk{0%{background-position:100% 50%}100%{background-position:0 50%}} @media (prefers-reduced-motion:reduce){.sim-lx .sk{animation:none}} /* ── TOOLTIP · icon-only buttons need aria-label AND this ─────────────── */ .sim-lx .tip{position:relative} .sim-lx .tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px); left:50%;transform:translateX(-50%);background:var(--navy-900);color:var(--on-fill); font-size:12px;line-height:16px;padding:5px 8px;border-radius:var(--r-sm); white-space:nowrap;opacity:0;pointer-events:none; transition:opacity var(--t-fast) var(--ease);z-index:1090} .sim-lx .tip:hover::after,.sim-lx .tip:focus-visible::after{opacity:1} /* ── SWITCH · the whole Tijara Admin console is nine of these ──────────── */ /* Markup: A switch inside a form field (.f) used to inherit `.f label` (display:block, 11px uppercase): the track span fell back to an inline box, lost its width and height, and only the absolutely-positioned knob was left - a bare white circle over the text. The `.f` selectors below out-rank the field styles, and the track is an inline-block on its own, so the component holds anywhere. */ .sim-lx .switch,.sim-lx .f label.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer; position:relative;margin:0;min-height:24px; font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--text-1); user-select:none} .sim-lx .switch input,.sim-lx .f .switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0; border:0;overflow:hidden;clip-path:inset(50%);pointer-events:none} .sim-lx .switch .track{display:inline-block;box-sizing:border-box;width:40px;height:22px;border-radius:var(--r-full); background:var(--line-hard);position:relative;flex:0 0 40px; transition:background var(--t-fast) var(--ease)} .sim-lx .switch .track::after{content:"";position:absolute;top:2px;inset-inline-start:2px; width:18px;height:18px;border-radius:50%;background:var(--on-fill);box-shadow:var(--sh-1); transition:transform var(--t-fast) var(--ease)} .sim-lx .switch input:checked + .track{background:var(--accent-600)} .sim-lx .switch input:checked + .track::after{transform:translateX(18px)} .sim-lx[dir="rtl"] .switch input:checked + .track::after{transform:translateX(-18px)} .sim-lx .switch input:focus-visible + .track{outline:2px solid var(--accent-500);outline-offset:2px} .sim-lx .switch input[disabled] + .track{opacity:.5;cursor:not-allowed} .sim-lx .switch .lb{font-size:14px;font-weight:500} .sim-lx .switch .st{font-size:12px;color:var(--text-3)} /* The state word beside the track: "On" in the accent ink, "Off" muted. */ .sim-lx .switch .st-on{display:none;font-weight:600;color:var(--accent-700)} .sim-lx .switch .st-off{color:var(--text-3)} .sim-lx .switch input:checked ~ .st-on{display:inline} .sim-lx .switch input:checked ~ .st-off{display:none} /* ============================================================================ ROUND 2 ADDITIONS ============================================================================ Everything Round 2 needed that the 24 components did not already carry. One file rather than five, because these are a handful of rules each and a file per screen is how a component library turns back into a pile of stylesheets. THE REASON THIS FILE EXISTS AT ALL: the approved mockups draw the tree thumbnails, the indent and the audience rows with inline style attributes. The acceptance test for the redesign is that inline style= reaches zero, so the mockup's inline rules are transcribed here and the views carry classes. LOGICAL PROPERTIES ONLY — no margin-left, no padding-right. RTL is a requirement, and this one rule is what makes it nearly free. ============================================================================ */ /* ── the category tree ─────────────────────────────────────────────────── */ /* The image column. Fixed at 28px per R2-3: the picture exists for the shopper, and a buyer filing sixty categories wants a table, not a gallery. */ .sim-lx .ct-thumb { display: inline-block; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: var(--accent-050); border: 1px solid var(--line); vertical-align: middle; } /* No image. A dash, not an empty cell — an empty cell reads as a rendering fault, and "—" reads as an answer. */ .sim-lx .ct-nothumb { font-size: 11px; color: var(--text-3); } .sim-lx .ct-check { width: 34px; } .sim-lx .ct-imgcol { width: 52px; } /* Depth is expressed as indent and nothing else. No guide lines, no chevrons on the leaves: three levels is shallow enough that indent alone is legible, and the tree is read far more often than it is restructured. */ .sim-lx .ct-d1 { padding-inline-start: 34px; } .sim-lx .ct-d2 { padding-inline-start: 62px; } /* The marker on a row that has children. Purely typographic, so it inherits colour and flips with direction. */ .sim-lx .ct-branch { color: var(--text-3); margin-inline-end: 4px; } /* The subtree total, beside a parent's own count. A department shows what is filed under the whole of it, because that is the number a buyer is asking for when they look at a department at all. */ .sim-lx .ct-sub { font-size: 11px; color: var(--text-3); margin-inline-start: 6px; } /* The bar that appears once something is ticked. It replaces nothing: the header buttons stay where they were, and this appears under them with the count, so the user can see how many rows the next click will move. */ .sim-lx .ct-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--accent-050); border: 1px solid var(--accent-100); border-radius: var(--r-md); margin-bottom: 16px; } .sim-lx .ct-bar .n { font-weight: 600; color: var(--text-1); } .sim-lx .ct-bar .sp { margin-inline-start: auto; } /* ── the audience builder ──────────────────────────────────────────────── */ /* One condition. A row of controls that reads as a sentence left to right, because that is how the person building it says it out loud. */ .sim-lx .aud-cond { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: 10px; } .sim-lx .aud-cond .f { margin-bottom: 0; } .sim-lx .aud-cond .grow { flex: 1; min-width: 200px; } .sim-lx .aud-cond .drop { margin-inline-start: auto; } /* The AND between two conditions. Said once, quietly, rather than repeated on every control — the builder only does AND (R2-7) and pretending otherwise with an operator dropdown would promise an OR that does not exist. */ .sim-lx .aud-and { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px 0; padding-inline-start: 14px; } /* The live size panel. The number is the point of the screen, so it gets the metric treatment; the consent split under it is what decides whether the number is real. */ .sim-lx .aud-size { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; } .sim-lx .aud-size .big { font-size: 40px; line-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-1); } .sim-lx .aud-size .k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .sim-lx .aud-size .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .sim-lx .aud-size .v.bad { color: var(--danger); } /* ── warehouse ─────────────────────────────────────────────────────────── */ /* Nothing new is introduced here — the tiles are the existing .metric component. This is the one rule the stock screen needed: the movements link sits in the row's action cell and must not wrap the row taller. */ .sim-lx .wh-drill { white-space: nowrap; } /* ============================================================================ LX · UTILITIES A short, closed list. Every value comes off the 4px grid. These exist so a view never needs an inline style - the acceptance test for the whole redesign is that the inline style= count reaches zero. LOGICAL PROPERTIES ONLY. There is no margin-left in this library. That single rule is what makes RTL almost free instead of a month. ========================================================================== */ .sim-lx .row{display:flex;align-items:center} .sim-lx .row.top{align-items:flex-start} .sim-lx .row.wrap{flex-wrap:wrap} .sim-lx .stack{display:flex;flex-direction:column} .sim-lx .grow{flex:1} .sim-lx .shrink0{flex-shrink:0} .sim-lx .between{justify-content:space-between} .sim-lx .center{justify-content:center} .sim-lx .end{justify-content:flex-end} .sim-lx .middle{align-items:center} .sim-lx .gap4{gap:4px}.sim-lx .gap6{gap:6px}.sim-lx .gap8{gap:8px}.sim-lx .gap10{gap:10px} .sim-lx .gap12{gap:12px}.sim-lx .gap16{gap:16px}.sim-lx .gap24{gap:24px} .sim-lx .mt4{margin-top:4px}.sim-lx .mt8{margin-top:8px}.sim-lx .mt12{margin-top:12px} .sim-lx .mt16{margin-top:16px}.sim-lx .mt24{margin-top:24px}.sim-lx .mt32{margin-top:32px} .sim-lx .mb4{margin-bottom:4px}.sim-lx .mb8{margin-bottom:8px}.sim-lx .mb12{margin-bottom:12px} .sim-lx .mb16{margin-bottom:16px}.sim-lx .mb24{margin-bottom:24px}.sim-lx .mb32{margin-bottom:32px} .sim-lx .ms-auto{margin-inline-start:auto} .sim-lx .me-auto{margin-inline-end:auto} .sim-lx .p0{padding:0}.sim-lx .p8{padding:8px}.sim-lx .p12{padding:12px}.sim-lx .p16{padding:16px}.sim-lx .p24{padding:24px} .sim-lx .txt-start{text-align:start}.sim-lx .txt-end{text-align:end}.sim-lx .txt-center{text-align:center} .sim-lx .w100{width:100%}.sim-lx .mw0{min-width:0} .sim-lx .hide{display:none} .sim-lx .ok{color:var(--success)}.sim-lx .warn{color:var(--warning-ink)}.sim-lx .bad{color:var(--danger)} .sim-lx .acc{color:var(--accent-600)} @media(max-width:720px){.sim-lx .hide-sm{display:none}} @media(max-width:1180px){.sim-lx .hide-md{display:none}} @media print{ .sim-lx .lx-side,.sim-lx .lx-top,.sim-lx .page-head .acts,.sim-lx .filters,.sim-lx .btn,.sim-lx .pager,.sim-lx .no-print{display:none!important} .sim-lx .lx-content{padding:0;max-width:none} .sim-lx .card{border:1px solid var(--line-hard);box-shadow:none} .sim-lx{background:var(--surface)} } /* ============================================================================ LX · COMPAT — read the header before deleting anything here Bootstrap's CSS is REMOVED. bootstrap.bundle.js is KEPT, because eight views drive modals, dropdowns, tabs and dismissible alerts through data-bs-* attributes, and removing the JS would change what those screens DO. This redesign changes appearance only. Bootstrap's JS toggles a small, stable set of class names. Those class names are styled in modal.css, dropdown.css, tabs.css and toast.css using LX tokens. This file covers the remainder of that contract. When Bootstrap JS is retired in a later pass, this file is deleted with it. ========================================================================== */ .sim-lx .fade{transition:opacity var(--t-mid) var(--ease)} .sim-lx .fade:not(.show){opacity:0} .sim-lx .collapse:not(.show){display:none} .sim-lx .collapsing{height:0;overflow:hidden;transition:height var(--t-mid) var(--ease)} .sim-lx .modal-open{overflow:hidden} .sim-lx .d-none{display:none!important} .sim-lx .invisible{visibility:hidden} /* ============================================================================ LX · RTL Nearly everything is already direction-agnostic because the library uses logical properties throughout. This file is only for the handful of things logical properties cannot express. Rules: · Directional icons flip. Logos, charts, progress bars and clocks do NOT. · Numbers, currency and dates stay LTR inside RTL text. ========================================================================== */ .sim-lx[dir="rtl"] .icon-flip{transform:scaleX(-1)} .sim-lx[dir="rtl"] .no-flip{transform:none} /* A figure keeps its own direction so "1,284.50" never renders as "50.284,1". */ .sim-lx[dir="rtl"] .num,.sim-lx[dir="rtl"] .money,.sim-lx[dir="rtl"] .qty,.sim-lx[dir="rtl"] .metric-val,.sim-lx[dir="rtl"] .ledger .v,.sim-lx[dir="rtl"] .mono,.sim-lx[dir="rtl"] td.num,.sim-lx[dir="rtl"] input[type="number"],.sim-lx[dir="rtl"] input[type="tel"]{ direction:ltr;unicode-bidi:isolate} .sim-lx[dir="rtl"] td.num,.sim-lx[dir="rtl"] th.num{text-align:left} /* Charts are drawn, not laid out - they must not mirror. */ .sim-lx[dir="rtl"] .chart-wrap,.sim-lx[dir="rtl"] canvas,.sim-lx[dir="rtl"] .bar,.sim-lx[dir="rtl"] .lx-brand .mark{direction:ltr} .sim-lx[dir="rtl"] .tip::after{left:auto;right:50%;transform:translateX(50%)} /* ============================================================================ LX · BRAND — the ONLY file a customer branch may change for colour (§8.6: a customer branch may touch brand tokens, configuration, seed data and custom reports. Nothing else.) Leave empty for the core product. A customer override sets values here and nowhere else, so `git diff core..customer` stays on one screen. Example: :root{ --accent-600:#0F766E; --accent-500:#14867C; --accent-700:#0B5C55; } ========================================================================== */