/* =====================================================================
RI COOK — Design System
docs/05-UX.md §3. Hand-authored: no build step, no utility soup.
Principles (brief §21, §39):
· speed over decoration — a captain must not wait for an animation
· one status, one visual treatment, everywhere
· dense but never cramped; 8-32px scale
· no gradients, no glassmorphism, two shadows total
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');
/* ---------------------------------------------------------------
1. TOKENS
--------------------------------------------------------------- */
:root {
/* Brand — taken from the Vrindaa mark: its navy and its lotus orange.
Navy reads as systems software; the orange is the food cue, kept for
primary actions and live attention so it never becomes wallpaper. */
--rc-brand-900: #0d1a2d;
--rc-brand-800: #12223a;
--rc-brand-700: #16263f; /* the wordmark's navy */
--rc-brand-600: #1d3355;
--rc-brand-500: #26426b;
--rc-brand-100: #e9edf3;
--rc-accent-700: #d2670f;
--rc-accent-600: #f07c1f; /* the lotus orange */
--rc-accent-500: #f68f3c;
--rc-accent-100: #fdefe0;
/* Surfaces */
--rc-bg: #f6f7f9;
--rc-surface: #ffffff;
--rc-surface-2: #fbfcfd;
--rc-surface-3: #f1f4f8;
--rc-border: #e4e8ee;
--rc-border-strong: #cbd3de;
/* Text */
--rc-text: #101828;
--rc-text-2: #475467;
--rc-text-3: #98a2b3;
--rc-on-brand: #ffffff;
/* Semantic */
--rc-success: #0e9f6e;
--rc-success-bg: #e6f6f0;
--rc-warning: #d97706;
--rc-warning-bg: #fdf3e3;
--rc-danger: #dc2626;
--rc-danger-bg: #fdeaea;
--rc-info: #2563eb;
--rc-info-bg: #e8effd;
/* Type */
--rc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--rc-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
/* Dense scale (dashboard density) */
--rc-1: 4px; --rc-2: 8px; --rc-3: 12px; --rc-4: 16px;
--rc-5: 20px; --rc-6: 24px; --rc-8: 32px; --rc-10: 40px;
--rc-radius: 8px;
--rc-radius-lg: 12px;
--rc-radius-pill: 999px;
/* Exactly two shadows. */
--rc-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
--rc-shadow-lg: 0 12px 24px rgba(16, 24, 40, .12);
--rc-sidebar-w: 236px;
--rc-topbar-h: 56px;
--rc-ease: cubic-bezier(.4, 0, .2, 1);
}
/* Kitchen screens are wall-mounted in bright, steamy rooms — dark mode is
a legibility requirement there, not a preference. */
[data-theme="dark"] {
--rc-bg: #0b1220;
--rc-surface: #131c2b;
--rc-surface-2: #172131;
--rc-surface-3: #1e2a3d;
--rc-border: #26334a;
--rc-border-strong: #384861;
--rc-text: #f1f5f9;
--rc-text-2: #a7b4c8;
--rc-text-3: #6d7d95;
--rc-brand-100: #1e2a3d;
--rc-success-bg: #0d2b22;
--rc-warning-bg: #33250d;
--rc-danger-bg: #3a1717;
--rc-info-bg: #14224a;
--rc-shadow: 0 1px 2px rgba(0, 0, 0, .4);
--rc-shadow-lg: 0 12px 24px rgba(0, 0, 0, .5);
}
/* ---------------------------------------------------------------
2. RESET
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Hidden means hidden. Without !important any component rule that sets `display` beats the
browser's own [hidden] rule, and `el.hidden = true` silently does nothing. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--rc-font);
font-size: 14px;
line-height: 1.5;
color: var(--rc-text);
background: var(--rc-bg);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
/* Never remove focus rings — kitchen and POS screens are keyboard-driven. */
:focus-visible {
outline: 2px solid var(--rc-accent-600);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ---------------------------------------------------------------
3. TYPOGRAPHY
--------------------------------------------------------------- */
.rc-display { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.rc-h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.rc-h2 { font-size: 17px; font-weight: 600; }
.rc-body { font-size: 14px; }
.rc-caption { font-size: 12px; font-weight: 500; color: var(--rc-text-2); }
.rc-label {
font-size: 11px; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: var(--rc-text-3);
}
/* Money and counts must line up vertically when stacked in a column. */
.rc-metric, .rc-num, td.rc-num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
font-weight: 600;
}
.rc-mono { font-family: var(--rc-mono); font-variant-numeric: tabular-nums; }
.rc-muted { color: var(--rc-text-2); }
.rc-dim { color: var(--rc-text-3); }
/* ---------------------------------------------------------------
4. APP SHELL
--------------------------------------------------------------- */
.rc-app { display: flex; min-height: 100vh; }
.rc-sidebar {
width: var(--rc-sidebar-w);
flex: 0 0 var(--rc-sidebar-w);
background: var(--rc-brand-900);
color: #cfd9e4;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.rc-logo {
display: flex; align-items: center; gap: var(--rc-3);
padding: var(--rc-4);
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rc-logo__mark {
width: 32px; height: 32px; border-radius: var(--rc-radius);
background: var(--rc-accent-600);
display: grid; place-items: center;
flex: 0 0 32px;
}
.rc-logo__mark svg { width: 18px; height: 18px; }
.rc-logo__text { font-size: 15px; font-weight: 700; letter-spacing: .12em; color: #fff; }
.rc-logo__text span { color: var(--rc-accent-500); }
/* A tenant logo is usually dark-on-white artwork, so it needs a light plate to sit on
rather than being invisible against the navy rail. */
.rc-logo__img {
max-width: 100%;
max-height: 40px;
object-fit: contain;
background: #fff;
border-radius: 6px;
padding: 5px 8px;
}
.rc-app.is-collapsed .rc-logo__img { max-height: 30px; padding: 3px; }
.rc-branch {
padding: var(--rc-2) var(--rc-4) var(--rc-3);
font-size: 12px; color: #8fa3b8;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rc-nav { padding: var(--rc-3) var(--rc-2); flex: 1; }
.rc-nav__group {
padding: var(--rc-4) var(--rc-3) var(--rc-1);
font-size: 10px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: #64788f;
}
.rc-nav__item {
display: flex; align-items: center; gap: var(--rc-3);
padding: 9px var(--rc-3);
border-radius: var(--rc-radius);
font-size: 13.5px; font-weight: 500;
color: #cfd9e4;
cursor: pointer;
transition: background .15s var(--rc-ease), color .15s var(--rc-ease);
}
.rc-nav__item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rc-nav__item.is-active { background: var(--rc-accent-600); color: #fff; }
.rc-nav__item svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .9; }
.rc-nav__count {
margin-left: auto;
background: rgba(255, 255, 255, .14);
padding: 1px 7px; border-radius: var(--rc-radius-pill);
font-size: 11px; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.rc-nav__item.is-active .rc-nav__count { background: rgba(0, 0, 0, .22); }
.rc-sidebar__user {
display: flex; align-items: center; gap: var(--rc-3);
padding: var(--rc-3) var(--rc-4);
border-top: 1px solid rgba(255, 255, 255, .08);
}
.rc-user { display: flex; align-items: center; gap: var(--rc-3); min-width: 0; flex: 1; }
.rc-user__meta { min-width: 0; }
.rc-user__name {
display: block; font-size: 13px; font-weight: 600; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-user__role { display: block; font-size: 11px; color: #8fa3b8; }
.rc-user__signout { margin-left: auto; }
.rc-user__signout .rc-btn { color: #8fa3b8; }
.rc-user__signout .rc-btn:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.rc-avatar {
width: 30px; height: 30px; border-radius: var(--rc-radius-pill);
background: var(--rc-brand-500); color: #fff;
display: grid; place-items: center;
font-size: 12px; font-weight: 600; flex: 0 0 30px;
}
.rc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-topbar {
height: var(--rc-topbar-h);
background: var(--rc-surface);
border-bottom: 1px solid var(--rc-border);
display: flex; align-items: center; gap: var(--rc-4);
padding: 0 var(--rc-6);
position: sticky; top: 0; z-index: 20;
}
.rc-topbar__title { font-size: 16px; font-weight: 600; }
.rc-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--rc-2); }
.rc-content { padding: var(--rc-6); flex: 1; }
/* ---------------------------------------------------------------
5. CARDS & GRID
--------------------------------------------------------------- */
.rc-card {
background: var(--rc-surface);
border: 1px solid var(--rc-border);
border-radius: var(--rc-radius-lg);
box-shadow: var(--rc-shadow);
}
.rc-card__header {
display: flex; align-items: center; gap: var(--rc-3);
padding: var(--rc-4) var(--rc-5);
border-bottom: 1px solid var(--rc-border);
}
.rc-card__title { font-size: 15px; font-weight: 600; }
.rc-card__body { padding: var(--rc-5); }
.rc-card__actions { margin-left: auto; display: flex; gap: var(--rc-2); }
.rc-grid { display: grid; gap: var(--rc-4); }
.rc-grid--metrics { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rc-grid--cards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
/* Metric tile — the manager's "how are we doing" at a glance. */
.rc-stat { padding: var(--rc-4) var(--rc-5); }
.rc-stat__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-3); }
.rc-stat__value { font-size: 27px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rc-stat__meta { font-size: 12px; color: var(--rc-text-2); margin-top: 2px; }
.rc-stat__delta { font-weight: 600; }
.rc-stat__delta--up { color: var(--rc-success); }
.rc-stat__delta--down { color: var(--rc-danger); }
/* ---------------------------------------------------------------
6. STATUS — one treatment, used everywhere (docs/05-UX.md §3.2)
--------------------------------------------------------------- */
.rc-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px;
border-radius: var(--rc-radius-pill);
font-size: 11.5px; font-weight: 600;
white-space: nowrap;
}
.rc-badge::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; flex: 0 0 6px;
}
.rc-badge--info { background: var(--rc-info-bg); color: var(--rc-info); }
.rc-badge--brand { background: var(--rc-brand-100); color: var(--rc-brand-600); }
.rc-badge--warning { background: var(--rc-warning-bg); color: var(--rc-warning); }
.rc-badge--success { background: var(--rc-success-bg); color: var(--rc-success); }
.rc-badge--success-soft { background: transparent; color: var(--rc-success); border: 1px solid var(--rc-success); }
.rc-badge--danger { background: var(--rc-danger-bg); color: var(--rc-danger); }
.rc-badge--muted { background: var(--rc-surface-3); color: var(--rc-text-2); }
.rc-badge--neutral { background: transparent; color: var(--rc-text-2); border: 1px solid var(--rc-border-strong); }
/* Work in progress pulses; nothing else moves. */
.rc-badge--warning::before { animation: rc-pulse 1.8s ease-in-out infinite; }
@keyframes rc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* ---------------------------------------------------------------
7. BUTTONS
--------------------------------------------------------------- */
.rc-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
min-height: 38px; /* 44px on touch targets below */
padding: 0 var(--rc-4);
border: 1px solid transparent;
border-radius: var(--rc-radius);
font-size: 13.5px; font-weight: 600;
cursor: pointer;
transition: background .15s var(--rc-ease), border-color .15s var(--rc-ease), color .15s var(--rc-ease);
white-space: nowrap;
}
.rc-btn svg { width: 16px; height: 16px; }
.rc-btn--primary { background: var(--rc-accent-600); color: #fff; }
.rc-btn--primary:hover { background: var(--rc-accent-700); }
.rc-btn--secondary { background: var(--rc-surface); color: var(--rc-text); border-color: var(--rc-border-strong); }
.rc-btn--secondary:hover { background: var(--rc-surface-3); }
.rc-btn--ghost { background: transparent; color: var(--rc-text-2); }
.rc-btn--ghost:hover { background: var(--rc-surface-3); color: var(--rc-text); }
.rc-btn--danger { background: var(--rc-danger); color: #fff; }
.rc-btn--danger:hover { filter: brightness(.93); }
.rc-btn--lg { min-height: 48px; padding: 0 var(--rc-6); font-size: 15px; }
.rc-btn--sm { min-height: 30px; padding: 0 var(--rc-3); font-size: 12.5px; }
.rc-btn--block { width: 100%; }
.rc-btn:disabled, .rc-btn.is-loading { opacity: .6; cursor: not-allowed; }
.rc-btn.is-loading::before {
content: ""; width: 14px; height: 14px; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent;
animation: rc-spin .6s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
/* ---------------------------------------------------------------
8. FORMS
--------------------------------------------------------------- */
.rc-field { margin-bottom: var(--rc-4); }
.rc-field__label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.rc-input, .rc-select, .rc-textarea {
width: 100%;
min-height: 40px;
padding: 8px var(--rc-3);
background: var(--rc-surface);
border: 1px solid var(--rc-border-strong);
border-radius: var(--rc-radius);
font-size: 14px;
transition: border-color .15s var(--rc-ease), box-shadow .15s var(--rc-ease);
}
.rc-input:focus, .rc-select:focus, .rc-textarea:focus {
outline: none;
border-color: var(--rc-accent-600);
box-shadow: 0 0 0 3px var(--rc-accent-100);
}
.rc-input::placeholder { color: var(--rc-text-3); }
.rc-field__help { font-size: 12px; color: var(--rc-text-2); margin-top: 5px; }
.rc-field__error { font-size: 12px; color: var(--rc-danger); margin-top: 5px; font-weight: 500; }
.rc-field.has-error .rc-input { border-color: var(--rc-danger); }
.rc-search { position: relative; }
.rc-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--rc-text-3); }
.rc-search .rc-input { padding-left: 34px; }
/* ---------------------------------------------------------------
9. TABLES
--------------------------------------------------------------- */
.rc-table-wrap { overflow-x: auto; } /* never let a table break the page */
.rc-table th {
text-align: left;
font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
color: var(--rc-text-3);
padding: var(--rc-3) var(--rc-4);
border-bottom: 1px solid var(--rc-border);
white-space: nowrap;
}
.rc-table td {
padding: var(--rc-3) var(--rc-4);
border-bottom: 1px solid var(--rc-border);
vertical-align: middle;
}
.rc-table tbody tr { transition: background .12s var(--rc-ease); }
.rc-table tbody tr:hover { background: var(--rc-surface-2); }
.rc-table tbody tr:last-child td { border-bottom: 0; }
.rc-table .rc-num { text-align: right; }
/* ---------------------------------------------------------------
10. ORDER CARD (live board)
--------------------------------------------------------------- */
.rc-order {
position: relative;
background: var(--rc-surface);
border: 1px solid var(--rc-border);
border-left: 3px solid var(--rc-border-strong);
border-radius: var(--rc-radius-lg);
box-shadow: var(--rc-shadow);
overflow: hidden;
}
/* The whole card opens the order.
A card that looks tappable and isn't is worse than a plain list — people click it, nothing
happens, and they stop trusting the screen. The overlay covers the card so any part of it is
the target; real buttons inside lift above it and keep their own destinations. Nesting an
inside an would be invalid HTML, which is why this is an overlay and not a wrapper. */
.rc-order--tappable { cursor: pointer; transition: transform .12s var(--rc-ease), box-shadow .12s var(--rc-ease); }
.rc-order--tappable:hover { transform: translateY(-1px); box-shadow: var(--rc-shadow-lg); }
.rc-order--tappable:focus-within { outline: 2px solid var(--rc-accent-600); outline-offset: 2px; }
.rc-order__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rc-order__link span {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.rc-order__act { position: relative; z-index: 2; }
.rc-order--fresh { border-left-color: var(--rc-info); }
.rc-order--working { border-left-color: var(--rc-warning); }
.rc-order--ready { border-left-color: var(--rc-success); }
.rc-order--late { border-left-color: var(--rc-danger); }
.rc-order__head {
display: flex; align-items: baseline; gap: var(--rc-2);
padding: var(--rc-3) var(--rc-4);
border-bottom: 1px solid var(--rc-border);
}
.rc-order__no { font-family: var(--rc-mono); font-size: 15px; font-weight: 600; }
.rc-order__table { font-weight: 600; }
.rc-order__age { margin-left: auto; font-size: 12px; color: var(--rc-text-3); font-variant-numeric: tabular-nums; }
.rc-order__station { padding: var(--rc-3) var(--rc-4); border-bottom: 1px solid var(--rc-border); }
.rc-order__station:last-child { border-bottom: 0; }
.rc-order__station-head { display: flex; align-items: center; gap: var(--rc-2); margin-bottom: 5px; }
.rc-order__station-name { font-size: 12px; font-weight: 600; color: var(--rc-text-2); }
.rc-order__items { font-size: 13px; color: var(--rc-text); }
.rc-order__foot {
display: flex; align-items: center; gap: var(--rc-2);
padding: var(--rc-3) var(--rc-4);
background: var(--rc-surface-2);
}
/* ---------------------------------------------------------------
10b. PRINT QUEUE ROWS
A print job is invisible when it works and urgent when it does not,
so the healthy states stay quiet and only the broken ones carry an
edge colour the eye lands on first.
--------------------------------------------------------------- */
.rc-printrow {
padding: var(--rc-3) var(--rc-4);
border-left: 3px solid var(--rc-border-strong);
border-bottom: 1px solid var(--rc-border);
background: var(--rc-surface);
}
.rc-printrow:last-child { border-bottom: 0; }
.rc-printrow--success { border-left-color: var(--rc-success); }
.rc-printrow--info { border-left-color: var(--rc-info); }
.rc-printrow--warning { border-left-color: var(--rc-warning); background: var(--rc-warning-bg); }
.rc-printrow--danger { border-left-color: var(--rc-danger); background: var(--rc-danger-bg); }
/* The banner that follows a manager around the app until the queue is healthy again. It is
deliberately not dismissible: an unprinted bill does not stop being unprinted. */
.rc-printalert {
display: flex; align-items: center; gap: var(--rc-3);
padding: var(--rc-3) var(--rc-4);
margin-bottom: var(--rc-4);
border: 1px solid var(--rc-danger);
border-left-width: 3px;
border-radius: var(--rc-radius-lg);
background: var(--rc-danger-bg);
color: var(--rc-danger);
font-size: 13.5px;
}
.rc-printalert strong { font-weight: 700; }
.rc-printalert .rc-btn { margin-left: auto; flex: 0 0 auto; }
/* ---------------------------------------------------------------
11. FLOOR / TABLE TILES
--------------------------------------------------------------- */
/* 132px, not 104px: a tile is a touch target on a manager's phone as often as it is a
glance from across the room, and the amount on the table has to stay readable at both. */
.rc-floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--rc-3); }
.rc-tile {
aspect-ratio: 1 / .82;
min-height: 96px;
border: 1px solid var(--rc-border);
border-radius: var(--rc-radius-lg);
background: var(--rc-surface);
padding: var(--rc-3);
display: flex; flex-direction: column; justify-content: space-between;
cursor: pointer;
transition: transform .12s var(--rc-ease), box-shadow .12s var(--rc-ease);
}
.rc-tile:hover { transform: translateY(-1px); box-shadow: var(--rc-shadow-lg); }
.rc-tile__name { font-weight: 600; font-size: 15px; }
.rc-tile__meta { font-size: 11.5px; color: var(--rc-text-3); display: block; }
.rc-tile__head {
display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
/* The table name must never be pushed around by a growing timer. */
min-width: 0;
}
.rc-tile__head .rc-tile__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tile__head .rc-tile__timer { flex: 0 0 auto; }
.rc-tile__body { margin-top: 2px; }
.rc-tile__amount { display: block; font-size: 15px; font-weight: 700; }
/* Counts up from the moment the order reached the stations; red once it is overdue. */
.rc-tile__timer {
font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
padding: 1px 6px; border-radius: var(--rc-radius-pill);
background: rgba(0, 0, 0, .06); color: var(--rc-text-2);
white-space: nowrap;
}
.rc-tile__timer.is-late { background: var(--rc-danger); color: #fff; }
.rc-tile__actions {
display: flex; gap: 2px; flex-wrap: wrap;
margin-top: auto; padding-top: 4px;
border-top: 1px solid rgba(0, 0, 0, .06);
}
.rc-tile__actions .rc-btn { min-height: 26px; padding: 0 7px; font-size: 11.5px; }
/* Tiles grow when they carry an order: more to show, and they are what gets tapped. */
.rc-tile.has-order { aspect-ratio: auto; min-height: 132px; }
.rc-tile--available { border-color: var(--rc-success); background: var(--rc-success-bg); }
.rc-tile--occupied { border-color: var(--rc-info); background: var(--rc-info-bg); }
.rc-tile--preparing { border-color: var(--rc-warning); background: var(--rc-warning-bg); }
.rc-tile--billing { border-color: var(--rc-brand-500); background: var(--rc-brand-100); }
.rc-tile--reserved { border-style: dashed; }
/* ---------------------------------------------------------------
10c. HUB TILES — Operations and Settings
Big targets on a counter touchscreen, each carrying the number
that decides whether it needs attention.
--------------------------------------------------------------- */
.rc-hub {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--rc-3);
}
.rc-hub__tile {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: var(--rc-3);
min-height: 82px;
padding: var(--rc-4);
background: var(--rc-surface);
border: 1px solid var(--rc-border);
border-radius: var(--rc-radius-lg);
box-shadow: var(--rc-shadow);
color: inherit;
transition: border-color .12s var(--rc-ease), transform .12s var(--rc-ease), box-shadow .12s var(--rc-ease);
}
a.rc-hub__tile:hover { border-color: var(--rc-accent-600); transform: translateY(-1px); box-shadow: var(--rc-shadow-lg); }
.rc-hub__tile.is-idle { opacity: .62; box-shadow: none; border-style: dashed; }
.rc-hub__icon {
display: grid; place-items: center;
width: 44px; height: 44px; border-radius: var(--rc-radius);
background: var(--rc-brand-100); color: var(--rc-brand-700);
}
.rc-hub__body { display: grid; gap: 2px; min-width: 0; }
.rc-hub__body strong { font-size: 15.5px; font-weight: 600; }
.rc-hub__body span { font-size: 12.5px; color: var(--rc-text-2); line-height: 1.35; }
.rc-hub__count {
font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
color: var(--rc-text);
}
.rc-hub__count--muted { color: var(--rc-text-3); font-weight: 500; }
.rc-hub__count--due { color: var(--rc-success); }
.rc-hub__count--bad { color: var(--rc-danger); }
.rc-settings__group {
margin: var(--rc-6) 0 var(--rc-3);
font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--rc-text-3);
}
.rc-settings__group:first-child { margin-top: 0; }
/* A paid order reads as settled at a glance, the way their current till colours them. */
.rc-orders__paid td { background: var(--rc-success-bg); }
.rc-billing__due td { background: var(--rc-success-bg); }
/* ---------------------------------------------------------------
11a. DASHBOARD SEATS — laid out like the till the restaurant
already uses: time on top, table number, amount, then print and
view. Staff moving between the two systems read the same shapes
and colours, so parallel running costs nobody a second habit.
--------------------------------------------------------------- */
:root {
--rc-seat-blank-bg: #eceff3; --rc-seat-blank-edge: #b4bdc9; --rc-seat-blank-ink: #475467;
--rc-seat-run-bg: #fbe27a; --rc-seat-run-edge: #c9a21a; --rc-seat-run-ink: #3a2e04;
--rc-seat-print-bg: #b9ecc9; --rc-seat-print-edge: #2f9e5b; --rc-seat-print-ink: #0b3a20;
--rc-seat-off-bg: #fdeaea; --rc-seat-off-edge: #dc2626; --rc-seat-off-ink: #7f1d1d;
}
[data-theme="dark"] {
--rc-seat-blank-bg: #1e2a3d; --rc-seat-blank-edge: #384861; --rc-seat-blank-ink: #a7b4c8;
--rc-seat-run-bg: #5c4a0a; --rc-seat-run-edge: #c9a21a; --rc-seat-run-ink: #fff4c2;
--rc-seat-print-bg: #14432a; --rc-seat-print-edge: #2f9e5b; --rc-seat-print-ink: #d4f5e0;
--rc-seat-off-bg: #3a1717; --rc-seat-off-edge: #dc2626; --rc-seat-off-ink: #fecaca;
}
/* Fixed-size squares that wrap, rather than columns that stretch: a table should be the same
shape whether the portion holds three tables or thirty. */
.rc-seats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 128px));
gap: var(--rc-3);
}
.rc-seat {
position: relative;
min-height: 124px;
padding: 10px 8px;
border: 1.5px dashed var(--rc-seat-blank-edge);
border-radius: var(--rc-radius-lg);
background: var(--rc-seat-blank-bg);
color: var(--rc-seat-blank-ink);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
text-align: center;
transition: transform .12s var(--rc-ease), box-shadow .12s var(--rc-ease);
}
.rc-seat:has(.rc-seat__link):hover { transform: translateY(-1px); box-shadow: var(--rc-shadow-lg); }
.rc-seat:focus-within { outline: 2px solid var(--rc-accent-600); outline-offset: 2px; }
.rc-seat--running { background: var(--rc-seat-run-bg); border-color: var(--rc-seat-run-edge); color: var(--rc-seat-run-ink); }
.rc-seat--printed { background: var(--rc-seat-print-bg); border-color: var(--rc-seat-print-edge); color: var(--rc-seat-print-ink); }
.rc-seat--reserved { background: var(--rc-surface); }
.rc-seat--off { background: var(--rc-seat-off-bg); border-color: var(--rc-seat-off-edge); color: var(--rc-seat-off-ink); }
.rc-seat__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rc-seat__link span {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.rc-seat__time { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rc-seat__name { font-size: 17px; font-weight: 700; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.rc-seat--blank .rc-seat__name, .rc-seat--reserved .rc-seat__name { font-weight: 600; }
.rc-seat__amount { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rc-seat__note { font-size: 11.5px; font-weight: 600; }
.rc-seat__actions {
position: relative; z-index: 2; /* above the tile link, so each keeps its own target */
display: flex; gap: 5px; margin-top: 6px;
flex-wrap: wrap; justify-content: center;
}
.rc-seat__actions form { display: contents; }
/* Print, view and move have to sit inside a 128px tile: 3 × 30 + gaps. */
.rc-seat__btn {
width: 30px; height: 30px;
display: inline-grid; place-items: center;
border-radius: var(--rc-radius);
border: 1px solid currentColor;
background: rgba(255, 255, 255, .55);
color: inherit;
cursor: pointer;
}
.rc-seat__btn:hover { background: rgba(255, 255, 255, .9); }
[data-theme="dark"] .rc-seat__btn { background: rgba(0, 0, 0, .25); }
/* The key to the colours, read once and then never again. */
.rc-seat-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--rc-text-2); }
.rc-seat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rc-seat-legend i {
width: 14px; height: 14px; border-radius: 4px; border: 1.5px dashed;
background: var(--rc-seat-blank-bg); border-color: var(--rc-seat-blank-edge);
}
.rc-seat-legend i.is-running { background: var(--rc-seat-run-bg); border-color: var(--rc-seat-run-edge); }
.rc-seat-legend i.is-printed { background: var(--rc-seat-print-bg); border-color: var(--rc-seat-print-edge); }
.rc-seat-legend i.is-reserved { background: var(--rc-surface); }
@media (max-width: 640px) {
.rc-seats { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
/* Thumbs, not a mouse — and the row wraps rather than squeezing. */
.rc-seat__btn { width: 36px; height: 36px; }
}
/* ---------------------------------------------------------------
11b. POS — tablet-first ordering. Everything here is sized for a
thumb during a dinner rush, not for a mouse.
--------------------------------------------------------------- */
.rc-pos {
display: grid;
grid-template-columns: 1fr 340px;
gap: var(--rc-4);
align-items: start;
}
.rc-pos__menu { min-width: 0; }
/* "Add more items" on an order: same picker, a slimmer basket because it holds a few lines. */
.rc-pos--inline { grid-template-columns: minmax(0, 1fr) 300px; }
/* With the sidebar open on a laptop, a 340px basket plus a category rail leaves room for one
column of items. Give some of the basket's width back to the menu. */
@media (max-width: 1280px) {
.rc-pos, .rc-pos--inline { grid-template-columns: minmax(0, 1fr) 290px; }
}
.rc-pos__modes { display: flex; gap: var(--rc-2); flex-wrap: wrap; margin-bottom: var(--rc-4); }
.rc-pos__cats {
display: flex; gap: var(--rc-2); flex-wrap: wrap;
margin-bottom: var(--rc-4);
}
.rc-chip {
padding: 7px 14px;
border: 1px solid var(--rc-border-strong);
border-radius: var(--rc-radius-pill);
background: var(--rc-surface);
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: background .15s var(--rc-ease), color .15s var(--rc-ease), border-color .15s var(--rc-ease);
}
.rc-chip:hover { background: var(--rc-surface-3); }
.rc-chip.is-active { background: var(--rc-brand-900); border-color: var(--rc-brand-900); color: #fff; }
/* The menu picker: categories in a rail on the left, items on the right — the arrangement
staff already use on the restaurant's existing till. */
.rc-menu {
display: grid;
grid-template-columns: 208px minmax(0, 1fr);
gap: var(--rc-4);
align-items: start;
}
.rc-menu__rail {
position: sticky; top: calc(var(--rc-topbar-h) + var(--rc-4));
max-height: calc(100vh - var(--rc-topbar-h) - var(--rc-8));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--rc-surface);
border: 1px solid var(--rc-border);
border-radius: var(--rc-radius-lg);
}
.rc-menu__cat {
display: flex; align-items: center; gap: var(--rc-2);
width: 100%; min-height: 44px;
padding: 9px 12px 9px calc(14px + var(--depth, 0) * 14px);
border: 0; border-bottom: 1px solid var(--rc-border); border-left: 3px solid transparent;
background: transparent;
text-align: left; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--rc-text);
cursor: pointer;
transition: background .12s var(--rc-ease);
}
.rc-menu__cat:last-child { border-bottom: 0; }
.rc-menu__cat:hover { background: var(--rc-surface-3); }
.rc-menu__cat[style*="--depth"] { font-size: 13px; color: var(--rc-text-2); }
.rc-menu__cat-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rc-menu__cat-count { font-size: 11.5px; color: var(--rc-text-3); font-variant-numeric: tabular-nums; }
/* Navy text on the pale orange, not orange on orange: the tint alone is under 3:1. */
.rc-menu__cat.is-active {
background: var(--rc-accent-100); border-left-color: var(--rc-accent-600);
color: var(--rc-brand-700); font-weight: 600;
}
.rc-menu__cat--popular .rc-menu__cat-name::before { content: '\2605\00a0'; color: var(--rc-accent-600); }
.rc-menu__main { min-width: 0; display: grid; gap: var(--rc-3); }
.rc-menu__top { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: var(--rc-2); }
.rc-menu__code { font-family: var(--rc-mono); }
.rc-menu__heading { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rc-text-2); }
.rc-menu__none { grid-column: 1 / -1; padding: var(--rc-4) 0; }
@media (max-width: 1100px) {
.rc-menu { grid-template-columns: 170px minmax(0, 1fr); }
}
@media (max-width: 720px) {
/* A phone has no room for a rail: categories become a strip that scrolls sideways. */
.rc-menu { grid-template-columns: 1fr; }
.rc-menu__rail {
position: static; max-height: none;
display: flex; overflow-x: auto; overflow-y: hidden;
}
.rc-menu__cat {
width: auto; flex: 0 0 auto; white-space: nowrap;
padding: 9px 14px; border-bottom: 0; border-left: 0;
border-right: 1px solid var(--rc-border); border-bottom: 3px solid transparent;
}
.rc-menu__cat.is-active { border-bottom-color: var(--rc-accent-600); }
.rc-menu__cat-name { overflow-wrap: normal; }
.rc-menu__top { grid-template-columns: minmax(0, 1fr) 120px; }
}
.rc-pos__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: var(--rc-3);
}
.rc-tile-product {
position: relative;
display: flex; flex-direction: column; justify-content: space-between; gap: var(--rc-2);
min-height: 82px;
padding: var(--rc-3);
text-align: left;
background: var(--rc-surface);
border: 1px solid var(--rc-border);
/* A coloured edge per category, as on the existing till, so the eye finds a section. */
border-left: 4px solid var(--cat, var(--rc-accent-600));
border-radius: var(--rc-radius);
box-shadow: var(--rc-shadow);
cursor: pointer;
transition: border-color .12s var(--rc-ease), transform .08s var(--rc-ease);
}
.rc-tile-product:hover { border-color: var(--rc-accent-600); border-left-color: var(--cat, var(--rc-accent-600)); }
.rc-tile-product:active { transform: scale(.97); } /* tap feedback on a touchscreen */
.rc-tile-product__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; padding-right: 22px; }
.rc-tile-product__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
/* The price is what a captain reads, so it keeps its full width and never breaks between the
symbol and the number; a long short-code is the one that gives way. */
.rc-tile-product__price {
flex: 0 0 auto; white-space: nowrap;
font-size: 13px; font-weight: 600; color: var(--rc-text); font-variant-numeric: tabular-nums;
}
.rc-tile-product__code {
flex: 0 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: var(--rc-mono); font-size: 11px; color: var(--rc-text-2);
}
.rc-tile-product__qty {
position: absolute; top: 6px; right: 6px;
min-width: 22px; height: 22px; padding: 0 6px;
border-radius: var(--rc-radius-pill);
background: var(--rc-accent-600); color: #fff;
font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
.rc-pos__cart {
position: sticky; top: calc(var(--rc-topbar-h) + var(--rc-4));
display: flex; flex-direction: column;
max-height: calc(100vh - var(--rc-topbar-h) - var(--rc-8));
background: var(--rc-surface);
border: 1px solid var(--rc-border);
border-radius: var(--rc-radius-lg);
box-shadow: var(--rc-shadow);
}
.rc-pos__cart-head { padding: var(--rc-4); border-bottom: 1px solid var(--rc-border); }
.rc-pos__cart-head strong { display: block; }
.rc-pos__lines { flex: 1; overflow-y: auto; padding: var(--rc-2); }
.rc-pos__foot { padding: var(--rc-4); border-top: 1px solid var(--rc-border); background: var(--rc-surface-2); }
/* ── Order panel on the New Order screen ─────────────────────────────────────────────
Arranged like the panel on the restaurant's current till: order type across the top, the
table / guests / note / section strip, a three-column item list, then payment and the
send buttons. Staff moving between the two systems find everything in the same place. */
.rc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rc-op { overflow: hidden; }
.rc-op__tabs { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rc-border); }
.rc-op__facts, .rc-op__head, .rc-op__note { flex: 0 0 auto; }
/* A laptop at 768px has about 660px of page once the browser's own chrome is gone. Everything
above the item list gives up a few pixels so the buttons stay where they belong. */
@media (max-height: 880px) {
.rc-op__tab { min-height: 42px; font-size: 14px; }
.rc-op__fact { min-height: 50px; }
.rc-op__empty { min-height: 84px; padding-block: var(--rc-3); }
.rc-op__empty svg { display: none; } /* the plate is decoration; the words are not */
.rc-op__foot { gap: 8px; padding-top: var(--rc-2); }
.rc-op__amount { font-size: 19px; }
.rc-op__actions .rc-btn--lg, .rc-op__foot .rc-btn--lg { min-height: 42px; font-size: 14px; padding-inline: 8px; }
.rc-op__method span { min-height: 32px; }
}
/* Shorter than that and there is no arrangement that fits: stop pinning the panel and let the
page scroll, so the buttons are always reachable even if they are not always in view. */
@media (max-height: 680px) {
.rc-pos__cart { position: static; max-height: none; }
}
.rc-op__tab {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; border: 0; border-bottom: 3px solid transparent;
background: var(--rc-surface); color: var(--rc-text-2);
font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.rc-op__tab + .rc-op__tab { border-left: 1px solid var(--rc-border); }
.rc-op__tab:hover { background: var(--rc-surface-3); }
.rc-op__tab.is-active { background: var(--rc-accent-100); color: var(--rc-brand-700); border-bottom-color: var(--rc-accent-600); }
.rc-op__facts {
display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) 52px minmax(0, 1.2fr);
border-bottom: 1px solid var(--rc-border);
}
.rc-op__fact {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-height: 58px; padding: 6px 4px;
border: 0; border-right: 1px solid var(--rc-border);
background: var(--rc-surface); color: var(--rc-text-2); cursor: pointer;
}
.rc-op__fact:hover { background: var(--rc-surface-3); }
.rc-op__fact select, .rc-op__fact input {
width: 100%; min-width: 0; border: 0; background: transparent;
text-align: center; text-align-last: center;
font-size: 15px; font-weight: 700; color: var(--rc-text);
appearance: none; -moz-appearance: textfield; cursor: pointer;
}
.rc-op__fact input::-webkit-inner-spin-button, .rc-op__fact input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rc-op__fact:focus-within { box-shadow: inset 0 -2px 0 var(--rc-accent-600); }
.rc-op__fact.is-off { opacity: .35; pointer-events: none; }
.rc-op__fact-label { font-size: 11px; font-weight: 600; }
.rc-op__dot { position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--rc-accent-600); }
/* Navy on the orange block: white on this orange fails contrast. */
.rc-op__section {
display: grid; place-items: center; padding: 6px;
background: var(--rc-accent-600); color: var(--rc-brand-900);
font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center;
overflow-wrap: anywhere;
}
.rc-op__note { padding: var(--rc-3) var(--rc-4); border-bottom: 1px solid var(--rc-border); background: var(--rc-surface-2); }
.rc-op__note textarea { resize: vertical; min-height: 56px; }
.rc-op__head, .rc-oline {
display: grid; grid-template-columns: minmax(0, 1fr) 104px 64px; column-gap: 8px; align-items: center;
}
.rc-op__head {
padding: 8px var(--rc-4);
border-bottom: 1px solid var(--rc-border);
font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-2);
}
.rc-op__c { text-align: center; }
.rc-op__r { text-align: right; }
/* The item list is the only part that gives way when the screen is short. `min-height: 0` is
what lets it shrink at all: a flex child refuses to go below its content, and the list was
pushing the KOT buttons out of the bottom of the panel, where they were clipped. */
.rc-op__lines { padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rc-op__empty {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
min-height: 140px; padding: var(--rc-5) var(--rc-4); text-align: center; color: var(--rc-text-2);
}
.rc-op__empty svg { color: var(--rc-text-3); margin-bottom: 6px; }
.rc-op__empty strong { font-size: 15px; color: var(--rc-text); }
.rc-op__empty span { font-size: 13px; }
.rc-oline { padding: 10px var(--rc-4); border-bottom: 1px solid var(--rc-border); row-gap: 6px; }
.rc-oline__main { min-width: 0; display: grid; gap: 1px; }
.rc-oline__name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.rc-oline__notebtn {
justify-self: start; max-width: 100%; padding: 0; border: 0; background: none;
font-size: 12px; color: var(--rc-accent-700); cursor: pointer; text-align: left;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-oline__qty { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rc-oline__qty .rc-num { min-width: 20px; text-align: center; font-weight: 700; }
.rc-oline__price { text-align: right; font-weight: 600; white-space: nowrap; }
.rc-oline__noteinput { grid-column: 1 / -1; }
/* Never shrinks and never scrolls away: the total and the send buttons are the two things that
must be on screen at all times. */
.rc-op__foot {
flex: 0 0 auto;
display: grid; gap: 10px;
padding: var(--rc-3) var(--rc-4) var(--rc-4);
border-top: 1px solid var(--rc-border);
background: var(--rc-surface-2);
}
.rc-op__total { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; }
.rc-op__amount { text-align: right; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-op__amount small { display: block; font-size: 11px; font-weight: 500; color: var(--rc-text-2); }
.rc-op__pay { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rc-op__pay:disabled { opacity: .5; }
.rc-op__method { position: relative; }
.rc-op__method input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rc-op__method span {
display: grid; place-items: center; min-height: 36px; padding: 0 2px;
border: 1px solid var(--rc-border-strong); border-radius: var(--rc-radius);
background: var(--rc-surface); font-size: 12.5px; font-weight: 600;
}
.rc-op__method input:checked + span { border-color: var(--rc-accent-600); background: var(--rc-accent-100); color: var(--rc-brand-700); }
.rc-op__method input:focus-visible + span { outline: 2px solid var(--rc-accent-600); outline-offset: 1px; }
/* KOT across the top because it is pressed most; Save & Print and Save & Bill share the row below. */
.rc-op__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-op__actions > :first-child { grid-column: 1 / -1; }
.rc-op__alt { background: var(--rc-brand-700); color: #fff; padding-inline: 8px; }
.rc-op__alt:hover { background: var(--rc-brand-900); }
/* ── Split payment on the bill screen ───────────────────────────────────────────────── */
.rc-payrows { display: grid; gap: 10px; }
.rc-payrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; gap: 6px; align-items: center; }
.rc-payrow .rc-step { width: 38px; height: 40px; }
.rc-payrow__ref { grid-column: 1 / -1; }
.rc-payrow + .rc-payrow { padding-top: 10px; border-top: 1px dashed var(--rc-border-strong); }
.rc-tally { display: grid; gap: 4px; margin: var(--rc-4) 0; padding: var(--rc-3); border-radius: var(--rc-radius); background: var(--rc-surface-3); }
.rc-tally > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.rc-tally > div span { color: var(--rc-text-2); }
.rc-tally #rc-left-row { padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--rc-border-strong); font-size: 15px; }
.rc-tally #rc-left-row.is-short b, .rc-tally #rc-left-row.is-short span { color: var(--rc-danger); }
.rc-settle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-paid-list { display: grid; gap: 6px; margin: var(--rc-3) 0 0; }
.rc-paid-list > div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.rc-paid-list dt { color: var(--rc-text-2); }
.rc-paid-list dd { margin: 0; font-weight: 600; }
.rc-paid-list__change { font-size: 12.5px !important; }
.rc-paid-list__change dt, .rc-paid-list__change dd { font-weight: 400; color: var(--rc-text-2); }
.rc-paid-list__tip { padding-top: 6px; border-top: 1px dashed var(--rc-border-strong); }
/* Tip: above the payments, because it changes how much there is to collect. */
.rc-tip { margin-bottom: var(--rc-4); }
.rc-tip__row { display: flex; gap: 6px; align-items: center; }
.rc-tip__row .rc-input { flex: 1; min-width: 0; }
.rc-tip__row .rc-btn { flex: 0 0 auto; }
.rc-line { padding: var(--rc-3); border-bottom: 1px solid var(--rc-border); }
.rc-line:last-child { border-bottom: 0; }
.rc-line__top { display: flex; justify-content: space-between; gap: var(--rc-2); margin-bottom: 6px; }
.rc-line__name { font-size: 13.5px; font-weight: 600; }
.rc-line__total { font-size: 13px; }
.rc-line__controls { display: flex; align-items: center; gap: 6px; }
.rc-line__qty { min-width: 22px; text-align: center; font-size: 14px; }
.rc-line__note {
flex: 1; min-width: 0;
padding: 5px 8px;
border: 1px solid var(--rc-border);
border-radius: 6px;
font-size: 12px;
background: var(--rc-surface-2);
}
.rc-line__note:focus { outline: none; border-color: var(--rc-accent-600); }
.rc-step {
width: 30px; height: 30px;
border: 1px solid var(--rc-border-strong);
border-radius: 6px;
background: var(--rc-surface);
font-size: 16px; font-weight: 600; line-height: 1;
cursor: pointer;
transition: background .12s var(--rc-ease);
}
.rc-step:hover { background: var(--rc-surface-3); }
.rc-step--danger { color: var(--rc-danger); border-color: var(--rc-danger); }
@media (max-width: 900px) {
/* On a phone the cart drops below the menu rather than squeezing both. */
.rc-pos, .rc-pos--inline { grid-template-columns: 1fr; }
.rc-pos__cart { position: static; max-height: none; }
.rc-step { width: 38px; height: 38px; }
}
/* ---------------------------------------------------------------
11c. RECEIPT PREVIEW — thermal paper on screen
--------------------------------------------------------------- */
.rc-paper {
font-family: var(--rc-mono);
font-size: 12px;
line-height: 1.45;
white-space: pre;
overflow-x: auto;
margin: 0;
padding: var(--rc-4);
color: #111;
background: #fff;
border: 1px solid var(--rc-border);
border-radius: 6px;
/* Torn-paper edge, so a preview is never mistaken for a finished document. */
box-shadow: inset 0 -12px 12px -12px rgba(0, 0, 0, .2);
}
[data-theme="dark"] .rc-paper { color: #111; background: #f5f5f5; }
/* ---------------------------------------------------------------
12. EMPTY / SKELETON / TOAST
--------------------------------------------------------------- */
.rc-empty { text-align: center; padding: var(--rc-10) var(--rc-6); }
.rc-empty svg { width: 40px; height: 40px; margin: 0 auto var(--rc-3); color: var(--rc-text-3); }
.rc-empty__title { font-weight: 600; margin-bottom: 4px; }
.rc-empty__text { color: var(--rc-text-2); font-size: 13px; margin-bottom: var(--rc-4); }
.rc-skeleton {
background: linear-gradient(90deg, var(--rc-surface-3) 25%, var(--rc-border) 37%, var(--rc-surface-3) 63%);
background-size: 400% 100%;
animation: rc-shimmer 1.4s ease infinite;
border-radius: 6px;
height: 12px;
}
@keyframes rc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.rc-toasts { position: fixed; top: var(--rc-4); right: var(--rc-4); z-index: 100; display: grid; gap: var(--rc-2); }
.rc-toast {
display: flex; align-items: flex-start; gap: var(--rc-3);
min-width: 280px; max-width: 380px;
padding: var(--rc-3) var(--rc-4);
background: var(--rc-surface);
border: 1px solid var(--rc-border);
border-left: 3px solid var(--rc-text-3);
border-radius: var(--rc-radius);
box-shadow: var(--rc-shadow-lg);
animation: rc-slide-in .2s var(--rc-ease);
}
.rc-toast--success { border-left-color: var(--rc-success); }
.rc-toast--error { border-left-color: var(--rc-danger); }
@keyframes rc-slide-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.rc-alert {
display: flex; gap: var(--rc-3); align-items: flex-start;
padding: var(--rc-3) var(--rc-4);
border-radius: var(--rc-radius);
border: 1px solid var(--rc-border);
font-size: 13px;
}
.rc-alert--danger { background: var(--rc-danger-bg); border-color: var(--rc-danger); color: #8c1c1c; }
.rc-alert--warning { background: var(--rc-warning-bg); border-color: var(--rc-warning); }
/* ---------------------------------------------------------------
13. AUTH
--------------------------------------------------------------- */
.rc-auth {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 460px;
background: var(--rc-surface);
}
.rc-auth__brand {
background: var(--rc-brand-900);
color: #fff;
padding: var(--rc-10);
display: flex; flex-direction: column; justify-content: space-between;
}
.rc-auth__pitch { font-size: 28px; font-weight: 600; line-height: 1.25; max-width: 15ch; letter-spacing: -.02em; }
.rc-auth__points { display: grid; gap: var(--rc-3); color: #9fb1c4; font-size: 13.5px; }
.rc-auth__point { display: flex; gap: var(--rc-3); align-items: center; }
.rc-auth__form { padding: var(--rc-10) var(--rc-8); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 880px) {
.rc-auth { grid-template-columns: 1fr; }
.rc-auth__brand { display: none; }
}
/* ---------------------------------------------------------------
13b. DIALOG — native