/*
RestoCare, app-specific layer.
The chrome, buttons, cards, tables, forms, search, chips, badges, metrics,
modal, toast and the work-order board all come from the CANONICAL Resto OS
design system, served from documents/assets and linked BEFORE this file in
this fixed order:
rg-theme.css brand tokens (color, type, radius, light/dark)
rg-components.css app chrome (shell, controls, forms, feedback)
resto-os-applied.css the locked Apple direction + kanban + slide-over
This file therefore defines ONLY the things the kit does not have, all rebased
on the kit's CSS variables so nothing goes off-palette. It must never redefine
a kit token (--radius, --radius-sm, --ease, the palette) or fork a colour. The
single interactive accent is navy (var(--navy) / var(--accent)); there is no
second accent.
App-specific bits kept here: the nav list wrapper, the page-head right side,
a compatibility shim that maps the app's old .badge/.b-* and .kpi to the kit
look, the filters/toolbar, the activity timeline, attachments, the PM calendar,
the notification bell, the work-order chat, the permission matrix, the camera
overlay, the login/setup pages, Tom Select skinning, and the mobile bottom bar.
*/
em, i { font-family: var(--serif, "Spectral", Georgia, serif); font-style: italic; }
/* ---------------- List pager ----------------
Prev / page-count / next, centered under a paginated list. Disabled controls
read as quiet, non-interactive. */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.pager-info { font-size: 13px; color: var(--ink-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager .is-disabled { opacity: 0.45; pointer-events: none; cursor: default; }
/* The hidden attribute must always win, even over flex/inline-flex display rules. */
[hidden] { display: none !important; }
/* Utility text helpers used across templates. */
.muted, td .muted { color: var(--ink-dim); }
td .strong, .strong { font-weight: 600; color: var(--ink-strong); }
.hint { color: var(--ink-dim); font-size: 12px; margin: 4px 0 0; }
.tabular { font-variant-numeric: tabular-nums; }
/* The " FC" suffix on a CDF cost amount is only needed on the mobile reflow,
where there is no column header. On desktop the CDF column header says it. */
.cdf-unit { display: none; }
.mobile-only { display: none; }
.txt-short { display: none; }
/* The mobile "More" tab button and the More sheet exist only on the phone
bottom bar; the desktop sidebar never shows them. */
.mob-more-btn { display: none; }
.more-sheet { display: none; }
/* ---------------- Sidebar nav list + user logout ----------------
The kit styles .app-sidebar, .app-brand, .nav-item and .sidebar-user. We only
need the nav list wrapper to grow and the logout icon button to read on the
glass rail. */
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.sidebar-user .who { flex: 1; min-width: 0; }
.sidebar-user .nav-item.btn-icon { width: 34px; height: 34px; padding: 0; flex: none; }
/* Brand lockup: the real RestoCare logo SVG, displayed as an img so the
sidebar always shows the exact brand asset. Four variants cover the two
theme modes (light/dark) and the two sidebar states (expanded/collapsed).
The selection is done in CSS using data-theme and .nav-collapsed on .
On mobile the brand row is hidden entirely (only the bottom tab bar shows). */
.app-brand { justify-content: space-between; }
.app-brand .brand-link { display: flex; align-items: center; min-width: 0; text-decoration: none; }
.app-brand .brand-link:hover { text-decoration: none; }
/* All four logo variants start hidden; only the right one is shown. */
.bl { display: none; }
/* Expanded sidebar, light mode: full horizontal logo */
html:not(.nav-collapsed)[data-theme="light"] .bl.bl-full.bl-light { display: block; height: 27px; width: auto; }
/* Expanded sidebar, dark mode: reversed full logo */
html:not(.nav-collapsed)[data-theme="dark"] .bl.bl-full.bl-dark { display: block; height: 27px; width: auto; }
/* Collapsed sidebar, light mode: symbol mark only */
html.nav-collapsed[data-theme="light"] .bl.bl-sym.bl-light { display: block; height: 28px; width: 28px; }
/* Collapsed sidebar, dark mode: reversed symbol mark */
html.nav-collapsed[data-theme="dark"] .bl.bl-sym.bl-dark { display: block; height: 28px; width: 28px; }
/* Collapse toggle: a quiet icon button on the brand row. */
.sidebar-toggle {
flex: none; display: grid; place-items: center; width: 30px; height: 30px;
border: none; background: transparent; color: var(--sidebar-ink-dim);
border-radius: 8px; cursor: pointer; padding: 0;
transition: background .18s var(--ease), color .18s var(--ease);
}
.sidebar-toggle:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-ink-strong); }
.sidebar-toggle .ico { width: 18px; height: 18px; transition: transform .42s cubic-bezier(.32,.72,0,1); }
/* ---- Collapsed rail: icons only. State lives on .nav-collapsed so it is
applied before paint (no flash); the kit animates the rail width + label fade.
Labels release their width (so icons centre) while opacity eases them out. */
html.nav-collapsed .app-shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
html.nav-collapsed .app-sidebar { padding-left: 8px; padding-right: 8px; }
html.nav-collapsed .app-brand { flex-direction: column; gap: 10px; justify-content: center; }
html.nav-collapsed .brand-link { justify-content: center; }
html.nav-collapsed .nav-item .txt,
html.nav-collapsed .nav-item .txt-short,
html.nav-collapsed .sidebar-user .who {
opacity: 0; width: 0; overflow: hidden; pointer-events: none;
}
html.nav-collapsed .nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
html.nav-collapsed .nav-item .count { display: none; }
/* Collapsed rail is only 72px, so the avatar + logout cannot sit side by side
(they overflow and the logout gets clipped against the edge). Stack them
vertically and centre, so the footer reads cleanly in the narrow rail. */
html.nav-collapsed .sidebar-user {
flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding-left: 0; padding-right: 0;
}
html.nav-collapsed .sidebar-user .nav-item.btn-icon { margin-left: 0 !important; }
html.nav-collapsed .sidebar-toggle .ico { transform: rotate(180deg); }
/* ---------------- Page head right side ----------------
The kit defines .page-head and .page-head .sub; the right side (primary action
rightmost, page controls left of it) is app glue. */
.page-head .rhs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.page-head .rhs:empty { display: none; }
/* ---------------- Card headers with bare text ----------------
The kit styles .card-head h3, but this app puts the title as plain text (often
beside an action button) directly in .card-head. Give the head itself the
heading treatment so those read like the kit h3; buttons inside reset their
own font weight/size, so they are unaffected. */
.card-head { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-strong); justify-content: space-between; }
.card-head .btn { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.card-head .btn-sm { font-size: 13px; }
/* ---------------- Breadcrumb (in-content, deep pages) ---------------- */
.breadcrumb { font-size: 13px; color: var(--ink-dim); margin-bottom: 14px; }
.breadcrumb a { color: var(--ink-dim); }
.breadcrumb a:hover { color: var(--accent-ink); }
/* ---------------- Flash banner ---------------- */
.flash {
display: flex; align-items: center; gap: 9px;
padding: 12px 16px; border-radius: var(--radius-md);
margin-bottom: 18px; font-size: 14px; font-weight: 600;
background: color-mix(in srgb, var(--green) 8%, transparent);
color: var(--green);
border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}
.flash::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--green); flex: none;
}
/* Error / blocked actions: same banner, red instead of green. */
.flash.flash-error {
background: color-mix(in srgb, var(--red) 8%, transparent);
color: var(--red);
border-color: color-mix(in srgb, var(--red) 40%, transparent);
}
.flash.flash-error::before { background: var(--red); }
/* ---------------- KPI / metric grids (map to the kit metric look) ----------------
Templates use .kpi-grid/.kpi and .metric-row/.metric. We render them as flat
hairline metric cards identical to the kit's .rg-metric. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
/* Clickable KPI (e.g. pending requests -> inbox). */
a.kpi { text-decoration: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
a.kpi:hover { border-color: var(--accent-line); box-shadow: 0 1px 3px rgba(0,0,0,0.06); text-decoration: none; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi, .metric {
background: var(--surface); border: 1px solid var(--hairline);
border-radius: var(--radius); padding: 18px 20px;
}
.kpi .label, .metric .label {
color: var(--ink-dim); font-size: 12px; font-weight: 600;
letter-spacing: 0.02em; margin-bottom: 11px;
}
.kpi .value, .metric .value {
font-size: 32px; font-weight: 900; letter-spacing: -0.02em; line-height: 1;
color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.kpi .value.warn, .metric .value.warn { color: var(--amber); }
.kpi .value.bad, .metric .value.bad { color: var(--red); }
.dash-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
/* ---------------- Table wrapper as a flat kit card ----------------
Templates wrap ledgers in .table-wrap. Render it like a kit card so the row
ledger sits in flat hairline chrome (table.data itself comes from the kit). */
.table-wrap {
background: var(--surface); border: 1px solid var(--hairline);
border-radius: var(--radius); overflow: hidden;
}
/* Status / threshold row tint inside a ledger. */
table.data tr.row-low { background: var(--sev-crit-tint); }
table.data tr.row-low:hover { background: var(--sev-crit-tint); }
/* Totals row. */
table.data tfoot td { border-top: 1px solid var(--ink); font-weight: 700; padding-top: 14px; }
/* ---------------- Badges (compatibility shim -> kit .rg-badge look) ----------------
Templates and _macros emit .badge .b-* with a leading .d dot. We render them
as the kit's outlined pill badge. Navy is the only accent, so .b-blue (used for
non-status states like assigned / in_progress / medium) reads as a neutral ink
badge, not a second accent colour. */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600; line-height: 1;
padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--hairline-2); color: var(--ink-dim);
background: transparent; white-space: nowrap;
}
.badge .d { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-faint); }
.b-green { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.b-amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.b-red { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.b-blue, .b-neutral { color: var(--ink-dim); border-color: var(--hairline-2); }
.b-green .d { background: var(--green); }
.b-amber .d { background: var(--amber); }
.b-red .d { background: var(--red); }
.b-blue .d { background: var(--accent); }
.b-neutral .d { background: var(--ink-faint); }
/* ---------------- Toolbar + filters ----------------
Search lives in the content toolbar (never the topbar corner). The kit styles
buttons/inputs; this is just the row layout + native select skin to match the
kit .select. */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
/* All filters sit on one aligned row: the search box grows to fill, the selects
keep their natural width beside it. They share one height so they line up. */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }
/* Native search box + selects, skinned to the kit input/search (kit only styles
.input/.select classes, these use bare elements, so map them here). */
.filters .search-box, .filters select {
font-family: inherit; font-size: 14px; color: var(--ink-strong);
background: var(--surface); border: 1px solid var(--hairline-2);
border-radius: var(--radius-md); height: var(--ctrl-h, 44px); padding: 0 14px;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.filters .search-box { flex: 1 1 240px; min-width: 200px; max-width: 380px; border-radius: 999px; padding-left: 16px; }
.filters .search-box::placeholder { color: var(--ink-faint); }
.filters select { flex: 0 0 auto; }
/* TomSelect (.searchable) renders a wrapper div instead of the native select and
defaults to full width, which would push the other filters onto a second line.
Pin it to its content so every filter stays on one aligned row at one height. */
.filters .ts-wrapper { flex: 0 0 auto; width: auto; min-width: 170px; }
.filters .ts-wrapper.full { width: auto; }
.filters .ts-wrapper .ts-control { min-height: var(--ctrl-h, 44px); border-radius: var(--radius-md); }
.filters select {
-webkit-appearance: none; appearance: none; padding-right: 34px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.filters .search-box:hover, .filters select:hover { border-color: var(--accent-line); }
.filters .search-box:focus, .filters select:focus {
outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
/* Sortable column headers: the whole header is a quiet link with an arrow on the
active column. */
th.th-sort { padding: 0; }
th.th-sort a { display: flex; align-items: center; gap: 5px; padding: 11px 16px; color: inherit; text-decoration: none; white-space: nowrap; }
th.th-sort.num a { justify-content: flex-end; }
th.th-sort a:hover { color: var(--accent-ink); }
th.th-sort .sort-ind { font-size: 9px; line-height: 1; color: var(--accent-ink); }
th.th-sorted a { color: var(--ink-strong); }
/* Mobile-only sort control (column-header sorting is hidden when the table
reflows into cards). */
.sort-mobile { display: none; align-items: center; gap: 6px; }
.sort-mobile-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.sort-mobile select {
font-family: inherit; font-size: 14px; color: var(--ink-strong);
background: var(--surface); border: 1px solid var(--hairline-2);
border-radius: var(--radius-md); height: 38px; padding: 0 12px;
}
/* ---------------- Native form controls inside .field ----------------
The kit styles .input/.select/.textarea classes. The app's forms use bare
/