/* ============================================================================ BOTMS — application stylesheet. Built on the Burgan Bank design-system tokens in design/tokens/fig-tokens.css. NEVER hardcode a colour here: use the semantic token (--foreground-primary), not the primitive (--neutrals-900-2), and never a literal hex. The token file defines four modes on :root — light, [data-theme="dark"], [data-mode="private"] and [data-mode="arabic"] — so switching mode is an attribute on , not a different stylesheet. ========================================================================= */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--background-base-l0-grey); color: var(--foreground-primary); font: 400 14px/20px 'Noto Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--foreground-accent-primary); text-decoration: none; } a:hover { color: var(--foreground-accent-hover-text-button-corporate); } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 600; } table { border-collapse: collapse; width: 100%; } /* Arabic data keeps its own direction and font regardless of page direction. */ .ar { font-family: 'Noto Sans Arabic', 'Noto Sans', sans-serif; direction: rtl; unicode-bidi: isolate; } /* The design renders an Arabic name in a table or detail view at its own weight and size — 600 15/22 — not at the surrounding body size. */ .tbl .ar, .dl .ar { font: 600 15px/22px 'Noto Sans Arabic', 'Noto Sans', sans-serif; display: inline-block; } /* ---------- app shell ---------- */ .app { display: flex; min-height: 100vh; } .rail { width: 236px; flex: none; align-self: stretch; background: var(--background-base-l1-white); border-right: 1px solid var(--border-on-white-divider); padding: 20px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .rail__brand { padding: 0 8px; display: flex; align-items: center; gap: 9px; } .rail__logo { width: 28px; height: 28px; border-radius: 8px; background: var(--background-gradient-blue-radial-1, var(--background-accent-primary)); color: var(--background-base-l0-white); display: flex; align-items: center; justify-content: center; font: 700 11px/11px 'Noto Sans', sans-serif; flex: none; } .rail__sep { width: 1px; height: 16px; background: var(--border-on-white-divider); } .rail__wordmark { font: 700 12px/16px 'Noto Sans', sans-serif; letter-spacing: .1em; color: var(--foreground-secondary); } .rail__campaign { padding: 14px 8px 12px; font: 400 11px/16px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); } .rail__nav { display: flex; flex-direction: column; gap: 2px; } /* Verbatim from components/web/SideNavItem.jsx: padding 11/10, radius --radius-s, gap 10, label 500 14/20. Height is driven by padding, not set. */ .rail__item { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: var(--radius-s); font: 500 14px/20px 'Noto Sans', sans-serif; color: var(--foreground-secondary); transition: background var(--motion-fast); } .rail__item:hover { background: var(--background-base-l0-grey); color: var(--foreground-primary); } .rail__item--on { background: var(--background-accent-on-white-primary); color: var(--foreground-accent-primary); font-weight: 600; position: relative; } /* Full height, flush to the edge — the component draws it top:0 bottom:0 and relies on the parent's overflow:hidden to clip it to the radius. */ .rail__item--on::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--foreground-accent-secondary); } /* Iconsax outline glyphs are filled paths that inherit currentColor, so they follow the rail item's own colour through every theme scope. 20px is the size the design passes to . */ /* The sprite is a definitions-only . It MUST be hidden by a class: `style="display:none"` on the element is an inline style, which this app's own CSP strips — leaving an invisible but full-height block pushing the entire shell down the page. Caught by looking at the rendered result. */ .icon-sprite { display: none; } .ico { flex: none; fill: currentColor; } /* The component colours the glyph from its own icon tokens rather than inheriting the label colour. */ .rail__item .ico { color: var(--icon-whitebg-secondary); } .rail__item--on .ico { color: var(--icon-whitebg-color); } /* Specified by the design, not yet built. Disabled is a fill/ink swap, never opacity — "Opacity is never used to fake disabled." */ .rail__item--off { color: var(--neutrals-500); cursor: not-allowed; } .rail__soon { margin-inline-start: auto; padding: 1px 7px; border-radius: 100px; background: var(--background-base-l0-grey); color: var(--foreground-tertiary); font: 600 10px/14px 'Noto Sans', sans-serif; } .rail__spacer { flex: 1; min-height: 20px; } /* Verbatim from components/web/SideNavCallout.jsx. It is a pale ACCENT card, not a grey one, and its label is uppercase accent-primary. */ .rail__callout { border-radius: var(--radius-m); padding: 14px; background: var(--background-accent-on-white-primary); } .rail__callout-label { font: 500 12px/18px 'Noto Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--foreground-accent-primary); } .rail__callout-body { margin-top: 6px; font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-secondary); text-wrap: pretty; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 56px; flex: none; background: var(--background-base-l0-white); border-bottom: 1px solid var(--border-on-white-divider); display: flex; align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 20; /* The bar has several fixed-width children. Without min-width:0 the flex items refuse to shrink and the right-hand end (avatar, log out) is pushed off-screen with no way to scroll to it. */ min-width: 0; } .topbar__title { font: 600 15px/20px 'Noto Sans', sans-serif; flex: none; white-space: nowrap; } .topbar__spacer { flex: 1; } .topbar__search { /* Shrinkable: this is the element that should give up space first. */ flex: 0 1 260px; min-width: 120px; height: 34px; border-radius: 6px; background: var(--background-base-l0-grey); box-shadow: inset 0 0 0 1px var(--border-on-white-divider); display: flex; align-items: center; gap: 8px; padding: 0 12px; } .topbar__search input { border: 0; background: transparent; outline: none; width: 100%; font: 400 13px/20px 'Noto Sans', sans-serif; color: var(--foreground-primary); } .topbar__search input::placeholder { color: var(--foreground-tertiary); } .topbar__ext { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px; background: var(--background-base-l0-grey); color: var(--foreground-secondary); font: 500 12px/16px 'Noto Sans', sans-serif; } .topbar__divider { width: 1px; height: 24px; background: var(--border-on-white-divider); flex: none; } /* The campaign is already named in the rail, so it is the first thing to drop. */ .topbar .pill--primary { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who { display: flex; align-items: center; gap: 9px; flex: none; } .who__avatar { width: 30px; height: 30px; border-radius: 100px; background: var(--background-accent-on-white-primary); color: var(--foreground-accent-primary); display: flex; align-items: center; justify-content: center; font: 600 11px/11px 'Noto Sans', sans-serif; } .who__name { font: 600 12px/16px 'Noto Sans', sans-serif; } .who__meta { font: 400 11px/14px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); } /* BOTMS.dc.html's own content well: padding 18/20/26, column, gap 14. */ .content { padding: 18px 20px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* ---------- panel ---------- */ .panel { background: var(--background-base-l0-white); /* Verbatim from components/web/Panel.jsx: radius --radius-l-px, padding 20, a 1px divider border and NO shadow. I previously removed the border and added --shadow-card, reasoning from the readme's "cards: white, radius 16, no border, one shadow" line. That line describes the MOBILE card recipe. The web Panel is a different component and keeps its border. Checking the source settled it. */ border-radius: var(--radius-l-px); border: 1px solid var(--border-on-white-divider); padding: 20px; min-width: 0; } /* A wide table scrolls WITHIN its panel; the page itself never scrolls sideways, which would hide the rail and the topbar. */ .panel > .tbl, .panel > table { display: table; width: 100%; } .panel:has(> .tbl) { overflow-x: auto; } /* Panel.jsx: baseline alignment so a title and a pill sit on the same typographic line, gap 12, 14 below. */ .panel__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .panel__title { font: 600 18px/22px 'Noto Sans', sans-serif; } .panel__note { font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); min-width: 0; /* allowed to shrink rather than push siblings out of view */ } /* ---------- pills, badges, chips ---------- */ .pill { padding: 3px 9px; border-radius: 100px; background: var(--background-base-l0-grey); color: var(--foreground-secondary); font: 600 11px/16px 'Noto Sans', sans-serif; display: inline-block; } .pill--primary { background: var(--background-accent-on-white-primary); color: var(--foreground-accent-primary); } .pill--green { background: var(--background-accent-on-white-success); color: var(--foreground-accent-green); } .pill--orange { background: var(--background-accent-on-white-orange); color: var(--foreground-accent-orange); } .pill--red { background: var(--background-accent-on-white-red); color: var(--foreground-accent-red); } .pill--yellow { background: var(--background-accent-on-white-yellow); color: var(--foreground-accent-yellow); } .tabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tab { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px; background: var(--background-base-l0-white); border: 1px solid var(--border-on-white-divider); font: 500 13px/18px 'Noto Sans', sans-serif; color: var(--foreground-secondary); } .tab:hover { color: var(--foreground-primary); } .tab--on { background: var(--foreground-accent-primary); color: var(--background-base-l0-white); border-color: transparent; font-weight: 600; } .tab--on .tab__count { background: var(--border-on-colour-subtle, rgba(255, 255, 255, .22)); color: inherit; } .tab__count { padding: 1px 7px; border-radius: 100px; background: var(--background-base-l0-grey); color: var(--foreground-secondary); font: 600 11px/16px 'Noto Sans', sans-serif; } /* ---------- buttons ---------- */ /* ---------- buttons ---------- Verbatim from components/core/ButtonLarge.jsx (figma 1:286203). THE PRIMARY BUTTON IS ORANGE. Not blue. The design system's readme is explicit — "Orange is not a general accent: it is the primary-CTA gradient and the 2px decoration bar above the active tab" — and ButtonLarge type=primary is that radial gradient. I had it exactly backwards: blue primaries, with orange reserved for decoration. States are FILL SWAPS. There is no hover in this system (touch-first); on the web, map hover to the pressed token. Disabled swaps the fill too — "Opacity is never used to fake disabled." */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 12px 24px; border-radius: var(--radius-xl-px); border: 0; cursor: pointer; overflow: hidden; font: 500 16px/1.1 'Noto Sans', sans-serif; color: var(--foreground-inverted); background: radial-gradient(487.499px 56.291px at -1.47% 96.83%, var(--background-button-primary-on-light-bg-gradient-orange-1) 0%, var(--background-button-primary-on-light-bg-gradient-orange-2) 56.8%); } .btn:hover, .btn:active { background: var(--background-button-primary-on-light-bg-pressed); } .btn:disabled { cursor: not-allowed; background: var(--background-button-primary-on-light-bg-disabled); color: var(--foreground-on-color-primary); } .btn--secondary, .btn--secondary:hover { background: var(--background-button-secondary-default); box-shadow: inset 0 0 0 1px var(--border-on-white-tertiary); color: var(--foreground-primary); } .btn--secondary:active { background: var(--background-button-secondary-pressed, var(--background-base-l0-grey)); } .btn--danger, .btn--danger:hover { background: var(--background-button-error-default); color: var(--foreground-inverted); box-shadow: none; } .btn--danger:active { background: var(--background-button-error-pressed); } .btn--danger:disabled { background: var(--background-button-error-disabled); } /* ButtonSmall, type=primary background=white size='extra small' — the variant the design's tables use for `Call`. A 24px PALE-BLUE pill with blue ink, not a small solid-blue button. */ .btn--sm { height: 24px; padding: 4px 8px; gap: 6px; background: var(--background-button-light-blue-white-bg-default); color: var(--foreground-accent-primary); box-shadow: none; font: 500 12px/16px 'Noto Sans', sans-serif; overflow: hidden; } .btn--sm:hover { background: var(--background-button-light-blue-white-bg-default); } .btn--sm:active { background: var(--background-button-light-blue-white-bg-pressed); } /* A destructive small button keeps the small geometry, not the pale-blue ink. */ .btn--sm.btn--danger, .btn--sm.btn--danger:hover { background: var(--background-accent-on-white-red); color: var(--foreground-accent-red); box-shadow: none; } .btn--sm.btn--secondary, .btn--sm.btn--secondary:hover { background: var(--background-base-l0-white); color: var(--foreground-secondary); box-shadow: inset 0 0 0 1px var(--border-on-white-tertiary); } .btn--block { width: 100%; } /* ---------- forms ---------- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } /* InputField's label is 400 16/20 secondary — a full-size line above the field, not a small caption. Mine was 500 12/16, which read as a hint. */ .field__label { font: 400 16px/20px 'Noto Sans', sans-serif; color: var(--foreground-secondary); } .field__hint { font: 400 11px/16px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); } .input, .textarea, .select { width: 100%; min-height: 48px; padding: 12px 16px; /* radius 6 (--radius-xs-px) and an INSET hairline, not a border. Both are design-system rules: "Text fields and list containers use inset hairlines (box-shadow: inset 0 0 0 1px), not border". The 6-vs-100 contrast between a field and a button is, per the readme, "the most recognisable Burgan detail — do not harmonise it". */ border-radius: var(--radius-xs-px); background: var(--background-base-l0-white); border: 0; /* --border-on-white-tertiary, NOT the divider. InputField.jsx names the primitive neutrals-400-2; this is its semantic alias, same value, and it follows the dark scope where the primitive would not. The divider (neutrals-300-2) is two steps lighter and made every field look disabled. */ box-shadow: inset 0 0 0 1px var(--border-on-white-tertiary); color: var(--foreground-primary); outline: none; } .input:focus, .textarea:focus, .select:focus { /* Active swaps the hairline to blue — again a swap, not an added ring. */ box-shadow: inset 0 0 0 1px var(--foreground-accent-primary); } .input[aria-invalid="true"], .textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--foreground-accent-red); } .textarea { min-height: 84px; resize: vertical; } .radio-list { display: flex; flex-direction: column; gap: 2px; } .radio { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font: 500 13px/18px 'Noto Sans', sans-serif; } .radio:hover { background: var(--background-base-l0-grey); } .radio input { accent-color: var(--foreground-accent-primary); } .radio:has(input:checked) { background: var(--background-accent-on-white-primary); border-color: var(--foreground-accent-primary); color: var(--foreground-accent-primary); font-weight: 600; } /* ---------- tables ---------- */ /* Verbatim from components/web/DataTable.jsx. Two corrections to an earlier pass. The header IS uppercase — I had removed it, misapplying the content rule about sentence-case LABELS to a component that deliberately sets its column headers in caps. And the cell type is 400 12/18 secondary, with `strong` columns at 600 14/22 primary, rather than one size for everything. The DS builds this out of flex rows; this is a real so the headers can carry scope and a screen reader can associate cells. Same metrics. */ .tbl { font: 400 12px/18px 'Noto Sans', sans-serif; border-spacing: 0; } .tbl th { text-align: left; padding: 14px 6px 8px; font: 500 12px/18px 'Noto Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--foreground-tertiary); border-bottom: 1px solid var(--border-on-white-divider); white-space: nowrap; } .tbl td { padding: 11px 6px; border-bottom: 1px solid var(--border-on-white-divider); vertical-align: middle; font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-secondary); } .tbl th:first-child, .tbl td:first-child { padding-inline-start: 0; } .tbl th:last-child, .tbl td:last-child { padding-inline-end: 0; } .tbl tbody tr:hover { background: var(--background-base-l0-grey); } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl__num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- data-cell primitives, transcribed from the design ---------- The design renders these through its DataTable's cell renderers; these are the same values as classes, because the CSP forbids inline styles. */ /* waited(text, tone) — a coloured dot then plain text. NOT a pill. */ .waited { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/20px 'Noto Sans', sans-serif; color: var(--foreground-primary); } .waited__dot { width: 8px; height: 8px; border-radius: 100px; flex: none; } .waited__dot--ok { background: var(--foreground-accent-green); } .waited__dot--warn { background: var(--foreground-accent-yellow); } .waited__dot--bad { background: var(--foreground-accent-red); } /* chip(text, bg, fg) — padding 3/9, radius 100, 600 11/16, never wraps. */ .chip { padding: 3px 9px; border-radius: 100px; white-space: nowrap; font: 600 11px/16px 'Noto Sans', sans-serif; display: inline-block; } .chip--flag { background: var(--background-accent-on-white-yellow); color: var(--foreground-accent-orange); } .chip--ok { background: var(--background-accent-on-white-success); color: var(--foreground-accent-green); } .chip--warn { background: var(--background-accent-on-white-yellow); color: var(--foreground-accent-orange); } .chip--neutral { background: var(--background-base-l0-grey); color: var(--foreground-secondary); } /* `strong: true` on a DataTable column. */ .tbl .strong { font: 600 14px/22px 'Noto Sans', sans-serif; color: var(--foreground-primary); font-variant-numeric: tabular-nums; } /* A row the caller may not read. Italic tertiary, exactly as the design's locked-row renderer draws it. */ .withheld { color: var(--foreground-tertiary); font-style: italic; } /* Column widths, straight from the design's column definitions. */ .w-56 { width: 56px; } .w-60 { width: 60px; } .w-74 { width: 74px; } .w-84 { width: 84px; } .w-90 { width: 90px; } .w-92 { width: 92px; } .w-96 { width: 96px; } .w-100 { width: 100px; } .w-106 { width: 106px; } .w-110 { width: 110px; } .w-120 { width: 120px; } .w-130 { width: 130px; } .w-140 { width: 140px; } .w-150 { width: 150px; } .w-160 { width: 160px; } .w-200 { width: 200px; } .w-210 { width: 210px; } .mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* ---------- alerts ---------- */ /* Verbatim from components/feedback/Alert.jsx (figma node 1673:2457). Two things I had wrong beyond the metrics. The TEXT is --foreground-primary in every tone — only the icon takes the accent colour; mine set the whole alert to the accent, so a warning was orange text on an orange field. And the surface uses the --background-accent-* steps (the 200 ramp), not the paler --background-accent-on-white-* (100) ones. */ .alert { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--radius-l-px); font: 400 14px/22px 'Noto Sans', sans-serif; color: var(--foreground-primary); } .alert strong { font-weight: 600; } .alert .ico { width: 24px; height: 24px; flex: none; } .alert--info { background: var(--background-accent-primary); } .alert--info .ico { color: var(--foreground-accent-primary); } .alert--warning { background: var(--background-accent-yellow); } .alert--warning .ico { color: var(--foreground-accent-icon-alt-yellow); } .alert--danger { background: var(--background-accent-red); } .alert--danger .ico { color: var(--foreground-accent-red); } .alert--success { background: var(--background-accent-green); } .alert--success .ico { color: var(--foreground-accent-icon-alt-green); } /* ---------- reservation banner ---------- */ .resv { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 100px; background: var(--background-accent-on-white-success); color: var(--foreground-accent-green); font: 600 12px/16px 'Noto Sans', sans-serif; } .resv--soon { background: var(--background-accent-on-white-orange); color: var(--foreground-accent-orange); } /* ---------- stat tiles ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } /* Verbatim from components/web/StatCard.jsx — the second most-used component in the design after Panel (18 instances). Every value here was slightly off when hand-rolled: padding, both type sizes, and both margins. */ .stat { background: var(--background-base-l0-white); border: 1px solid var(--border-on-white-divider); border-radius: var(--radius-m); padding: 16px; min-width: 0; } .stat__label { font: 500 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat__value { margin-top: 10px; font: 600 24px/32px 'Noto Sans', sans-serif; color: var(--foreground-primary); font-variant-numeric: tabular-nums; } /* The delta line is TONED — the component maps positive/negative/neutral to green/red/tertiary. Rendering every delta in tertiary throws away the one signal a KPI tile exists to give. */ .stat__foot { margin-top: 6px; font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); white-space: nowrap; } .stat__foot--positive { color: var(--foreground-accent-green); } .stat__foot--negative { color: var(--foreground-accent-red); } /* ---------- funnel ---------- */ /* MetricBar — components/web/MetricBar.jsx, tone=white. Label and value on one line, then a 6px track. The design stacks these with gap 12-14 for every breakdown list, including the campaign funnel. */ .funnel { display: flex; flex-direction: column; gap: 12px; } .metric { min-width: 0; } .metric__head { display: flex; gap: 8px; } .metric__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 14px/22px 'Noto Sans', sans-serif; color: var(--foreground-primary); } .metric__value { font: 500 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-secondary); font-variant-numeric: tabular-nums; } .metric__track { height: 6px; border-radius: var(--radius-xl-px); margin-top: 6px; overflow: hidden; background: var(--border-on-white-divider); } .metric__fill { height: 100%; border-radius: var(--radius-xl-px); background: var(--progress-bar-complete); transition: width .4s ease; } .metric__fill--muted { background: var(--foreground-tertiary); } .metric__fill--warn { background: var(--foreground-accent-orange); } .metric__fill--good { background: var(--foreground-accent-green); } /* ---------- empty state ---------- */ .empty { padding: 48px 24px; text-align: center; color: var(--foreground-tertiary); } .empty__title { font: 600 15px/22px 'Noto Sans', sans-serif; color: var(--foreground-secondary); } .empty__body { margin-top: 4px; font: 400 13px/20px 'Noto Sans', sans-serif; } /* ---------- misc ---------- */ .muted { color: var(--foreground-tertiary); } .row { display: flex; gap: 12px; align-items: center; min-width: 0; flex-wrap: wrap; } .row--wrap { flex-wrap: wrap; } .grow { flex: 1; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Grid items default to min-width:auto, so a wide child (a long Arabic name, a 30-character IBAN) makes the COLUMN wider than its 1fr share and the panel overflows the viewport instead of wrapping. */ .grid-2 > * { min-width: 0; } /* ------------------------------------------------------------------ * * Team roster — BOTMS.dc.html s08, the per-team panel grid. * * Values taken verbatim from the deck rather than eyeballed: three columns at * gap 14, a 28px initials disc, 13/18 name, 11/16 sub, and the accepted figure * at 20/24 in accent green. The team total is 22/28 against a 12/18 label. * ------------------------------------------------------------------ */ .teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* Grid items default to min-width:auto, so one long Arabic name would widen the COLUMN past its 1fr share and push the grid off the viewport. */ .teams > * { min-width: 0; } .roster { display: flex; flex-direction: column; } .roster__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-on-white-divider); } .roster__row:last-child { border-bottom: 0; } .roster__avatar { width: 28px; height: 28px; flex: none; border-radius: 100px; background: var(--background-base-l0-grey); color: var(--foreground-secondary); display: flex; align-items: center; justify-content: center; font: 600 10px/10px 'Noto Sans', sans-serif; } .roster__who { min-width: 0; flex: 1; } .roster__name { font: 600 13px/18px 'Noto Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .roster__sub { font: 400 11px/16px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); } .roster__n { font: 600 20px/24px 'Noto Sans', sans-serif; color: var(--foreground-accent-green); } .roster__n--zero { color: var(--foreground-tertiary); } .roster__total { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; } .roster__total-label { font: 500 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-secondary); } .roster__total-n { font: 600 22px/28px 'Noto Sans', sans-serif; } .dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 14px; font-size: 13px; } .dl dd { overflow-wrap: anywhere; } /* a 30-char IBAN must wrap, not overflow */ .dl dt { color: var(--foreground-tertiary); font-weight: 500; } .dl dd { margin: 0; } .skip { position: absolute; left: -9999px; top: 0; background: var(--background-base-l0-white); padding: 10px 16px; z-index: 100; } .skip:focus { left: 8px; top: 8px; } /* Below ~1180px the topbar cannot hold every element at full size. Drop the campaign pill first — the rail still names the campaign — then the extension. */ @media (max-width: 1180px) { .topbar .pill--primary { display: none; } } @media (max-width: 1020px) { .topbar__ext { display: none; } } @media (max-width: 1120px) { .grid-2 { grid-template-columns: 1fr; } .teams { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .teams { grid-template-columns: 1fr; } } @media (max-width: 900px) { .rail { display: none; } } /* Phone. Below ~640px the topbar's identity block and the seven-column worklist table are both wider than the screen, and between them they gave the DOCUMENT a 620px scroll width — so the whole page slid sideways instead of the table scrolling inside its panel, which is what the design intends. Measured on a Pixel 5 (393px), not estimated from a screenshot: the capture canvas is wider than the viewport and makes everything look clipped. */ @media (max-width: 640px) { /* The name and role are already on the profile screen; the avatar keeps the identity visible and the log-out control stays reachable. */ .who__name, .who__meta { display: none; } .topbar { gap: 10px; padding: 0 12px; } .topbar__search { flex: 1 1 auto; min-width: 0; } .topbar__title { overflow: hidden; text-overflow: ellipsis; } .wrap { padding: 14px 12px; } /* A panel holding a wide table scrolls ITSELF. Without an explicit width bound a grid/flex child sizes to its content, so `overflow-x: auto` never engages and the overflow escapes to the document. */ /* The panel already scrolls itself, but its overflow still counted toward the DOCUMENT's scroll width, so the whole page slid sideways as well. `clip` rather than `hidden`: hidden makes the element a scroll container, which breaks the sticky topbar and rail above it. */ .content { overflow-x: clip; } .panel:has(> .tbl) { max-width: 100%; } .tbl { min-width: 560px; } } /* ---------- layout utilities ---------- These exist because the Content-Security-Policy is `style-src 'self'` with no 'unsafe-inline'. A `style="..."` ATTRIBUTE is governed by style-src-attr, which falls back to style-src — so inline styles are DROPPED by the browser, silently. The funnel bars were the visible casualty: `width` lived only in an inline style, so every bar on the supervisor's chart rendered at zero width. Never reintroduce an inline style; add a class here instead. */ .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .ml-6 { margin-left: 6px; } .mb-18 { margin-bottom: 18px; } .ta-left { text-align: left; } .ta-center { text-align: center; } .jc-end { justify-content: flex-end; } .jc-center { justify-content: center; } .fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-34 { font-size: 34px; line-height: 1; } .mw-340 { max-width: 340px; } .mw-640 { max-width: 640px; } .card-centred { max-width: 560px; margin: 40px auto; text-align: center; } .ta-w150 { min-height: 30px; width: 150px; } .ta-w190 { min-height: 30px; width: 190px; } .rule { border: 0; border-top: 1px solid var(--border-on-white-divider); margin: 16px 0; } /* Funnel bar widths, 1% steps. Generated — do not hand-edit. */ .funnel__fill--w0 { width: 0%; } .funnel__fill--w1 { width: 1%; } .funnel__fill--w2 { width: 2%; } .funnel__fill--w3 { width: 3%; } .funnel__fill--w4 { width: 4%; } .funnel__fill--w5 { width: 5%; } .funnel__fill--w6 { width: 6%; } .funnel__fill--w7 { width: 7%; } .funnel__fill--w8 { width: 8%; } .funnel__fill--w9 { width: 9%; } .funnel__fill--w10 { width: 10%; } .funnel__fill--w11 { width: 11%; } .funnel__fill--w12 { width: 12%; } .funnel__fill--w13 { width: 13%; } .funnel__fill--w14 { width: 14%; } .funnel__fill--w15 { width: 15%; } .funnel__fill--w16 { width: 16%; } .funnel__fill--w17 { width: 17%; } .funnel__fill--w18 { width: 18%; } .funnel__fill--w19 { width: 19%; } .funnel__fill--w20 { width: 20%; } .funnel__fill--w21 { width: 21%; } .funnel__fill--w22 { width: 22%; } .funnel__fill--w23 { width: 23%; } .funnel__fill--w24 { width: 24%; } .funnel__fill--w25 { width: 25%; } .funnel__fill--w26 { width: 26%; } .funnel__fill--w27 { width: 27%; } .funnel__fill--w28 { width: 28%; } .funnel__fill--w29 { width: 29%; } .funnel__fill--w30 { width: 30%; } .funnel__fill--w31 { width: 31%; } .funnel__fill--w32 { width: 32%; } .funnel__fill--w33 { width: 33%; } .funnel__fill--w34 { width: 34%; } .funnel__fill--w35 { width: 35%; } .funnel__fill--w36 { width: 36%; } .funnel__fill--w37 { width: 37%; } .funnel__fill--w38 { width: 38%; } .funnel__fill--w39 { width: 39%; } .funnel__fill--w40 { width: 40%; } .funnel__fill--w41 { width: 41%; } .funnel__fill--w42 { width: 42%; } .funnel__fill--w43 { width: 43%; } .funnel__fill--w44 { width: 44%; } .funnel__fill--w45 { width: 45%; } .funnel__fill--w46 { width: 46%; } .funnel__fill--w47 { width: 47%; } .funnel__fill--w48 { width: 48%; } .funnel__fill--w49 { width: 49%; } .funnel__fill--w50 { width: 50%; } .funnel__fill--w51 { width: 51%; } .funnel__fill--w52 { width: 52%; } .funnel__fill--w53 { width: 53%; } .funnel__fill--w54 { width: 54%; } .funnel__fill--w55 { width: 55%; } .funnel__fill--w56 { width: 56%; } .funnel__fill--w57 { width: 57%; } .funnel__fill--w58 { width: 58%; } .funnel__fill--w59 { width: 59%; } .funnel__fill--w60 { width: 60%; } .funnel__fill--w61 { width: 61%; } .funnel__fill--w62 { width: 62%; } .funnel__fill--w63 { width: 63%; } .funnel__fill--w64 { width: 64%; } .funnel__fill--w65 { width: 65%; } .funnel__fill--w66 { width: 66%; } .funnel__fill--w67 { width: 67%; } .funnel__fill--w68 { width: 68%; } .funnel__fill--w69 { width: 69%; } .funnel__fill--w70 { width: 70%; } .funnel__fill--w71 { width: 71%; } .funnel__fill--w72 { width: 72%; } .funnel__fill--w73 { width: 73%; } .funnel__fill--w74 { width: 74%; } .funnel__fill--w75 { width: 75%; } .funnel__fill--w76 { width: 76%; } .funnel__fill--w77 { width: 77%; } .funnel__fill--w78 { width: 78%; } .funnel__fill--w79 { width: 79%; } .funnel__fill--w80 { width: 80%; } .funnel__fill--w81 { width: 81%; } .funnel__fill--w82 { width: 82%; } .funnel__fill--w83 { width: 83%; } .funnel__fill--w84 { width: 84%; } .funnel__fill--w85 { width: 85%; } .funnel__fill--w86 { width: 86%; } .funnel__fill--w87 { width: 87%; } .funnel__fill--w88 { width: 88%; } .funnel__fill--w89 { width: 89%; } .funnel__fill--w90 { width: 90%; } .funnel__fill--w91 { width: 91%; } .funnel__fill--w92 { width: 92%; } .funnel__fill--w93 { width: 93%; } .funnel__fill--w94 { width: 94%; } .funnel__fill--w95 { width: 95%; } .funnel__fill--w96 { width: 96%; } .funnel__fill--w97 { width: 97%; } .funnel__fill--w98 { width: 98%; } .funnel__fill--w99 { width: 99%; } .funnel__fill--w100 { width: 100%; } /* ---------- visible focus (WCAG 2.1 AA 2.4.7) ---------- The topbar search removed the UA outline and replaced it with nothing, so it was keyboard-focusable with zero indication. Buttons, tabs and rail items relied on the UA default over a coloured background, where it is close to invisible. Every interactive control gets an explicit ring. */ .topbar__search:focus-within { box-shadow: inset 0 0 0 2px var(--foreground-accent-primary); border-radius: 6px; } .btn:focus-visible, .tab:focus-visible, .rail__item:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--foreground-accent-primary); outline-offset: 2px; border-radius: 4px; } /* Screen-reader-only text — table captions that carry no visual weight. */ .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; } /* ---------- two-step confirmation ---------- A
disclosure, because the CSP blocks inline onclick="confirm(...)" and a modal dialog would block the page. The destructive verb is only reachable after a deliberate second interaction. */ .confirm > summary { list-style: none; cursor: pointer; display: inline-block; } .confirm > summary::-webkit-details-marker { display: none; } .confirm[open] > summary { box-shadow: inset 0 0 0 1px var(--foreground-accent-red); } .btn--danger { background: var(--foreground-accent-red); border-color: var(--foreground-accent-red); color: #fff; } .btn--danger:hover { filter: brightness(0.94); } /* ============================================================================ Screen 01 — sign in. A two-panel split, transcribed from the approved design. Every number here is the design's own: 588px brand pane at 44/46 padding, 396px form column centred between flex spacers, 40/48 headline, 32px glass icon circles. ========================================================================= */ .signin { display: flex; min-height: 100vh; } /* ---- left: the proposition, on the blue radial ---- */ .signin__brandpane { width: 588px; flex: none; padding: 44px 46px; display: flex; flex-direction: column; background: radial-gradient(130% 130% at 6% 4%, var(--background-gradient-blue-radial-1) 0%, var(--background-gradient-blue-radial-2) 64%); color: var(--foreground-on-color-primary); } /* ---------- the Burgan mark ---------- Real vectors from the design system (figma node 932:2). The `logo-*` tokens carry the brand blues and the orange accent; on the blue panel the mark flips to white ink and KEEPS the orange, which is what the design system's colour=false variant does. */ .logo__logo-1 { fill: var(--logo-1); } .logo__logo-2 { fill: var(--logo-2); } .logo__logo-3 { fill: var(--logo-3); } .logo--onblue .logo__logo-1, .logo--onblue .logo__logo-2 { fill: var(--foreground-on-color-primary); } .logo--onblue .logo__logo-3 { fill: var(--logo-3); } .signin__grow { flex: 1; min-height: 28px; } .signin__headline { font: 600 40px/48px 'Noto Sans', sans-serif; color: var(--foreground-on-color-primary); text-wrap: pretty; margin: 0; } .signin__lede { font: 400 16px/24px 'Noto Sans', sans-serif; color: var(--foreground-on-color-secondary); margin: 12px 0 0; max-width: 430px; text-wrap: pretty; } .signin__points { display: flex; flex-direction: column; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; max-width: 452px; } .signin__point { display: flex; gap: 12px; align-items: flex-start; font: 400 14px/22px 'Noto Sans', sans-serif; color: var(--foreground-on-color-secondary); } /* Glass is the design system's ONE transparency context: a control sitting on a colour background. 0.1 fill with a matching 0.25 inset hairline. */ .signin__pointicon { width: 32px; height: 32px; flex: none; border-radius: 100px; background: var(--background-button-glass-default); box-shadow: inset 0 0 0 1px var(--border-on-color-divider); display: flex; align-items: center; justify-content: center; color: var(--foreground-on-color-primary); } .signin__rule { height: 1px; background: var(--border-on-color-divider); } .signin__fine { font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-on-color-secondary); margin: 14px 0 0; } /* ---- right: the form ---- */ .signin__formpane { flex: 1; min-width: 0; background: var(--background-base-l0-white); padding: 44px 56px; display: flex; flex-direction: column; } .signin__meta { display: flex; align-items: center; gap: 10px; } .signin__env { padding: 4px 10px; border-radius: 6px; background: var(--background-accent-on-white-yellow); color: var(--foreground-accent-orange); font: 600 11px/16px 'Noto Sans', sans-serif; letter-spacing: .08em; } .signin__build { font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); } .signin__form { width: 396px; margin: 0 auto; display: flex; flex-direction: column; } .signin__title { font: 600 24px/32px 'Noto Sans', sans-serif; margin: 0; } .signin__sub { font: 400 14px/22px 'Noto Sans', sans-serif; color: var(--foreground-secondary); margin: 6px 0 0; } .signin__fields { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; } .signin__fields .field { margin-bottom: 0; } .signin__hint { font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); margin: 8px 0 0; } .signin__note { margin-top: 22px; padding: 14px; border-radius: 12px; background: var(--background-base-l0-grey); font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-secondary); text-wrap: pretty; } .signin__footer { font: 400 12px/18px 'Noto Sans', sans-serif; color: var(--foreground-tertiary); text-align: center; margin: 0; } .mt-20 { margin-top: 20px; } /* Below the design's 1440px canvas the split has to stack, or the 588px pane squeezes the 396px form column off the screen. */ @media (max-width: 1080px) { .signin { flex-direction: column; } .signin__brandpane { width: 100%; padding: 32px 24px; } .signin__formpane { padding: 32px 24px; } .signin__form { width: 100%; max-width: 396px; } .signin__grow { min-height: 20px; flex: 0 0 auto; } }