/* ============================================================ shared.css — Design tokens + shared header + dashboard tiles Used by every page in the unified operations system. ============================================================ */ :root { --font-aptos: 'Aptos', 'Aptos Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Brand colours kept the same — the navy/blue/red trio is part of the visual identity. Tints (blue-lt, red-lt, etc.) lightened a touch for better contrast with their dark text counterparts on small pills + chips. */ --navy: #0a1628; --navy2: #0f1f3a; --navy3: #162847; --blue: #1e4780; --blue2: #2b5fa8; --blue3: #2b5fa8; --blue-lt: #dbe7fa; --red: #c0152a; --red-lt: #fbdde2; --green: #15803d; --green-lt: #d1ecdc; --amber: #b45309; --amber-lt: #fbe5c4; --surface: #ffffff; /* App background (page) and panel background (cards-on-page) now have a meaningful 4-step luminance gap so a card sitting on the page actually reads as a card instead of bleeding into the surrounding chrome. */ --bg: #eef2f8; --bg2: #e1e7f0; /* Borders bumped from "barely visible against white" to "clearly visible against white". Hairlines were ~1.15:1 contrast — at a normal viewing distance card/input edges effectively didn't exist. New values clear ~1.5–1.9:1 which is the modern UI sweet spot (still subtle, but reads as a real edge). */ --border: #cdd5e3; --border2: #b3bdd0; /* Text greys were the main contrast offender. Old values: --ink3 #5a6b86 ≈ 4.4:1 (borderline AA — fails for small text) --ink4 #8a97ad ≈ 2.8:1 (FAILS AA for normal body text) New values clear AA (4.5:1) on white, which is what we need for small UI labels + field-help + sub-text. Body/heading colours unchanged — they were already strong. */ --ink: #0a1628; /* 17.4:1 — body / headings */ --ink2: #2d3f5e; /* 8.7:1 — secondary body */ --ink3: #475569; /* 6.7:1 — UI labels (was 4.4:1, borderline) */ --ink4: #64748b; /* 4.5:1 — hints + meta (was 2.8:1, failed AA) */ --r: 4px; --r2: 8px; /* Subtle inset ring + drop shadow — cards now lift off the page instead of looking flush. The ring is the main contrast lever (works on darker page backgrounds too); the soft drop carries a tiny bit of physicality without being noisy. */ --sh: 0 1px 2px rgba(10,22,40,.08), 0 0 0 1px rgba(10,22,40,.04); --sh2: 0 12px 32px rgba(10,22,40,.22); } *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body.shared-body { background: var(--bg); color: var(--ink); font-family: var(--font-aptos); font-size: 15px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Plain zeros — no slash/dot through them. Aptos enables a slashed zero ("zero") by default; turn it off ERP-wide. */ font-feature-settings: "zero" 0; font-variant-numeric: normal; } /* ── Per-user theme overrides ──────────────────────────────── Applied by /shared/header.js after auth/me resolves — the matched theme name becomes a class on . Adding a new one is a) add an entry in USER_THEMES in header.js, and b) define the matching --token overrides here. theme-pink: requested by Liz/Elizabeth. The token approach means every component that already uses --blue3 / --blue / --blue-lt for accent gets re-skinned automatically. We swap only the blue family + page bg + borders so contrast stays readable; ink colours stay the same. */ body.shared-body.theme-pink { --blue: #b8348a; /* deep magenta-pink, replaces nav blue */ --blue2: #d44ea3; --blue3: #d44ea3; --blue-lt: #fde4f1; /* soft pink tint for chips + soft buttons */ --bg: #fdf2f8; /* page bg — barely-pink */ --bg2: #fce7f3; /* card bg / dividers — slightly more pink */ --border: #f3c9dc; --border2: #ec9ec3; --navy: #4a1a32; /* dark plum — replaces navy headings */ --navy2: #5a223e; --navy3: #6a2a4a; } /* Header keeps the standard light surface — same as every other page and as her own cards. The earlier dark-plum header bar made the pink accent text (links, clock, user picker) unreadable; the pink border-bottom (--border) already ties the strip into the theme. */ body.shared-body.theme-pink .app-header { background: var(--surface); color: var(--ink); } body.shared-body.theme-pink .dash-tile { border-left-color: #ec9ec3; } /* Liz's Diet Coke cursor — applied by setupUserCursor() in header.js, toggleable from the wee 🥤 button in the top bar. Same pattern as Sanjay's pride cursor on the Sales Station. */ body.cursor-coke, body.cursor-coke * { cursor: url('/diet-coke-cursor.png') 12 3, auto !important; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 0; } /* ── Shared header ─────────────────────────────────────────── */ .app-header { background: var(--surface); color: var(--ink); height: 68px; border-bottom: 1px solid var(--border); padding: 0 28px; display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 300; box-shadow: var(--sh); } .app-header .ah-logo { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; color: inherit; flex-shrink: 0; } /* Renamed from .ah-logo-svg → .ah-logo-img on Apr 28 when the inline-SVG SARKAR text logo was replaced with the PNG asset at /sarkar-logo.png. Keeping the same 42px display height so the rest of the header geometry doesn't shift. */ .app-header .ah-logo-img { height: 42px; width: auto; flex-shrink: 0; display: block; } .app-header .ah-logo-sub-text { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink3); font-weight: 600; border-left: 1px solid var(--border); padding-left: 10px; line-height: 1.3; } .app-header .ah-home-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; padding: 6px 14px; border: 1px solid var(--border2); background: var(--bg); color: var(--ink2); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--r); transition: background .12s, border-color .12s; } .app-header .ah-home-btn:hover { background: var(--bg2); border-color: var(--blue3); color: var(--blue3); } .app-header .ah-home-btn.hidden { display: none; } .app-header .ah-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border2); background: var(--bg); color: var(--ink2); text-decoration: none; font-size: 14px; font-weight: 700; border-radius: 50%; transition: background .12s, border-color .12s; } .app-header .ah-help-btn:hover { background: var(--bg2); border-color: var(--blue3); color: var(--blue3); } .app-header .ah-center { margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; font-variant-numeric: tabular-nums; } .app-header .ah-clock-time, .app-header .ah-clock-date { width: 100%; text-align: center; } .app-header .ah-clock-time { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: 1px; } .app-header .ah-clock-date { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink3); margin-top: 3px; } /* Extra world clocks (non-sales users) beside the main Glasgow clock, styled to match it. Injected by setupWorldClocks() in header.js. */ .app-header .ah-wc { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; line-height: 1.15; font-variant-numeric: tabular-nums; } .app-header .ah-wc-time { font-size: 17px; font-weight: 600; color: var(--ink2); letter-spacing: .5px; } .app-header .ah-wc-sub { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink3); margin-top: 2px; } /* Glasgow (the middle clock) is the prominent one — a size up + bolder. */ .app-header .ah-center.ah-center-main .ah-clock-time { font-size: 28px; } .app-header .ah-center.ah-center-main .ah-clock-date { font-size: 12px; } @media (max-width: 760px) { .app-header .ah-wc { padding: 0 9px; } .app-header .ah-wc-time { font-size: 14px; } .app-header .ah-wc-sub { font-size: 9px; } .app-header .ah-center.ah-center-main .ah-clock-time { font-size: 20px; } } .app-header .ah-right { display: flex; align-items: center; gap: 12px; } .app-header .ah-user { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--r); padding: 5px 10px 5px 14px; min-width: 180px; } .app-header .ah-user.unset { background: var(--red-lt); border-color: rgba(192,21,42,.4); } .app-header .ah-user label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink4); font-weight: 600; } .app-header .ah-user select, .app-header .ah-user input { background: transparent; border: none; color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; outline: none; min-width: 90px; } .ah-status { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--r); font-size: 11px; line-height: 1.3; min-width: 180px; } .ah-status.ok { border-color: rgba(34,197,94,.4); background: var(--green-lt); } .ah-status.warn { border-color: rgba(245,158,11,.45); background: var(--amber-lt); } .ah-status.down { border-color: rgba(192,21,42,.5); background: var(--red-lt); } .ah-status-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); letter-spacing: .5px; text-transform: uppercase; font-size: 10px; } .ah-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b7a90; flex-shrink: 0; } .ah-status.ok .ah-status-dot { background: #22c55e; } .ah-status.warn .ah-status-dot { background: #f59e0b; } .ah-status.down .ah-status-dot { background: #ef4444; } .ah-status-line { color: var(--ink3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .ah-status-line strong { color: var(--ink2); font-weight: 600; letter-spacing: .3px; margin-right: 4px; } /* ── Dashboard tiles ──────────────────────────────────────── */ .dash-main { padding: 40px 32px 64px; max-width: 1650px; /* widened ~25% for large screens */ margin: 0 auto; } .dash-intro { margin-bottom: 32px; } .dash-intro h1 { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; } .dash-intro p { color: var(--ink3); margin-top: 6px; font-size: 14px; } .dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } /* Multi-line sections (e.g. Recipes & Patterns, Shipping) stack several .dash-tiles rows under one label — keep the same 18px rhythm between rows as within them. */ .dash-tiles + .dash-tiles { margin-top: 18px; } /* "split" variant — used on rows where one tile (e.g. Pricing Engine) sits visually apart from its neighbours. Flexbox + margin-left:auto on the .pin-right tile pushes it to the right edge of the row, leaving a visible gap when there's spare width. Falls back to normal wrapping on narrow viewports. */ .dash-tiles.split-row { display: flex; flex-wrap: wrap; gap: 18px; } .dash-tiles.split-row > .dash-tile { flex: 1 1 280px; min-width: 280px; max-width: 420px; } .dash-tiles.split-row > .pin-right { margin-left: auto; } .dash-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); box-shadow: var(--sh); text-decoration: none; color: inherit; min-height: 124px; transition: border-color .15s, box-shadow .15s, transform .1s; } .dash-tile:hover { border-color: var(--blue3); box-shadow: var(--sh2); transform: translateY(-1px); } .dash-tile.disabled { pointer-events: none; opacity: .58; background: var(--bg2); } .dash-tile-num { /* The little "01 / 02 / 03…" reference numbers (and a handful of duplicate emoji icons) used to live in the top-right corner of every home-page tile. Operators don't navigate by number — the tile title is the affordance — so the numbers were just visual noise. Hidden globally rather than stripped from the markup so re-enabling is one CSS line if we ever need them back. */ display: none; position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 700; color: var(--ink4); letter-spacing: 1px; } .dash-tile-icon { font-size: 24px; line-height: 1; margin-bottom: 8px; } .dash-tile-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.1px; } .dash-tile-sub { font-size: 12.5px; color: var(--ink3); line-height: 1.45; } .dash-tile-badge { align-self: flex-start; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); background: var(--amber-lt); border: 1px solid rgba(180,83,9,.3); padding: 3px 8px; border-radius: 3px; } .dash-tile-badge.live { color: var(--green); background: var(--green-lt); border-color: rgba(21,128,61,.25); } /* ── Generic page shell ───────────────────────────────────── */ .page-main { padding: 32px 28px 64px; max-width: 1750px; /* widened ~25% for large screens */ margin: 0 auto; } /* Prominent back row — sits at the top of a detail page, ABOVE the page-header. Big, top-left, hard to mis-click. Used by item / order / sample / reservation detail pages where the small "Back" button kept getting confused with the home-tile click target. */ .back-bar { margin-bottom: 14px; } .btn-back-prominent { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r); font-family: var(--font-aptos); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, transform .08s; box-shadow: var(--sh); } .btn-back-prominent:hover { background: var(--bg2); border-color: var(--blue3); color: var(--blue3); } .btn-back-prominent:active { transform: translateY(1px); } .btn-back-prominent .arrow { font-size: 18px; line-height: 1; font-weight: 900; color: var(--blue3); } /* Breadcrumb trail rendered by /shared/back-button.js — replaces the single .btn-back-prominent so users see every level back to the dashboard and can click any of them. The first link keeps the leading arrow so the bar still reads as a "back" affordance at a glance. */ .breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); font-family: var(--font-aptos); font-size: 13px; box-shadow: var(--sh); max-width: 100%; } .breadcrumb .bc-link { color: var(--ink2); text-decoration: none; font-weight: 600; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; transition: background .12s, color .12s; } .breadcrumb .bc-link:hover { background: var(--bg2); color: var(--blue3); } .breadcrumb .bc-link .arrow { font-size: 14px; font-weight: 900; color: var(--blue3); margin-right: 2px; } /* The leading ← (up one level) reads as a distinct control: a hairline divider separates it from the breadcrumb crumbs that follow. */ .breadcrumb .bc-back { margin-right: 4px; padding-right: 8px; border-right: 1px solid var(--border); } .breadcrumb .bc-back .arrow { margin-right: 0; } /* Single "Return" button (back-button.js renders just this one link). */ .breadcrumb .bc-back-single { font-weight: 700; gap: 5px; } .breadcrumb .bc-back-single .arrow { margin-right: 2px; } .breadcrumb .bc-sep { color: var(--ink4); font-weight: 700; user-select: none; padding: 0 2px; } .breadcrumb .bc-current { color: var(--ink); font-weight: 700; padding: 2px 6px; } .page-header { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); } .page-header .page-sub { color: var(--ink3); font-size: 13px; margin-top: 2px; } .page-header .page-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ── Cards / panels ───────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); box-shadow: var(--sh); overflow: hidden; } /* Use the general sibling combinator (~) instead of adjacent (+) so the spacing still applies when a `