/* WRD Cable ERP — the browser client's stylesheet. THE PALETTE IS NOT NEW. Every colour below is the value WrdPalette.cs already defines for the desktop client, copied deliberately so the two clients are recognisably one product. A web client that invented its own colours would be a second brand as well as a second screen. RTL IS THE DEFAULT, NOT A SKIN. The document is dir="rtl"; every rule here uses logical properties (inline-start / inline-end, margin-inline, border-inline) rather than left and right, so the direction is stated once, on the element, and nothing else has to know. Rules written with `left` are what make an RTL layout a permanent maintenance tax. THERE IS NO MINIMUM WIDTH. The old desktop shell had one and it trapped anybody on a phone; this file starts from the narrow layout and ADDS the sidebar at 900px. A layout built the other way around always leaves something overflowing at 360px. */ :root { /* Surfaces */ --wrd-canvas: #F1F4F8; --wrd-surface: #FFFFFF; --wrd-surface-sunk: #F7F9FC; --wrd-border: #E2E7EE; --wrd-divider: #EDF1F6; /* Brand */ --wrd-primary: #7E3A6A; --wrd-primary-hover: #93477D; --wrd-primary-pressed: #5F2B50; --wrd-primary-wash: #F8F1F6; /* Navigation */ --wrd-nav: #2B2033; --wrd-nav-active: #3D2E48; --wrd-nav-text: #DDD6E3; --wrd-nav-muted: #9A8DA5; /* Text */ --wrd-ink: #14171D; --wrd-ink-secondary: #454C59; --wrd-ink-muted: #6B7382; --wrd-ink-on-primary: #FFFFFF; /* Status */ --wrd-success: #10684A; --wrd-success-wash: #E6F2EC; --wrd-success-line: #BFDFD1; --wrd-warning: #8A4B08; --wrd-warning-wash: #FBF0E1; --wrd-warning-line: #EBD3B0; --wrd-danger: #AE2A26; --wrd-danger-wash: #FBEAE9; --wrd-danger-line: #EFC5C3; --wrd-info: #1C5B96; --wrd-info-wash: #E7EFF7; --wrd-info-line: #C3D6E8; --wrd-neutral-wash: #EFF2F6; --wrd-hover: #F7F8FB; --wrd-selection: #F5ECF3; /* Arabic first. Segoe UI and Tahoma are present on every Windows machine in the factory and both carry a complete Arabic set; the rest are the platform faces on the phones and tablets operators actually hold. Nothing is downloaded — a factory network is not a place to depend on a font CDN, and the content security policy forbids it anyway. */ --wrd-font: "Segoe UI", "Noto Sans Arabic", "Dubai", Tahoma, "Arial", sans-serif; /* An ERP is read at arm's length on a shop floor. 15px is the smallest honest body. */ --wrd-text: 0.9375rem; --wrd-text-sm: 0.8125rem; --wrd-text-lg: 1.0625rem; --wrd-radius: 6px; --wrd-radius-lg: 10px; --wrd-space-1: 4px; --wrd-space-2: 8px; --wrd-space-3: 12px; --wrd-space-4: 16px; --wrd-space-5: 24px; --wrd-space-6: 32px; --wrd-header-height: 56px; --wrd-nav-width: 244px; --wrd-shadow: 0 1px 2px rgba(20, 23, 29, 0.06), 0 1px 3px rgba(20, 23, 29, 0.08); --wrd-shadow-lg: 0 8px 28px rgba(20, 23, 29, 0.18); } *, *::before, *::after { box-sizing: border-box; } html { /* No horizontal trap, at any width. */ overflow-x: hidden; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--wrd-font); font-size: var(--wrd-text); line-height: 1.6; color: var(--wrd-ink); background: var(--wrd-canvas); } h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.35; color: var(--wrd-ink); } h1 { font-size: 1.375rem; } h2 { font-size: 1.125rem; } h3 { font-size: 1rem; } a { color: var(--wrd-primary); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--wrd-primary); outline-offset: 2px; } /* ------------------------------------------------------------------------------------ SHELL ------------------------------------------------------------------------------------ */ .wrd-shell { min-height: 100vh; display: flex; flex-direction: column; } .wrd-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--wrd-space-3); min-height: var(--wrd-header-height); padding: 0 var(--wrd-space-3); background: var(--wrd-nav); color: var(--wrd-nav-text); } .wrd-brand { display: flex; flex-direction: column; min-width: 0; } .wrd-brand__name { font-size: var(--wrd-text); font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wrd-brand__product { font-size: 0.6875rem; color: var(--wrd-nav-muted); letter-spacing: 0.02em; } .wrd-header__spacer { flex: 1 1 auto; } .wrd-user { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; text-align: end; } .wrd-user__name { font-size: var(--wrd-text-sm); font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } .wrd-user__meta { font-size: 0.6875rem; color: var(--wrd-nav-muted); white-space: nowrap; } /* The mobile drawer is opened by a checkbox, so the shell needs no script at all. */ .wrd-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .wrd-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--wrd-radius); font-size: 1.25rem; color: var(--wrd-nav-text); cursor: pointer; user-select: none; } .wrd-burger:hover { background: var(--wrd-nav-active); } .wrd-body { flex: 1 1 auto; display: flex; align-items: stretch; min-width: 0; } .wrd-nav { position: fixed; top: var(--wrd-header-height); bottom: 0; inset-inline-start: 0; z-index: 25; width: var(--wrd-nav-width); padding: var(--wrd-space-3) var(--wrd-space-2); background: var(--wrd-nav); overflow-y: auto; transform: translateX(100%); transition: transform 160ms ease; } /* Off-canvas travels toward the inline start, which is the RIGHT edge in Arabic. */ [dir="ltr"] .wrd-nav { transform: translateX(-100%); } .wrd-nav-toggle:checked ~ .wrd-shell .wrd-nav { transform: translateX(0); } .wrd-nav__section { padding: var(--wrd-space-2) var(--wrd-space-3) var(--wrd-space-1); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--wrd-nav-muted); } .wrd-nav__link { display: flex; align-items: center; gap: var(--wrd-space-3); padding: 10px var(--wrd-space-3); margin-bottom: 2px; border-radius: var(--wrd-radius); color: var(--wrd-nav-text); font-size: var(--wrd-text); text-decoration: none; } .wrd-nav__link:hover { background: var(--wrd-nav-active); text-decoration: none; } .wrd-nav__link--active { background: var(--wrd-primary); color: var(--wrd-ink-on-primary); font-weight: 600; } .wrd-nav__icon { flex: 0 0 auto; width: 1.25rem; text-align: center; opacity: 0.9; } .wrd-scrim { display: none; position: fixed; inset: var(--wrd-header-height) 0 0 0; z-index: 20; background: rgba(20, 23, 29, 0.45); } .wrd-nav-toggle:checked ~ .wrd-shell .wrd-scrim { display: block; } .wrd-main { flex: 1 1 auto; min-width: 0; padding: var(--wrd-space-4) var(--wrd-space-3) var(--wrd-space-6); } .wrd-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--wrd-space-3); margin-bottom: var(--wrd-space-4); } .wrd-page-head__titles { min-width: 0; flex: 1 1 260px; } .wrd-page-head__subtitle { margin-top: var(--wrd-space-1); font-size: var(--wrd-text-sm); color: var(--wrd-ink-muted); } .wrd-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--wrd-space-2); } /* ------------------------------------------------------------------------------------ SURFACES ------------------------------------------------------------------------------------ */ .wrd-card { background: var(--wrd-surface); border: 1px solid var(--wrd-border); border-radius: var(--wrd-radius-lg); box-shadow: var(--wrd-shadow); padding: var(--wrd-space-4); margin-bottom: var(--wrd-space-4); } .wrd-card__title { margin-bottom: var(--wrd-space-3); padding-bottom: var(--wrd-space-2); border-bottom: 1px solid var(--wrd-divider); } .wrd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--wrd-space-3); margin-bottom: var(--wrd-space-4); } .wrd-tile { background: var(--wrd-surface); border: 1px solid var(--wrd-border); border-radius: var(--wrd-radius-lg); box-shadow: var(--wrd-shadow); padding: var(--wrd-space-4); } .wrd-tile__label { font-size: var(--wrd-text-sm); color: var(--wrd-ink-muted); } .wrd-tile__value { margin-top: var(--wrd-space-1); font-size: 1.5rem; font-weight: 600; color: var(--wrd-ink); } .wrd-tile__note { margin-top: var(--wrd-space-1); font-size: var(--wrd-text-sm); color: var(--wrd-ink-secondary); } .wrd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--wrd-space-3) var(--wrd-space-5); } .wrd-fact__label { font-size: var(--wrd-text-sm); color: var(--wrd-ink-muted); } .wrd-fact__value { font-weight: 600; color: var(--wrd-ink); overflow-wrap: anywhere; } /* ------------------------------------------------------------------------------------ FORMS ------------------------------------------------------------------------------------ */ .wrd-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--wrd-space-4); } .wrd-field { display: flex; flex-direction: column; min-width: 0; } .wrd-field--wide { grid-column: 1 / -1; } .wrd-field__label { margin-bottom: var(--wrd-space-1); font-size: var(--wrd-text-sm); font-weight: 600; color: var(--wrd-ink-secondary); } .wrd-field__hint { margin-top: var(--wrd-space-1); font-size: var(--wrd-text-sm); color: var(--wrd-ink-muted); } .wrd-input, .wrd-select, .wrd-textarea { width: 100%; /* 16px on touch: anything smaller makes iOS Safari zoom the whole page on focus. */ font: inherit; font-size: max(var(--wrd-text), 16px); color: var(--wrd-ink); background: var(--wrd-surface); border: 1px solid var(--wrd-border); border-radius: var(--wrd-radius); padding: 9px var(--wrd-space-3); min-height: 42px; } .wrd-textarea { min-height: 92px; resize: vertical; } .wrd-input:focus, .wrd-select:focus, .wrd-textarea:focus { border-color: var(--wrd-primary); outline: 2px solid var(--wrd-primary-wash); outline-offset: 0; } .wrd-input[readonly] { background: var(--wrd-surface-sunk); color: var(--wrd-ink-secondary); } .wrd-check { display: flex; align-items: center; gap: var(--wrd-space-2); min-height: 42px; } .wrd-check input { width: 18px; height: 18px; accent-color: var(--wrd-primary); } .wrd-field-error { margin-top: var(--wrd-space-1); font-size: var(--wrd-text-sm); color: var(--wrd-danger); } .wrd-actions { display: flex; flex-wrap: wrap; gap: var(--wrd-space-2); margin-top: var(--wrd-space-4); padding-top: var(--wrd-space-4); border-top: 1px solid var(--wrd-divider); } /* ------------------------------------------------------------------------------------ BUTTONS ------------------------------------------------------------------------------------ */ .wrd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wrd-space-2); /* 44px is the smallest target a gloved hand hits reliably. */ min-height: 44px; padding: 0 var(--wrd-space-4); font: inherit; font-weight: 600; border: 1px solid var(--wrd-border); border-radius: var(--wrd-radius); background: var(--wrd-surface); color: var(--wrd-ink); cursor: pointer; text-decoration: none; } .wrd-btn:hover { background: var(--wrd-hover); text-decoration: none; } .wrd-btn--primary { background: var(--wrd-primary); border-color: var(--wrd-primary); color: var(--wrd-ink-on-primary); } .wrd-btn--primary:hover { background: var(--wrd-primary-hover); border-color: var(--wrd-primary-hover); } .wrd-btn--primary:active { background: var(--wrd-primary-pressed); border-color: var(--wrd-primary-pressed); } .wrd-btn--quiet { background: transparent; border-color: transparent; color: var(--wrd-nav-text); } .wrd-btn--quiet:hover { background: var(--wrd-nav-active); } .wrd-btn--block { width: 100%; } .wrd-btn:disabled { opacity: 0.55; cursor: not-allowed; } /* ------------------------------------------------------------------------------------ ALERTS AND BADGES ------------------------------------------------------------------------------------ */ .wrd-alert { padding: var(--wrd-space-3) var(--wrd-space-4); border: 1px solid var(--wrd-border); border-radius: var(--wrd-radius); margin-bottom: var(--wrd-space-4); } .wrd-alert ul { margin: 0; padding-inline-start: var(--wrd-space-4); } .wrd-alert--error { background: var(--wrd-danger-wash); border-color: var(--wrd-danger-line); color: var(--wrd-danger); } .wrd-alert--success { background: var(--wrd-success-wash); border-color: var(--wrd-success-line); color: var(--wrd-success); } .wrd-alert--info { background: var(--wrd-info-wash); border-color: var(--wrd-info-line); color: var(--wrd-info); } .wrd-alert--warning { background: var(--wrd-warning-wash); border-color: var(--wrd-warning-line); color: var(--wrd-warning); } .wrd-badge { display: inline-block; padding: 2px var(--wrd-space-2); border-radius: 999px; font-size: var(--wrd-text-sm); font-weight: 600; background: var(--wrd-neutral-wash); color: var(--wrd-ink-secondary); } .wrd-badge--on { background: var(--wrd-success-wash); color: var(--wrd-success); } .wrd-badge--off { background: var(--wrd-danger-wash); color: var(--wrd-danger); } /* ------------------------------------------------------------------------------------ SEARCH BAR ------------------------------------------------------------------------------------ */ .wrd-searchbar { display: flex; flex-wrap: wrap; gap: var(--wrd-space-2); margin-bottom: var(--wrd-space-4); } .wrd-searchbar__field { flex: 1 1 220px; min-width: 0; } /* ------------------------------------------------------------------------------------ LIST — one dataset, two presentations. The table is the right shape for a desktop: many columns, scanned by eye, sorted by code. On a phone the same table would either shrink the text past reading or trap the operator in a sideways scroll, so below 760px the table is hidden and the same rows are drawn as cards. Both are rendered from the same model; neither is a second query. ------------------------------------------------------------------------------------ */ .wrd-table-wrap { display: none; overflow-x: auto; border: 1px solid var(--wrd-border); border-radius: var(--wrd-radius-lg); background: var(--wrd-surface); } .wrd-table { width: 100%; border-collapse: collapse; font-size: var(--wrd-text); } .wrd-table th, .wrd-table td { padding: var(--wrd-space-3); text-align: start; border-bottom: 1px solid var(--wrd-divider); vertical-align: middle; } .wrd-table th { background: var(--wrd-surface-sunk); font-size: var(--wrd-text-sm); font-weight: 600; color: var(--wrd-ink-secondary); white-space: nowrap; } .wrd-table tbody tr:hover { background: var(--wrd-hover); } .wrd-table tbody tr:last-child td { border-bottom: none; } .wrd-table__code { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .wrd-cards { display: grid; gap: var(--wrd-space-3); } /* A grid that stays a grid at every width. .wrd-cards is the phone half of the list pair and is hidden from 760px up; anything that must remain visible — the dashboard shortcuts — uses this instead. The content security policy forbids inline style attributes, so an override like this has to be a class. */ .wrd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--wrd-space-3); } .wrd-rowcard { display: block; background: var(--wrd-surface); border: 1px solid var(--wrd-border); border-radius: var(--wrd-radius-lg); box-shadow: var(--wrd-shadow); padding: var(--wrd-space-3) var(--wrd-space-4); color: inherit; text-decoration: none; } .wrd-rowcard:hover { background: var(--wrd-hover); text-decoration: none; } .wrd-rowcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wrd-space-2); } .wrd-rowcard__code { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wrd-primary); } .wrd-rowcard__name { margin-top: var(--wrd-space-1); font-weight: 600; overflow-wrap: anywhere; } .wrd-rowcard__meta { margin-top: var(--wrd-space-1); font-size: var(--wrd-text-sm); color: var(--wrd-ink-muted); overflow-wrap: anywhere; } .wrd-empty { padding: var(--wrd-space-6) var(--wrd-space-4); text-align: center; color: var(--wrd-ink-muted); background: var(--wrd-surface); border: 1px dashed var(--wrd-border); border-radius: var(--wrd-radius-lg); } .wrd-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wrd-space-2); margin-top: var(--wrd-space-4); } .wrd-pager__status { font-size: var(--wrd-text-sm); color: var(--wrd-ink-muted); } .wrd-pager__links { display: flex; gap: var(--wrd-space-2); } /* ------------------------------------------------------------------------------------ SIGN-IN AND GATE PAGES ------------------------------------------------------------------------------------ */ .wrd-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--wrd-space-4); background: var(--wrd-canvas); } .wrd-auth__panel { width: 100%; max-width: 420px; background: var(--wrd-surface); border: 1px solid var(--wrd-border); border-radius: var(--wrd-radius-lg); box-shadow: var(--wrd-shadow-lg); padding: var(--wrd-space-5); } .wrd-auth__brand { text-align: center; margin-bottom: var(--wrd-space-5); } .wrd-auth__mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--wrd-primary); color: var(--wrd-ink-on-primary); font-weight: 700; letter-spacing: 0.04em; } .wrd-auth__title { margin-top: var(--wrd-space-3); } .wrd-auth__subtitle { margin-top: var(--wrd-space-1); font-size: var(--wrd-text-sm); color: var(--wrd-ink-muted); } .wrd-auth__stack { display: grid; gap: var(--wrd-space-4); } /* ------------------------------------------------------------------------------------ BREAKPOINTS 760px — the phone/tablet line: the list stops being cards and becomes a table. 900px — the tablet/laptop line: the drawer becomes a permanent sidebar and the burger disappears. Chosen so a 1024x768 tablet in landscape gets the sidebar and the same tablet held upright does not. 1280px — a comfortable reading measure on a wide monitor; the content stops growing rather than stretching a table across 2560 pixels. ------------------------------------------------------------------------------------ */ /* WHO THE HEADER BELONGS TO, BY WIDTH. At 360px the strip has room for the burger, ONE identity and the way out. Showing both the company and the person there ellipsised both — the deployed trial rendered "...D Cable ERP" beside "...em Administrator", which names neither. The company wins the header, because it is what tells an operator which installation they are looking at, and the person moves into the drawer where there is room to say it in full. */ .wrd-nav__user { display: none; padding: var(--wrd-space-3); margin-bottom: var(--wrd-space-2); border-bottom: 1px solid var(--wrd-nav-active); } .wrd-nav__user-name { font-weight: 600; color: #FFFFFF; overflow-wrap: anywhere; } .wrd-nav__user-meta { margin-top: 2px; font-size: var(--wrd-text-sm); color: var(--wrd-nav-muted); overflow-wrap: anywhere; } @media (max-width: 599px) { .wrd-brand__product { display: none; } /* The person is in the drawer at this width, not in the header. */ .wrd-user { display: none; } .wrd-nav__user { display: block; } .wrd-header { gap: var(--wrd-space-2); } } @media (min-width: 760px) { .wrd-table-wrap { display: block; } .wrd-cards { display: none; } .wrd-main { padding-inline: var(--wrd-space-5); } } @media (min-width: 900px) { .wrd-burger { display: none; } .wrd-nav { position: sticky; top: var(--wrd-header-height); height: calc(100vh - var(--wrd-header-height)); transform: none; flex: 0 0 var(--wrd-nav-width); } [dir="ltr"] .wrd-nav { transform: none; } .wrd-scrim { display: none !important; } .wrd-main { padding: var(--wrd-space-5) var(--wrd-space-6) var(--wrd-space-6); } } @media (min-width: 1280px) { .wrd-main__inner { max-width: 1200px; } } @media (prefers-reduced-motion: reduce) { .wrd-nav { transition: none; } } @media print { .wrd-header, .wrd-nav, .wrd-scrim, .wrd-actions { display: none; } body { background: #FFFFFF; } }