/* --------------------------------------------------------------------------- F. BINSABBAR - My Desk (staff self-service). LAYOUT ONLY. Everything visual - colours, buttons, the back button, the footer, cards, pills, tags, inputs, the modal, the busy scrim, the toast - comes from /guidelines/fb-ui.css. There are no parallel design tokens in this file and no raw hex or rgba literal for anything the kit tokens already express. Four house laws this file must not break: 1. USE THE KIT'S COMPONENT CLASSES. Buttons are .btn / .btn.outline / button.secondary.danger. Tags are .tag. Inputs are .text-input and .fb-select. Cards are .card. There is deliberately NO .md-btn in this file: a hand-rolled retype of the kit's button is exactly what got a previous console rejected. 2. Danger buttons are red fill with Premium Yellow text. We never restate that; button.secondary.danger already reads --accent / --on-danger. 3. Uniform 44px control height -> var(--s-9). Never a hardcoded px height on a button, select or input. No 38px, no 40px. 4. Bespoke inputs relight red, because fb-ui.css sets an accent border with !important on every hovered/focused text-shaped input. This file therefore ships NO bespoke input: every field in the tool carries the kit's .text-input or .fb-select and inherits the house behaviour. Written logical-property-first (margin-inline / padding-inline / inset-inline / border-inline) because My Desk is bilingual from day one. Arabic is a `dir` attribute on , never a stylesheet fork. The kit's [dir="rtl"] block handles the select chevron, the drawer side and the footer alignment; this file adds nothing physical for it to have to undo. --------------------------------------------------------------------------- */ /* ============== PENDING KIT PROMOTION ============== These six type roles, the measure cap and the 44px tab floor BELONG in fb-ui.css :root, consumed identically by My Desk, the HR Portal and the sample console. They are declared here, scoped to this tool, for one reason only: fb-ui.css is the whole house's sheet - store, POS, stockroom and both HR surfaces - and three HR surfaces are being worked concurrently. A blind concurrent edit to the shared sheet is how a token gets half-written. PROMOTION IS A PURE DELETION. Move this block to fb-ui.css :root verbatim, delete it here, and every var() below keeps resolving with no other change. Nothing in this tool reads a literal that these tokens express. The tracking ladder is keyed to SIZE, not to taste, and applies only to uppercase positions: 9-10px -> 0.12em, 11px -> 0.10em, 12-13px -> 0.04em, 15px and above -> 0. Lowercase and proper nouns carry none. */ .page, .md-view, .md-sample-banner, .modal, .md-toast-host { --ty-micro: 11px; /* uppercase label tier */ --ty-meta: 12px; --ty-body: 13px; --ty-name: 15px; --ty-sub: 20px; --ty-num: 23px; --measure: 66ch; } .page { max-width: 1080px; margin: 0 auto; padding: var(--s-4) max(var(--s-6), env(safe-area-inset-right)) 140px max(var(--s-6), env(safe-area-inset-left)); } /* The `hidden` attribute MUST win over the class display rules below. A class selector (.md-view{display:block}) outranks the UA [hidden]{display:none}, which would otherwise leave every screen visible at once. */ #md-chrome[hidden], .md-view[hidden], .md-sample-banner[hidden], .md-empty[hidden], #md-tab-approvals[hidden] { display: none !important; } .md-view { display: block; } /* S3 - THE HOUSE CAPS AT WEIGHT 500. Futura Demi is where a geometric sans starts to look cheap, and the browser default for b/strong is 700. If a thing needs presence, it gets space above it, never weight. */ b, strong { font-weight: 500; } /* The language switch sits at the far end of the nav row, opposite the back pill. Height comes from .btn (var(--s-9)); this rule is placement only. */ .md-lang { margin-inline-start: auto; flex: 0 0 auto; } .page-nav-inner { display: flex; align-items: center; gap: var(--s-3); } /* Arabic sets Tajawal ahead of Futura for the whole document. The kit already lists Tajawal in every font stack as the Arabic fallback; this only reorders it so Arabic-first pages do not render Latin numerals in a Latin face. */ html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .btn, html[dir="rtl"] button, html[dir="rtl"] .text-input, html[dir="rtl"] .fb-select { font-family: "Tajawal", futura-pt, "Futura PT", sans-serif; } /* The language button always shows the OTHER language, so it stays in its own script regardless of the page direction. */ .md-lang[lang="ar"] { font-family: "Tajawal", sans-serif; } .md-lang[lang="en"] { font-family: futura-pt, "Futura PT", sans-serif; } /* ============== SAMPLE-DATA BANNER ============== Deliberately loud and deliberately persistent. It is one of four independent signals that a row is not a real record (the others: the per-row Sample chip, the SAMPLE-nn identifiers, and the per-card notice). */ .md-sample-banner { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin: var(--s-6) 0 0; border-radius: var(--radius-card); background: var(--warning-soft); box-shadow: inset 0 0 0 1px var(--warning-soft); color: var(--text); font-size: var(--ty-body); line-height: 1.4; max-width: var(--measure); } .md-sample-banner > .icon { --icon-size: 18px; margin-top: 1px; color: var(--warning-text); } .md-sample-banner .tag { vertical-align: middle; } /* Offline reuses the sample banner's shape - same weight of interruption, and the two can legitimately be on screen together - but carries the error tint and the error glyph, because one is "this is not your record" and the other is "this cannot be saved". */ .md-offline-banner { background: var(--error-soft); margin-top: var(--s-3); } .md-offline-banner > .icon { color: var(--error); } .md-offline-banner[hidden] { display: none !important; } /* The DELEGATION BANNER (study 12.9 item 2) used to be styled here. It is retired: borrowed authority is now a Cover-tab count badge and the first row under "Needs your attention", so it is content rather than a paragraph of chrome above every screen. Both carry existing styles - .md-tab-count and .md-row - so nothing replaced it. */ /* ============== SHARED SCREEN FURNITURE ============== */ .md-view > .card { margin-bottom: var(--s-4); } /* Screen intro: one title + one sentence, above the content of each screen. */ .md-head { margin: var(--s-6) 0 var(--s-4); } .md-head h2 { margin: 0 0 var(--s-2); font-size: var(--ty-sub); font-weight: 400; letter-spacing: 0; color: var(--text); } .md-head p { margin: 0; font-size: var(--ty-body); line-height: 1.4; color: var(--text-muted); max-width: var(--measure); } /* Category pages group related workflows without creating more top-level navigation. The label and rule make each domain visible while scrolling. */ .md-category-section { min-width: 0; } .md-category-section + .md-category-section { margin-top: var(--s-9); } .md-category-label { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 0; font-size: inherit; font-weight: inherit; line-height: 1; } .md-category-label::after { content: ''; flex: 1 1 auto; block-size: 1px; background: var(--control-border); } .md-category-label span { display: inline-flex; align-items: center; min-height: 28px; padding-inline: var(--s-3); border-radius: var(--radius-pill); background: var(--premium-yellow); color: var(--text); font-size: var(--param-title-fs); font-weight: var(--param-title-weight); letter-spacing: var(--param-title-ls); text-transform: var(--param-title-tt); } .md-category-section .md-head { margin-top: var(--s-3); } .md-section-title { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-6) 0 var(--s-3); } /* S2 - ONE uppercase label rule, reading the kit's own quartet. No local font-weight: Futura Medium uppercase at this size reads as system chrome. */ .md-section-title h3 { margin: 0; font-size: var(--param-title-fs); letter-spacing: var(--param-title-ls); text-transform: var(--param-title-tt); color: var(--param-title-color); font-weight: var(--param-title-weight); line-height: 1.25; } .md-section-title .sub { font-size: var(--ty-micro); line-height: 1.25; color: var(--text-faint); } .md-empty { padding: var(--s-7) var(--s-5); text-align: center; color: var(--text-muted); font-size: var(--ty-body); } .md-empty p { max-width: var(--measure); margin-inline: auto; } /* Action row inside a card. Kit .btn-row already handles wrap + gap; this only pushes it clear of the text above it. */ .md-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-4); } /* ============== THE HEADLINE (Desk landing) ============== */ .md-hello { padding: var(--s-5) var(--s-6); margin: var(--s-6) 0 var(--s-4); border-radius: var(--radius-glass); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); } .md-hello h2 { margin: 0 0 var(--s-1); font-size: var(--ty-sub); font-weight: 400; color: var(--text); } .md-hello .md-hello-sub { margin: 0; font-size: var(--ty-body); color: var(--text-muted); /* The sample pill sits inline on this line instead of owning a strip of its own. inline-flex keeps the 11px pill optically centred on 13px text. */ display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .md-hello .md-hello-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); } /* ============== EMPLOYEE DESK ============== The membership card is temporary badge artwork. The image is deliberately monochrome so the employee data remains the identity, not the card tier. */ .md-desk-grid { display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr); gap: var(--s-4); align-items: stretch; margin-top: var(--s-5); } .md-employee-badge { position: relative; min-height: 292px; overflow: hidden; isolation: isolate; border-radius: var(--radius-glass); background: var(--text); color: #fff; box-shadow: var(--glass-shadow); } .md-employee-badge__art { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.08) brightness(0.78); transform: scale(1.01); } .md-employee-badge::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(14, 14, 14, 0.12), rgba(14, 14, 14, 0.02) 38%), linear-gradient(to top, rgba(14, 14, 14, 0.88), rgba(14, 14, 14, 0.04) 62%); } .md-employee-badge__content { min-height: inherit; block-size: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-5); } .md-employee-badge__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .md-employee-badge__eyebrow, .md-employee-badge__identity > p { margin: 0; font-size: var(--ty-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .md-employee-badge__eyebrow { color: rgba(255, 255, 255, 0.78); } .md-employee-badge__identity > p { color: rgba(255, 255, 255, 0.62); } .md-employee-badge__identity h2 { margin: var(--s-2) 0 var(--s-1); color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 400; line-height: 1.05; letter-spacing: 0; } .md-employee-badge__identity > span { display: block; color: rgba(255, 255, 255, 0.78); font-size: var(--ty-body); line-height: 1.3; } .md-general-card, .md-desk-leave { margin: 0; } .md-general-card h3, .md-desk-leave h3 { margin: 0; font-size: var(--ty-name); font-weight: 400; color: var(--text); } .md-general-card .md-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } .md-general-card .md-fact:last-child { grid-column: 1 / -1; } .md-general-card .md-fact dd { overflow-wrap: anywhere; font-size: var(--ty-body); } .md-desk-leave { margin-top: var(--s-4); } .md-desk-leave h3 { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .md-desk-leave .md-facts { margin-top: var(--s-4); } /* Fact grid: label over value. Used on the Desk headline, the profile card and the leave summary. Tabular numerals so dates and day counts line up. */ .md-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4) var(--s-5); margin-top: var(--s-5); } .md-fact dt { margin: 0 0 var(--s-1); font-size: var(--param-title-fs); letter-spacing: var(--param-title-ls); text-transform: var(--param-title-tt); color: var(--param-title-color); font-weight: var(--param-title-weight); } .md-fact dt { line-height: 1.25; } .md-fact dd { margin: 0; font-size: var(--ty-name); color: var(--text); font-variant-numeric: tabular-nums; } .md-fact dd.md-muted { color: var(--text-faint); font-size: var(--ty-body); } /* The stat treatment stockroom already established and the house already accepted: one number, given room, tabular so a column of them lines up. Reserved for the leave figures, which are the only true statistics here. */ .md-fact dd.md-num { font-size: var(--ty-num); font-weight: 500; letter-spacing: 0; line-height: 1.2; } .md-fact dd.md-num .md-num-unit { font-size: var(--ty-body); font-weight: 400; color: var(--text-muted); margin-inline-start: var(--s-1); } /* ============== ROW LIST ============== One list shape reused by documents, leave history and the approvals queue. A row is a card-weight surface, not a table, because the tool is read on a phone by staff standing in the boutique. */ .md-rows { display: flex; flex-direction: column; gap: var(--s-3); } .md-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--radius-card); background: var(--glass-bg-strong); box-shadow: var(--glass-shadow); } .md-row > .icon { --icon-size: 20px; color: var(--text-faint); flex: 0 0 auto; } /* On a row carrying a consequence line the block is three deep, and a centred glyph floats against the middle sentence instead of marking the row. It rises to sit with the title. Rows without one stay centred. */ .md-row:has(.md-row-why) > .icon { align-self: flex-start; margin-top: 2px; } .md-row-main { flex: 1 1 220px; min-width: 0; } .md-row-title { margin: 0 0 var(--s-1); font-size: var(--ty-name); color: var(--text); letter-spacing: 0; overflow-wrap: anywhere; } .md-row-sub { margin: 0; font-size: var(--ty-meta); line-height: 1.4; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* M3 - THE CONSEQUENCE LINE. A date is a fact; what lapsing costs you is the reason to act on it. Sits at body size directly under the title, at full text colour, because it outranks the date it follows. Rendered only while the document is inside its alert window - never as permanent decoration. */ .md-row-why { margin: var(--s-1) 0 0; font-size: var(--ty-body); line-height: 1.4; color: var(--text); max-width: var(--measure); } .md-row-end { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; flex-wrap: wrap; } /* Severity rail on a document row. Colour is the kit's semantic FILL token, used here as a 3px surface and never as text. */ .md-row.is-overdue { border-inline-start: 3px solid var(--error); } .md-row.is-soon { border-inline-start: 3px solid var(--warning); } .md-row.is-clear { border-inline-start: 3px solid var(--success); } /* ============== FORM BLOCKS ============== Labels only. Every control below a label is a kit .text-input / .fb-select, so there is no bespoke field for the kit's !important focus ring to fight. */ .md-field { margin-bottom: var(--s-4); } .md-field > label { display: block; margin-bottom: var(--s-2); font-size: var(--param-title-fs); letter-spacing: var(--param-title-ls); text-transform: var(--param-title-tt); color: var(--param-title-color); font-weight: var(--param-title-weight); } .md-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); } /* ============== PHASE 2 / BLOCKED NOTICE ============== Where an action is not wired, the control stays visible and visibly disabled with a tooltip saying why. This is the copy that sits beside it. */ .md-notice { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--radius-card); background: var(--hover); color: var(--text-muted); font-size: var(--ty-body); line-height: 1.4; } .md-notice > div { max-width: var(--measure); } .md-notice > .icon { --icon-size: 18px; margin-top: 1px; flex: 0 0 auto; } .md-notice strong { color: var(--text); font-weight: 500; } .md-notice code { font-size: var(--ty-meta); padding: 1px var(--s-1); border-radius: var(--radius-sm); background: var(--hover); } /* ============== NOT-YET-WIRED CONTROLS ============== A control whose action is not wired stays visible and visibly disabled, with a tooltip naming the blocker. The TITLE lives on this wrapper because a disabled