/* Phone-first, single-card staff surface. Deliberately small — this client shares nothing with the manager console's design system. COLOUR RULE: every colour in this sheet resolves through a custom property declared once below. The PWA never sets data-theme and gets the light palette; the portal /staff tree carries the global theme on , and the dark block re-points the SAME properties. Adding a colour literal to a rule outside the two palette blocks re-opens the light/dark drift this sheet used to have (every rule written twice), so don't. */ :root { /* Surfaces */ --sf-bg: #f3f4f8; --sf-surface: #fff; --sf-raised: #f8f9fc; /* run rows, pick entries, tiles */ --sf-sunken: #f1f2f7; /* statements, notes */ --sf-hover: #eef0f8; --sf-row-hover: #f2f4f7; --sf-shadow: rgba(20, 20, 40, 0.08); /* Ink */ --sf-text: #1f2233; --sf-body: #3a3f55; --sf-muted: #6b7080; --sf-faint: #9aa0b4; /* Lines */ --sf-border: #e3e4ec; --sf-border-soft: #e4e7ec; --sf-edge: #c7cae0; /* the 4px left edge on a card row */ /* Accents */ --sf-accent: #4338ca; --sf-accent-soft: #d9d9f5; --sf-accent-dim: #e3e4ec; --sf-link: #2563eb; --sf-danger: #b91c1c; --sf-danger-edge: #dc2626; --sf-danger-surface: #fef5f4; --sf-danger-border: #f0c9c4; /* Run-status pills (StaffRunTone → tone-*) */ --sf-tone-neutral-bg: #e8eaf3; --sf-tone-neutral-fg: #4b5066; --sf-tone-active-bg: #e0ecff; --sf-tone-active-fg: #1d4ed8; --sf-tone-positive-bg: #e3f5ea; --sf-tone-positive-fg: #15803d; --sf-tone-warning-bg: #fde7e5; --sf-tone-warning-fg: #b91c1c; --sf-tone-muted-bg: #eceef3; --sf-tone-muted-fg: #8a8f9e; /* Verdict banner (StatusTone → tone-*) */ --sf-v-success-bg: #ecfdf3; --sf-v-success-bd: #abefc6; --sf-v-success-fg: #067647; --sf-v-danger-bg: #fef3f2; --sf-v-danger-bd: #fecdca; --sf-v-danger-fg: #b42318; --sf-v-warning-bg: #fffaeb; --sf-v-warning-bd: #fedf89; --sf-v-warning-fg: #b54708; --sf-v-neutral-bg: #f2f4f7; --sf-v-neutral-bd: #e4e7ec; --sf-v-neutral-fg: #475467; /* Status dots (StatusTone → tone-*) */ --sf-dot-success: #12b76a; --sf-dot-danger: #f04438; --sf-dot-warning: #f79009; --sf-dot-info: #2e90fa; --sf-dot-neutral: #98a2b3; } /* The portal /staff surface inherits the console's theme attribute; the PWA never sets it. Re-point the properties, don't restate the rules. */ [data-theme="dark"] { --sf-bg: #010409; --sf-surface: #161B22; --sf-raised: #1C2128; --sf-sunken: #161B22; --sf-hover: #21262D; --sf-row-hover: #161B22; --sf-shadow: rgba(1, 4, 9, 0.6); --sf-text: #E6EDF3; --sf-body: #ADBAC7; --sf-muted: #7D8590; --sf-faint: #6E7681; --sf-border: #30363D; --sf-border-soft: #30363D; --sf-edge: #444C56; --sf-accent: #A5A2F5; --sf-accent-soft: #2D2B5E; --sf-accent-dim: #30363D; --sf-link: #539BF5; --sf-danger: #F85149; --sf-danger-edge: #F85149; --sf-danger-surface: #25171A; --sf-danger-border: #4D2329; --sf-tone-neutral-bg: #21262D; --sf-tone-neutral-fg: #ADBAC7; --sf-tone-active-bg: rgba(56, 139, 253, 0.15); --sf-tone-active-fg: #58A6FF; --sf-tone-positive-bg: rgba(46, 160, 67, 0.15); --sf-tone-positive-fg: #3FB950; --sf-tone-warning-bg: rgba(248, 81, 73, 0.15); --sf-tone-warning-fg: #F85149; --sf-tone-muted-bg: #21262D; --sf-tone-muted-fg: #7D8590; --sf-v-success-bg: #12261C; --sf-v-success-bd: #1F4D33; --sf-v-success-fg: #56D364; --sf-v-danger-bg: #25171A; --sf-v-danger-bd: #4D2329; --sf-v-danger-fg: #F85149; --sf-v-warning-bg: #271D12; --sf-v-warning-bd: #4D3A1F; --sf-v-warning-fg: #E3B341; --sf-v-neutral-bg: #161B22; --sf-v-neutral-bd: #30363D; --sf-v-neutral-fg: #ADBAC7; } html, body { margin: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--sf-bg); min-height: 100vh; } .staff-shell { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 24px 16px; } /* ── The card, and the page chrome inside it ──────────────────────────────── .staff-card is the centered single-message surface (tiles, enrol, splash); .staff-page turns it into the left-aligned screen every StaffPageScaffold renders, keeping only the heading centered. */ .staff-card { width: 100%; max-width: 420px; background: var(--sf-surface); border-radius: 16px; box-shadow: 0 2px 16px var(--sf-shadow); padding: 32px 24px; margin-top: 8vh; text-align: center; } .staff-page { text-align: left; } .staff-title { font-size: 1.35rem; font-weight: 600; margin: 8px 0 12px; text-align: center; color: var(--sf-text); } /* The head row keeps the title centered, with back / action tucked to the edges. */ .staff-page-head { position: relative; display: flex; align-items: center; justify-content: center; } .staff-page-back { position: absolute; left: 0; } .staff-page-action { position: absolute; right: 0; } /* Filters that outlive the body's loading + error states. */ .staff-page-toolbar { margin-top: 4px; margin-bottom: 8px; } /* Loading / error / empty / not-found — every non-list outcome, centered in the card. */ .staff-state { text-align: center; padding: 16px 4px 8px; } .staff-muted { color: var(--sf-muted); } .staff-hero-icon { font-size: 56px !important; width: 56px; height: 56px; color: var(--sf-muted); } /* One-time generated-PIN reveal on the enrolment screen. */ .staff-pin-reveal { margin: 12px auto 16px; font-size: 2.6rem; font-weight: 700; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; color: var(--sf-accent); } /* Tile grid: tap your name, then enter your PIN. */ .staff-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; } .staff-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px; border: 1px solid var(--sf-border); border-radius: 12px; background: var(--sf-raised); font: inherit; font-weight: 600; color: var(--sf-text); cursor: pointer; } .staff-tile:hover { background: var(--sf-hover); border-color: var(--sf-edge); } .staff-tile .mud-icon-root { font-size: 34px; color: var(--sf-muted); } /* Authenticated chrome: the signed-in top bar (name + sign-out). Rendered only for a signed-in principal — the anonymous tile screen has no chrome. */ .staff-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 16px; background: var(--sf-surface); border-bottom: 1px solid var(--sf-border); } .staff-topbar-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sf-text); } /* Manage-device row: name + remove control. */ .staff-manage-row { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* ── Worklist run card (Scheduled + Requested) ───────────────────────────── */ .staff-run-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .staff-run { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 14px; border: 1px solid var(--sf-border); border-left: 4px solid var(--sf-edge); border-radius: 12px; background: var(--sf-raised); } /* Past-due runs get a warm edge so the list scans at a glance. */ .staff-run.is-overdue { border-left-color: var(--sf-danger-edge); background: var(--sf-danger-surface); } .staff-run-body { min-width: 0; /* let long names ellipsize instead of pushing the meta column */ flex: 1 1 auto; } /* The body is a tap target (opens a run of this procedure, carrying the instance ref). Reset the