/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #030d0e #182524 #f5f8f8 #155a62 #1f6f78 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f5f8f8; --surface: #fbfcfc; --surface-2: #e9ecec; --border: #d3d7d7; --border-strong: #acb2b2; --ink: #182524; --muted: #676f6f; --accent: #155a62; --accent-hover: #124d53; --accent-ink: #ffffff; --accent-text: #1f6f78; --accent-strong: #155a62; --accent-soft: #d6e2e3; --accent-border: #90b1b5; --success: #15803d; --success-ink: #ffffff; --success-soft: #daeae2; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #ede4db; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #eedede; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #030d0e; --surface: #1c2526; --surface-2: #10191a; --border: #262f30; --border-strong: #4f5656; --ink: #f5f8f8; --muted: #949a9a; --accent: #155a62; --accent-hover: #38737a; --accent-ink: #ffffff; --accent-text: #588890; --accent-strong: #659299; --accent-soft: #071e20; --accent-border: #0b3034; --success: #15803d; --success-ink: #ffffff; --success-soft: #072618; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2a1c0d; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2b1011; --danger-strong: #d16969; } /* * app.css — Waypoint's own stylesheet. Loads after design.css and theme.css, * so everything here wins. Retunes the system toward a dispatcher's board: * crisp, dense, legible — and adds the one piece of markup the system does * not have, the three-column run board. */ :root { --radius-sm: 5px; --radius: 9px; --radius-lg: 14px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent); --shadow-raised: 0 10px 24px color-mix(in srgb, var(--ink) 10%, transparent); } /* ---- the board -------------------------------------------------------- */ .board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; } @media (max-width: 860px) { .board { grid-template-columns: 1fr; } } .board-col { background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--s-4); display: flex; flex-direction: column; min-height: 140px; } .board-col > * + * { margin-top: var(--s-3); } .board-col-head { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-1) var(--s-1); } .board-col-head .badge { margin-left: auto; } .board-col-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .board-col-dot-pending { background: var(--warning); } .board-col-dot-in_transit { background: var(--accent); } .board-col-dot-delivered { background: var(--success); } .board-col-body { display: flex; flex-direction: column; } .board-col-body > * + * { margin-top: var(--s-3); } /* ---- run cards ---------------------------------------------------------- */ .run-card { padding: var(--s-4); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow 180ms ease, transform 180ms ease; } .run-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); } .run-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); } .run-driver { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .run-driver > div { min-width: 0; } .run-card-body { display: flex; flex-direction: column; } .run-card-body > * + * { margin-top: var(--s-1); } .run-card-body > div { display: flex; align-items: center; gap: var(--s-1); } .run-card-body .icon { color: var(--muted); flex: 0 0 auto; } .run-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); } .run-card-foot .icon { vertical-align: -2px; } /* ---- filter bar ------------------------------------------------------- */ #filter-bar .input-group { flex: 1 1 240px; min-width: 200px; } #filter-bar .select-wrap { flex: 0 0 180px; } #filter-bar .select-wrap .select { width: 100%; } /* ---- misc ---------------------------------------------------------------- */ .empty-quiet { padding: var(--s-6) var(--s-2); text-align: center; color: var(--muted); font-size: var(--t-sm); } .stat-alert .stat-value { color: var(--danger-strong); } @media (prefers-reduced-motion: reduce) { .run-card, .run-card:hover { transition: none; transform: none; } }