Jens/MobilityOps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): introduce Control Rail design system and shell

Browse Source
This commit is contained in:
NuklearRabbit
2026-08-02 03:27:00 +02:00
parent 73e361002d
commit d0f34e6933
5 changed files with 526 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Icons.tsx
+71
View File
@@ -0,0 +1,71 @@
import type { SVGProps } from "react";
export type IconName =
| "activity"
| "alert"
| "arrow-left"
| "audit"
| "bookings"
| "check"
| "chevron"
| "clock"
| "fleet"
| "integrations"
| "knowledge"
| "logout"
| "menu"
| "quality"
| "search"
| "shield"
| "spark"
| "user"
| "x";
const paths: Record<IconName, JSX.Element> = {
activity: <><path d="M3 12h4l2.5-6 5 12 2.5-6h4" /></>,
alert: <><path d="M10.3 3.4 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.4a2 2 0 0 0-3.4 0Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></>,
"arrow-left": <><path d="m15 18-6-6 6-6" /></>,
audit: <><path d="M9 4h6" /><path d="M9 2h6v4H9z" /><path d="M7 4H5a2 2 0 0 0-2 2v14h18V6a2 2 0 0 0-2-2h-2" /><path d="m8 13 2 2 5-5" /></>,
bookings: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M16 3v4M8 3v4M3 10h18" /></>,
check: <><path d="m5 12 4 4L19 6" /></>,
chevron: <><path d="m9 18 6-6-6-6" /></>,
clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
fleet: <><path d="m5 16-1 3h2" /><path d="m19 16 1 3h-2" /><path d="M4 16h16l-1.4-6.2A2.3 2.3 0 0 0 16.4 8H7.6a2.3 2.3 0 0 0-2.2 1.8L4 16Z" /><path d="M6 13h12" /><circle cx="7" cy="16" r="1" /><circle cx="17" cy="16" r="1" /></>,
integrations: <><circle cx="12" cy="12" r="3" /><circle cx="5" cy="6" r="2" /><circle cx="19" cy="6" r="2" /><circle cx="12" cy="20" r="2" /><path d="m7 7.5 2.7 2.3m4.6 0L17 7.5M12 15v3" /></>,
knowledge: <><path d="M4 5.5A3.5 3.5 0 0 1 7.5 2H11v18H7.5A3.5 3.5 0 0 0 4 23V5.5Z" /><path d="M20 5.5A3.5 3.5 0 0 0 16.5 2H13v18h3.5A3.5 3.5 0 0 1 20 23V5.5Z" /></>,
logout: <><path d="M10 17l5-5-5-5M15 12H3" /><path d="M14 4h5a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-5" /></>,
menu: <><path d="M4 7h16M4 12h16M4 17h16" /></>,
quality: <><path d="m12 3 2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.5 5-.7L12 3Z" /></>,
search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></>,
shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" /><path d="m9 12 2 2 4-4" /></>,
spark: <><path d="m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3Z" /><path d="m19 15 .8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z" /></>,
user: <><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></>,
x: <><path d="m6 6 12 12M18 6 6 18" /></>,
};
export function Icon({ name, ...props }: { name: IconName } & SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
focusable="false"
{...props}
>
{paths[name]}
</svg>
);
}
export function BrandMark({ className = "" }: { className?: string }) {
return (
<svg className={className} aria-hidden="true" viewBox="0 0 32 32" fill="none">
<path d="M5 23V8l7.1 8L19 8h8v15h-5V14l-9.9 11L10 22.6V23H5Z" fill="currentColor" />
<path d="M3 15.5h26" stroke="#2dd4bf" strokeWidth="2.5" />
</svg>
);
}
frontend/src/components/Layout.tsx
+96 -39
View File
@@ -1,19 +1,34 @@
import { useState } from "react";
import { NavLink, Outlet, useNavigate } from "react-router-dom";
import { useAuth } from "../context/AuthContext";
import { BrandMark, Icon, type IconName } from "./Icons";
const NAV_ITEMS = [
{ to: "/dashboard", label: "Dashboard" },
{ to: "/vehicles", label: "Vehicles" },
{ to: "/bookings", label: "Bookings" },
{ to: "/data-quality", label: "Data Quality" },
{ to: "/knowledge", label: "Knowledge" },
{ to: "/automation", label: "Automation" },
{ to: "/audit", label: "Audit" },
const NAV_GROUPS: Array<{ label: string; items: Array<{ to: string; label: string; shortLabel: string; icon: IconName }> }> = [
{
label: "Operate",
items: [
{ to: "/dashboard", label: "Overview", shortLabel: "Overview", icon: "activity" },
{ to: "/vehicles", label: "Fleet", shortLabel: "Fleet", icon: "fleet" },
{ to: "/bookings", label: "Bookings", shortLabel: "Bookings", icon: "bookings" },
{ to: "/data-quality", label: "Data quality", shortLabel: "Quality", icon: "quality" },
],
},
{
label: "Assure",
items: [
{ to: "/knowledge", label: "Knowledge", shortLabel: "Knowledge", icon: "knowledge" },
{ to: "/automation", label: "Integrations", shortLabel: "Systems", icon: "integrations" },
{ to: "/audit", label: "Audit trail", shortLabel: "Audit", icon: "audit" },
],
},
];
const MOBILE_ITEMS = NAV_GROUPS.flatMap((group) => group.items).slice(0, 5);
export function Layout() {
const { user, logout } = useAuth();
const navigate = useNavigate();
const [mobileOpen, setMobileOpen] = useState(false);
function handleLogout() {
logout();
@@ -22,38 +37,80 @@ export function Layout() {
return (
<div className="app-shell">
<p className="demo-banner">
Synthetic demo environment — no real customer or vehicle data.
</p>
<header className="app-header">
<span className="brand">MobilityOps</span>
<nav aria-label="Primary">
<ul>
{NAV_ITEMS.map((item) => (
<li key={item.to}>
<NavLink to={item.to} className={({ isActive }) => (isActive ? "active" : "")}>
{item.label}
</NavLink>
</li>
))}
</ul>
</nav>
<div className="user-badge">
{user && (
<>
<span>
{user.display_name} · {user.role === "operations_manager" ? "Operations Manager" : "Rental Employee"}
</span>
<button type="button" onClick={handleLogout}>
Switch role
</button>
</>
)}
<a className="skip-link" href="#main-content">Skip to main content</a>
<aside className={`sidebar ${mobileOpen ? "is-open" : ""}`}>
<div className="brand-lockup">
<BrandMark className="brand-mark" />
<div><strong>MobilityOps</strong><span>Control centre</span></div>
</div>
</header>
<main id="main-content">
<Outlet />
</main>
<nav aria-label="Primary navigation">
{NAV_GROUPS.map((group) => (
<div className="nav-group" key={group.label}>
<p>{group.label}</p>
<ul>
{group.items.map((item) => (
<li key={item.to}>
<NavLink to={item.to} onClick={() => setMobileOpen(false)}>
<Icon name={item.icon} />
<span>{item.label}</span>
</NavLink>
</li>
))}
</ul>
</div>
))}
</nav>
<div className="sidebar-foot">
<span className="environment-dot" />
<div><strong>Demo environment</strong><span>Synthetic data only</span></div>
</div>
</aside>
{mobileOpen && <button className="nav-scrim" aria-label="Close navigation" onClick={() => setMobileOpen(false)} />}
<div className="app-workspace">
<header className="topbar">
<button className="icon-button mobile-menu" type="button" onClick={() => setMobileOpen(true)} aria-label="Open navigation">
<Icon name="menu" />
</button>
<label className="global-search">
<Icon name="search" />
<span className="visually-hidden">Search MobilityOps</span>
<input type="search" placeholder="Search fleet, booking or customer…" />
<kbd>Ctrl K</kbd>
</label>
<div className="topbar-meta">
<span className="timezone"><Icon name="clock" /> Europe/Brussels</span>
{user && (
<div className="operator">
<span className="avatar">{user.display_name.split(" ").map((name) => name[0]).join("").slice(0, 2)}</span>
<span><strong>{user.display_name}</strong><small>{user.role === "operations_manager" ? "Operations manager" : "Rental employee"}</small></span>
</div>
)}
<button className="icon-button" type="button" onClick={handleLogout} aria-label="Switch role" title="Switch demo role">
<Icon name="logout" />
</button>
</div>
</header>
<p className="demo-banner"><Icon name="shield" /> Synthetic demo data · no real customer or vehicle information</p>
<main id="main-content" tabIndex={-1}><Outlet /></main>
<footer className="app-footer"><span>MobilityOps PoC</span><span>Europe/Brussels · Synthetic demo data</span></footer>
</div>
<nav className="mobile-nav" aria-label="Mobile navigation">
{MOBILE_ITEMS.map((item) => (
<NavLink key={item.to} to={item.to}>
<Icon name={item.icon} />
<span>{item.shortLabel}</span>
</NavLink>
))}
<button type="button" onClick={() => setMobileOpen(true)}>
<Icon name="menu" />
<span>More</span>
</button>
</nav>
</div>
);
}
frontend/src/components/PageChrome.tsx
+85
View File
@@ -0,0 +1,85 @@
import type { ReactNode } from "react";
import { Icon, type IconName } from "./Icons";
export function PageHeader({
eyebrow,
title,
description,
actions,
}: {
eyebrow: string;
title: string;
description?: string;
actions?: ReactNode;
}) {
return (
<header className="page-header">
<div>
<p className="page-eyebrow">{eyebrow}</p>
<h1>{title}</h1>
{description && <p className="page-description">{description}</p>}
</div>
{actions && <div className="page-actions">{actions}</div>}
</header>
);
}
export function SectionHeading({
title,
description,
action,
}: {
title: string;
description?: string;
action?: ReactNode;
}) {
return (
<div className="section-heading">
<div>
<h2>{title}</h2>
{description && <p>{description}</p>}
</div>
{action}
</div>
);
}
export function LoadingState({ label = "Loading workspace…" }: { label?: string }) {
return (
<div className="state-panel" role="status">
<span className="spinner" aria-hidden="true" />
<p>{label}</p>
</div>
);
}
export function ErrorState({ message }: { message: string }) {
return (
<div className="state-panel state-error" role="alert">
<Icon name="alert" />
<div><strong>We couldn’t load this workspace.</strong><p>{message}</p></div>
</div>
);
}
export function EmptyState({
icon = "check",
title,
detail,
}: {
icon?: IconName;
title: string;
detail: string;
}) {
return (
<div className="state-panel state-empty">
<Icon name={icon} />
<div><strong>{title}</strong><p>{detail}</p></div>
</div>
);
}
export function IntegrationMark({ kind }: { kind: "n8n" | "rag" | "mcp" }) {
const labels = { n8n: "n8n", rag: "RA", mcp: "MC" };
return <span className={`integration-mark integration-${kind}`} aria-hidden="true">{labels[kind]}</span>;
}
frontend/src/pages/Login.tsx
+36 -23
View File
@@ -2,6 +2,7 @@ import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../context/AuthContext";
import type { Role } from "../api/types";
import { BrandMark, Icon } from "../components/Icons";
export function Login() {
const { loginAs, loading } = useAuth();
@@ -20,31 +21,43 @@ export function Login() {
return (
<main className="login-shell">
<p className="demo-banner">
Synthetic demo environment — no real customer or vehicle data.
</p>
<section className="login-hero">
<p className="eyebrow">Synthetic proof of concept</p>
<h1>MobilityOps</h1>
<p>Connected operations for vehicle rental and service teams.</p>
<section className="login-story" aria-labelledby="product-name">
<div className="brand-lockup login-brand"><BrandMark className="brand-mark" /><div><strong>MobilityOps</strong><span>Control centre</span></div></div>
<div className="login-message">
<p className="eyebrow">Connected mobility operations</p>
<h1 id="product-name">Every hand-off.<br />One clear view.</h1>
<p>Turn fleet state, rental returns, data quality and automation into one calm operational rhythm.</p>
</div>
<div className="control-illustration" aria-hidden="true">
<div className="illustration-orbit orbit-one"><span /></div>
<div className="illustration-orbit orbit-two"><span /></div>
<div className="illustration-core"><BrandMark /></div>
<span className="illustration-node node-one"><Icon name="fleet" /></span>
<span className="illustration-node node-two"><Icon name="bookings" /></span>
<span className="illustration-node node-three"><Icon name="quality" /></span>
</div>
<p className="login-footnote"><Icon name="shield" /> Synthetic proof of concept · no real customer data</p>
</section>
<section className="login-panel panel" aria-labelledby="login-heading">
<h2 id="login-heading">Choose a demo role</h2>
{error && (
<p className="error" role="alert">
{error}
</p>
)}
<div className="login-options">
<button type="button" disabled={loading} onClick={() => handleLogin("operations_manager")}>
Open as Operations Manager
</button>
<p>See the dashboard, resolve data-quality issues, retry automation and reset the demo.</p>
<button type="button" disabled={loading} onClick={() => handleLogin("rental_employee")}>
Open as Rental Employee
</button>
<p>Register vehicle returns and look up bookings, vehicles and procedures.</p>
<section className="login-access" aria-labelledby="login-heading">
<div className="login-panel">
<p className="page-eyebrow">Demo access</p>
<h2 id="login-heading">Choose your workspace</h2>
<p className="login-intro">No password is required. Each role opens a scoped synthetic environment.</p>
{error && <p className="error" role="alert">{error}</p>}
<div className="login-options">
<button type="button" aria-label="Open as Operations Manager" disabled={loading} onClick={() => handleLogin("operations_manager")}>
<span className="role-icon"><Icon name="activity" /></span>
<span><strong>Operations Manager</strong><small>Full overview, quality resolution and retries</small></span>
<Icon name="chevron" />
</button>
<button type="button" aria-label="Open as Rental Employee" disabled={loading} onClick={() => handleLogin("rental_employee")}>
<span className="role-icon"><Icon name="user" /></span>
<span><strong>Rental Employee</strong><small>Bookings, returns, fleet and procedures</small></span>
<Icon name="chevron" />
</button>
</div>
<div className="access-note"><Icon name="shield" /><p><strong>Safe by design</strong><span>All actions are audited and resettable in this demo.</span></p></div>
</div>
</section>
</main>
frontend/src/styles.css
+238 -234
View File
@@ -1,265 +1,269 @@
:root {
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
color: #172033;
background: #f3f6fa;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #0f172a;
background: #f5f7fa;
font-synthesis: none;
--ink: #0f172a;
--ink-soft: #344256;
--muted: #657386;
--muted-light: #94a0af;
--canvas: #f5f7fa;
--surface: #ffffff;
--surface-subtle: #f8fafc;
--line: #dbe2ea;
--line-strong: #c7d1dd;
--petrol: #0f172a;
--petrol-2: #15243a;
--teal: #0f8f83;
--teal-dark: #0b6f67;
--teal-pale: #e7f7f4;
--critical: #c93636;
--critical-pale: #fff0f0;
--warning: #b96812;
--warning-pale: #fff7e8;
--info: #356480;
--info-pale: #eef6fb;
--success: #17724b;
--success-pale: #eaf7f0;
--focus: #14b8a6;
--radius: 4px;
--shadow-float: 0 16px 40px rgba(15, 23, 42, .12);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: #1f5c8f; }
:focus-visible { outline: 3px solid #1f5c8f; outline-offset: 2px; }
* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
a:hover { color: var(--teal); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: #a7f3d0; color: var(--ink); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important; border: 0 !important;
}
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-160%); background: white; color: var(--ink); padding: 10px 16px; border: 2px solid var(--teal); border-radius: var(--radius); }
.skip-link:focus { transform: none; }
.demo-banner {
margin: 0;
padding: 8px 16px;
background: #14324f;
color: #eaf2fb;
font-size: 0.85rem;
text-align: center;
}
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 224px; display: flex; flex-direction: column; background: var(--petrol); color: #dbe5ef; border-right: 1px solid #24344b; }
.brand-lockup { height: 72px; display: flex; align-items: center; gap: 11px; padding: 0 20px; border-bottom: 1px solid #26364c; }
.brand-mark { width: 31px; height: 31px; color: white; flex: 0 0 auto; }
.brand-lockup div { display: grid; gap: 2px; }
.brand-lockup strong { color: white; font-size: .95rem; letter-spacing: -.02em; }
.brand-lockup span { color: #8291a5; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.sidebar nav { flex: 1; padding: 22px 12px; overflow: auto; }
.nav-group + .nav-group { margin-top: 26px; }
.nav-group > p { margin: 0 10px 8px; color: #74849a; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.nav-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.nav-group a { position: relative; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 9px 11px; color: #b7c3d1; text-decoration: none; border-radius: var(--radius); font-size: .86rem; font-weight: 600; transition: background .16s ease, color .16s ease, transform .16s ease; }
.nav-group a svg { width: 18px; height: 18px; }
.nav-group a:hover { background: rgba(255,255,255,.06); color: white; }
.nav-group a.active { background: #183b49; color: #5eead4; }
.nav-group a.active::before { content: ""; position: absolute; left: -12px; width: 3px; height: 22px; background: #2dd4bf; }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin: 12px; padding: 13px 10px; border: 1px solid #2a394e; border-radius: var(--radius); }
.sidebar-foot div { display: grid; gap: 2px; }
.sidebar-foot strong { font-size: .72rem; color: #dbe5ef; }
.sidebar-foot span:not(.environment-dot) { font-size: .66rem; color: #7f8da1; }
.environment-dot, .live-indicator { width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 4px rgba(45, 212, 191, .12); }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-workspace { grid-column: 2; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 64px; display: flex; align-items: center; gap: 20px; padding: 0 28px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.global-search { width: min(410px, 42vw); min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 10px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.global-search svg { width: 16px; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .8rem; }
.global-search kbd { padding: 2px 5px; border: 1px solid var(--line); background: white; color: var(--muted); font-size: .64rem; border-radius: 3px; }
.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.timezone { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.timezone svg { width: 15px; }
.operator { display: flex; align-items: center; gap: 9px; padding-left: 17px; border-left: 1px solid var(--line); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; color: white; background: var(--petrol); border-radius: 50%; font-size: .67rem; font-weight: 700; }
.operator > span:last-child { display: grid; gap: 1px; }
.operator strong { font-size: .74rem; }
.operator small { color: var(--muted); font-size: .64rem; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.icon-button:hover { background: var(--surface-subtle); border-color: var(--line); }
.icon-button svg { width: 18px; height: 18px; }
.mobile-menu { display: none; }
.demo-banner { min-height: 32px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 20px; color: #48566a; background: #eaf0f5; border-bottom: 1px solid #d7e0e8; font-size: .68rem; font-weight: 600; letter-spacing: .02em; }
.demo-banner svg { width: 14px; height: 14px; }
#main-content { width: min(1320px, calc(100% - 56px)); margin: 0 auto; padding: 38px 0 64px; flex: 1; }
.app-footer { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 28px; color: var(--muted); border-top: 1px solid var(--line); font-size: .68rem; }
.mobile-nav, .nav-scrim { display: none; }
.app-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 14px 24px;
background: white;
border-bottom: 1px solid #dce3eb;
}
.brand { font-weight: 800; font-size: 1.15rem; color: #172033; }
.app-header nav ul {
display: flex;
flex-wrap: wrap;
gap: 4px;
list-style: none;
margin: 0; padding: 0;
}
.app-header nav a {
display: inline-block;
padding: 8px 12px;
border-radius: 8px;
color: #375065;
text-decoration: none;
font-weight: 600;
}
.app-header nav a.active, .app-header nav a[aria-current="page"] {
background: #e5eef9;
color: #14324f;
}
.user-badge { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 0.9rem; }
.user-badge button {
padding: 6px 12px;
border-radius: 8px;
border: 1px solid #cfd8e2;
background: white;
cursor: pointer;
}
.page { animation: page-in .28s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-eyebrow, .eyebrow { margin: 0 0 7px; color: var(--teal-dark); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
.page-header h1 { margin: 0; color: var(--ink); font-size: clamp(1.75rem, 2.5vw, 2.2rem); line-height: 1.12; letter-spacing: -.035em; }
.page-description { max-width: 660px; margin: 8px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.page-actions, .status-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.section-heading { min-height: 60px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
.section-heading > a { min-height: 30px; display: inline-flex; align-items: center; gap: 4px; color: var(--teal-dark); text-decoration: none; font-size: .72rem; font-weight: 700; }
.section-heading > a svg { width: 14px; }
.back-link { width: max-content; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 13px; color: var(--muted); text-decoration: none; font-size: .76rem; font-weight: 600; }
.back-link svg { width: 15px; }
#main-content { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; flex: 1; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; font-size: .78rem; font-weight: 700; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 16px; height: 16px; }
.button-primary { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
.button-primary:hover { color: white; background: var(--teal); }
.button-secondary { color: var(--ink); background: white; border-color: var(--line-strong); }
.button-secondary:hover { color: var(--ink); background: var(--surface-subtle); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.page h1 { margin-top: 0; }
.page section { margin-bottom: 28px; }
.readiness-band { min-height: 92px; display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(540px, 4fr) auto; align-items: stretch; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.readiness-label { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-right: 1px solid var(--line); }
.readiness-label h2 { margin: 0; font-size: .83rem; }
.readiness-label p { margin: 3px 0 0; color: var(--muted); font-size: .65rem; }
.readiness-metrics { min-width: 0; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; }
.metric-cell { position: relative; display: flex; flex-direction: column-reverse; justify-content: center; gap: 3px; padding: 12px 16px; border-right: 1px solid var(--line); }
.metric-cell::after { content: ""; position: absolute; inset: auto 15px 0; height: 2px; background: #9aa6b4; }
.metric-cell dt { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; }
.metric-cell dd { margin: 0; color: var(--ink); font-size: 1.42rem; font-weight: 700; letter-spacing: -.04em; }
.metric-ready::after { background: var(--teal); }.metric-warning::after { background: var(--warning); }.metric-critical::after { background: var(--critical); }
.metric-warning dd { color: var(--warning); }.metric-critical dd { color: var(--critical); }
.inline-action { display: inline-flex; align-items: center; gap: 5px; padding: 0 18px; color: var(--teal-dark); text-decoration: none; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.inline-action svg { width: 14px; }
.panel {
background: white;
border: 1px solid #dce3eb;
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 30px rgba(24, 40, 64, .05);
}
.operations-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr); gap: 16px; margin-bottom: 16px; }
.secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.work-panel, .panel, .record-surface, .table-shell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel { padding: 20px; }
.queue-controls { display: flex; gap: 8px; padding: 11px 18px; background: var(--surface-subtle); border-bottom: 1px solid var(--line); }
.queue-controls select, .compact-search { height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: white; }
.compact-search { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--muted); }
.compact-search svg { width: 14px; }
.compact-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: .72rem; }
.queue-controls select { padding: 0 28px 0 9px; color: var(--ink-soft); font-size: .69rem; }
.attention-list, .integration-list, .recent-list, .record-list, .automation-list, .today-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { min-height: 68px; display: grid; grid-template-columns: auto minmax(0,1fr) auto 16px; align-items: center; gap: 11px; padding: 10px 18px; border-bottom: 1px solid #e8edf2; transition: background .14s ease; }
.attention-list li:last-child { border-bottom: 0; }.attention-list li:hover { background: #f9fbfc; }
.attention-title { margin: 0; font-size: .78rem; font-weight: 700; }.attention-title a { color: var(--ink); text-decoration: none; }
.attention-detail { max-width: 58ch; margin: 4px 0 0; color: var(--muted); font-size: .69rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-ref { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; }.row-chevron { width: 14px; color: var(--muted-light); }
.quiet-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 28px 18px; color: var(--muted); font-size: .78rem; }.quiet-empty svg { width: 18px; }
.movement-timeline { list-style: none; margin: 0; padding: 8px 18px 15px; }
.movement-timeline li { display: grid; grid-template-columns: 48px 26px 1fr; align-items: center; min-height: 58px; }
.movement-timeline time { color: var(--ink); font-size: .75rem; font-weight: 700; }
.timeline-node { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; color: var(--teal-dark); background: white; border: 1px solid var(--teal); border-radius: 50%; }
.timeline-node::after { content: ""; position: absolute; z-index: -1; top: 21px; height: 37px; border-left: 1px dashed var(--line-strong); }
.movement-timeline li:last-child .timeline-node::after { display: none; }.timeline-node svg { width: 12px; }
.timeline-departure { color: var(--info); border-color: #6a98b3; }
.movement-timeline li > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; }
.movement-kind { color: var(--muted); font-size: .59rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.movement-timeline a { color: var(--ink); font-size: .75rem; font-weight: 700; text-decoration: none; }.movement-timeline small { grid-column: 2; color: var(--muted); font-size: .66rem; }
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
list-style: none;
margin: 0; padding: 0;
}
.metric-tile {
background: white;
border: 1px solid #dce3eb;
border-radius: 14px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.metric-value { font-size: 1.8rem; font-weight: 800; }
.metric-label { color: #607084; font-size: 0.85rem; }
.integration-list li, .recent-list li { min-height: 60px; display: flex; align-items: center; gap: 11px; padding: 10px 18px; border-bottom: 1px solid #e8edf2; }
.integration-list li:last-child, .recent-list li:last-child { border-bottom: 0; }.integration-list li > div, .recent-list li > div { flex: 1; display: grid; gap: 3px; }
.integration-list strong, .recent-list strong { font-size: .73rem; }.integration-list div span, .recent-list div span { color: var(--muted); font-size: .65rem; }
.integration-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: var(--radius); color: white; font-size: .58rem; font-weight: 800; letter-spacing: -.04em; }
.integration-n8n { background: #e85d36; }.integration-rag { background: #4a4b95; }.integration-mcp { background: #314358; }
.activity-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: 50%; }.activity-icon svg { width: 15px; }
.recent-list time { color: var(--muted); font-size: .62rem; white-space: nowrap; }
.attention-list, .today-list, .automation-list, .record-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.attention-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #edf1f5; }
.attention-title { margin: 0; font-weight: 700; }
.attention-detail { margin: 2px 0 0; color: #607084; font-size: 0.9rem; }
.badge { min-height: 20px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid transparent; border-radius: 999px; font-size: .59rem; font-weight: 700; line-height: 1.2; text-transform: capitalize; white-space: nowrap; }
.badge::before, .badge-dot { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.severity-high, .status-failed, .status-blocked, .status-rejected, .status-unavailable { color: #9f2929; background: var(--critical-pale); border-color: #f3c5c5; }
.severity-medium, .status-pending, .status-delivering, .status-needs_attention { color: #93520c; background: var(--warning-pale); border-color: #eed4aa; }
.severity-low { color: #315f79; background: var(--info-pale); border-color: #c8dfeb; }
.status-succeeded, .status-resolved, .status-available, .status-returned, .status-active { color: #17633f; background: var(--success-pale); border-color: #bfe3d0; }
.status-cancelled, .status-deferred, .status-cleaning, .status-maintenance, .status-rented, .status-reserved, .status-not_configured, .status-no_events, .status-no_delivery_yet { color: #536172; background: #f0f3f6; border-color: #d8dfe6; }
.badge-dot { display: inline-block; }
.today-list li, .automation-list li, .record-list li {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
padding: 8px 0; border-bottom: 1px solid #edf1f5;
}
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
border: 1px solid transparent;
white-space: nowrap;
}
.severity-high { background: #fbe6e6; color: #8f2323; border-color: #f2b9b9; }
.severity-medium { background: #fdf1de; color: #8a5a10; border-color: #f0d29e; }
.severity-low { background: #eaf1fb; color: #315d73; border-color: #c4d9ec; }
.status-open, .status-pending, .status-active, .status-failed { background: #fdf1de; color: #8a5a10; border-color: #f0d29e; }
.status-failed { background: #fbe6e6; color: #8f2323; border-color: #f2b9b9; }
.status-succeeded, .status-resolved, .status-available, .status-returned { background: #e6f5ec; color: #1f6d3d; border-color: #b9e0c9; }
.status-blocked, .status-rejected { background: #fbe6e6; color: #8f2323; border-color: #f2b9b9; }
.status-cancelled, .status-deferred, .status-cleaning, .status-maintenance, .status-rented, .status-reserved, .status-delivering {
background: #eef1f5; color: #47566b; border-color: #d7dfe8;
}
.filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-bottom: 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: #375065; font-weight: 600; }
.filters select, .filters input[type="text"] { padding: 8px 10px; border: 1px solid #cfd8e2; border-radius: 8px; font-size: 0.95rem; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.filters label, .return-form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: .67rem; font-weight: 700; letter-spacing: .01em; }
.filters input[type="text"], .filters select, .return-form input[type="number"], .return-form textarea, .knowledge-input-row input { min-height: 40px; padding: 8px 11px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: .78rem; }
.filters input[type="text"] { min-width: 230px; }.filters select { min-width: 160px; }
.checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; accent-color: var(--teal-dark); }
.data-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid #dce3eb; border-radius: 12px; overflow: hidden; }
.data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #edf1f5; font-size: 0.92rem; }
.data-table thead th { background: #f6f8fb; color: #47566b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }
.table-shell { overflow: hidden; }
.table-meta { min-height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; color: var(--muted); background: var(--surface-subtle); border-bottom: 1px solid var(--line); font-size: .65rem; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { height: 50px; text-align: left; padding: 9px 14px; border-bottom: 1px solid #e8edf2; font-size: .74rem; vertical-align: middle; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .14s ease; }.data-table tbody tr:hover { background: #f9fbfc; }
.data-table thead th { height: 38px; color: var(--muted); background: #f6f8fa; font-size: .61rem; font-weight: 700; text-transform: uppercase; letter-spacing: .075em; }
.data-table th[scope="row"] { color: var(--ink); font-weight: 700; }.data-table th[scope="row"] a { color: var(--teal-dark); text-decoration: none; }
.row-attention { box-shadow: inset 2px 0 var(--warning); }.attention-flag { color: var(--warning); font-size: .67rem; font-weight: 700; }
.data-table td button, .duplicate-compare > button, .resolution-actions button, .confirm-bar button, .pagination button { min-height: 36px; padding: 7px 12px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: .7rem; font-weight: 700; cursor: pointer; }
.data-table td button:hover, .pagination button:hover:not(:disabled) { background: var(--surface-subtle); }.data-table td button:disabled, .pagination button:disabled { opacity: .45; cursor: not-allowed; }
.table-subtext { display: block; margin-top: 3px; color: var(--muted); font-size: .62rem; }.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pagination { min-height: 52px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }
details summary { cursor: pointer; color: var(--teal-dark); }.data-table details pre { max-width: 280px; overflow: auto; color: var(--ink-soft); white-space: pre-wrap; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #dce3eb; margin: 16px 0; }
.tabs button {
padding: 8px 14px; border: none; background: none; cursor: pointer;
border-bottom: 3px solid transparent; font-weight: 600; color: #607084;
}
.tabs button.active { color: #14324f; border-bottom-color: #1f5c8f; }
.tabs { display: flex; gap: 2px; margin: 0 0 16px; padding: 0 4px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; min-height: 44px; padding: 8px 13px; border: 0; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: capitalize; cursor: pointer; }
.tabs button.active { color: var(--teal-dark); }.tabs button.active::after { content: ""; position: absolute; inset: auto 7px -1px; height: 2px; background: var(--teal); }
.record-surface { padding: 18px; margin-bottom: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.detail-grid div { min-height: 76px; padding: 13px 14px; background: white; }
.detail-grid dt { margin: 0; color: var(--muted); font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .065em; }.detail-grid dd { margin: 7px 0 0; color: var(--ink); font-size: .82rem; font-weight: 700; }
.record-list { display: grid; gap: 1px; margin-bottom: 16px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.record-list li { min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 11px; padding: 10px 14px; background: white; font-size: .75rem; }
.detail-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.detail-grid div { background: white; border: 1px solid #dce3eb; border-radius: 10px; padding: 10px 14px; }
.detail-grid dt { color: #607084; font-size: 0.8rem; margin: 0; }
.detail-grid dd { margin: 4px 0 0; font-weight: 700; }
.return-form, .return-result { max-width: 880px; margin-top: 22px; padding: 0; overflow: hidden; }
.return-form > .section-heading { padding: 19px 22px; }.return-progress { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 22px; color: var(--muted); background: var(--surface-subtle); border-bottom: 1px solid var(--line); font-size: .65rem; font-weight: 700; }
.return-progress span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }.return-progress i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-style: normal; }
.return-progress b { width: 54px; height: 1px; background: var(--line-strong); }.return-progress .is-active, .return-progress .is-complete { color: var(--teal-dark); }.return-progress .is-active i, .return-progress .is-complete i { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
.return-capture, .return-review { padding: 22px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 17px; }
.condition-fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 17px; padding: 0; border: 0; }.condition-fieldset legend { margin-bottom: 8px; color: var(--ink-soft); font-size: .67rem; font-weight: 700; }.check-card { min-height: 48px; padding: 10px 12px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius); }
.return-form textarea { resize: vertical; min-height: 86px; }.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; background: var(--surface-subtle); border-top: 1px solid var(--line); }
.review-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 0 0 16px; background: var(--line); border: 1px solid var(--line); }.review-facts div { padding: 12px; background: white; }.review-facts dt { color: var(--muted); font-size: .6rem; text-transform: uppercase; }.review-facts dd { margin: 6px 0 0; font-size: .76rem; font-weight: 700; }
.impact-preview { display: flex; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid; border-radius: var(--radius); }.impact-preview > svg { width: 20px; flex: 0 0 auto; }.impact-preview strong { font-size: .76rem; }.impact-preview p { margin: 4px 0 0; font-size: .72rem; line-height: 1.45; }.impact-ready { color: #185d41; background: var(--success-pale); border-color: #bfe3d0; }.impact-warning { color: #844909; background: var(--warning-pale); border-color: #eed4aa; }
.commit-list { list-style: none; display: grid; gap: 7px; margin: 16px 0 0; padding: 0; color: var(--muted); font-size: .7rem; }.commit-list li { display: flex; gap: 7px; }.commit-list svg { width: 14px; color: var(--teal-dark); }
.success-panel { padding: 22px; }.result-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }.result-heading > span { width: 40px; height: 40px; display: grid; place-items: center; color: white; background: var(--success); border-radius: 50%; }.result-heading svg { width: 20px; }.result-heading h2 { margin: 0; font-size: 1.2rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.error { color: #9a2530; font-weight: 600; }
.duplicate-compare { margin-top: 18px; }.duplicate-compare fieldset { margin: 15px 0; padding: 13px; border: 1px solid var(--line); }.duplicate-compare legend { padding: 0 5px; color: var(--ink-soft); font-size: .69rem; font-weight: 700; }.duplicate-compare fieldset label { display: inline-flex !important; margin-right: 18px; }
.compare-table th, .compare-table td { vertical-align: top; }.compare-table label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }.difference-mark, .match-mark { display: block; width: max-content; margin-top: 4px; padding: 2px 5px; font-size: .52rem; border-radius: 2px; }.difference-mark { color: var(--warning); background: var(--warning-pale); }.match-mark { color: var(--success); background: var(--success-pale); }
.merge-preview { padding: 13px; color: var(--ink-soft); background: var(--surface-subtle); border-left: 3px solid var(--teal); font-size: .75rem; }.duplicate-compare > button { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
.confirm-bar { margin-top: 13px; padding: 15px; background: var(--warning-pale); border: 1px solid #eed4aa; }.confirm-bar p { margin: 0 0 11px; color: #75420c; font-size: .75rem; font-weight: 700; }.confirm-bar button:first-of-type { color: white; background: var(--critical); border-color: var(--critical); }
.resolution-actions { display: flex; gap: 9px; }.evidence-block { max-width: 100%; padding: 13px; overflow: auto; color: #324054; background: var(--surface-subtle); border: 1px solid var(--line); font-size: .68rem; }
.login-shell { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0; }
.login-hero { margin-bottom: 24px; }
.eyebrow { color: #315d73; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.login-hero h1 { margin: 6px 0; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; }
.login-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.login-options button {
padding: 14px 18px; border-radius: 12px; border: none;
background: #14324f; color: white; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.login-options button:hover, .login-options button:focus-visible { background: #1f5c8f; }
.login-options p { margin: 0 0 8px; color: #607084; font-size: 0.9rem; }
.integration-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }.integration-cards article { min-height: 170px; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 18px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }.integration-cards .badge { grid-column: 1 / -1; width: max-content; align-self: end; }.integration-cards h2 { margin: 3px 0 7px; font-size: .95rem; }.integration-cards p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.48; }.integration-kicker { color: var(--muted); font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.return-form, .return-result { margin-top: 24px; max-width: 520px; }
.return-form label {
display: flex; flex-direction: column; gap: 4px;
font-weight: 600; color: #375065; font-size: 0.9rem; margin-bottom: 14px;
}
.return-form input[type="number"], .return-form textarea {
padding: 8px 10px; border: 1px solid #cfd8e2; border-radius: 8px; font-size: 0.95rem; font-family: inherit;
}
.return-form .checkbox-label { flex-direction: row; align-items: center; gap: 8px; }
.return-form button {
padding: 12px 20px; border-radius: 10px; border: none;
background: #14324f; color: white; font-weight: 700; cursor: pointer;
}
.return-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.return-result .error { margin-top: 12px; }
.knowledge-status { min-height: 58px; display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding: 10px 16px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }.knowledge-status div { flex: 1; display: grid; gap: 3px; }.knowledge-status strong { font-size: .74rem; }.knowledge-status span:not(.health-orb), .knowledge-status small { color: var(--muted); font-size: .65rem; }.health-orb { width: 9px; height: 9px; border-radius: 50%; }.health-orb.is-healthy { background: var(--success); box-shadow: 0 0 0 4px var(--success-pale); }.health-orb.is-down { background: var(--critical); box-shadow: 0 0 0 4px var(--critical-pale); }
.knowledge-form { margin-bottom: 18px; }.ask-heading { display: flex; gap: 11px; align-items: center; margin-bottom: 15px; }.ask-heading > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: var(--radius); }.ask-heading svg { width: 18px; }.ask-heading h2 { margin: 0; font-size: .95rem; }.ask-heading p { margin: 3px 0 0; color: var(--muted); font-size: .65rem; }
.knowledge-input-row { display: flex; gap: 8px; }.knowledge-input-row input { min-width: 0; flex: 1; }.knowledge-empty { min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--muted); background: white; border: 1px dashed var(--line-strong); border-radius: var(--radius); }.knowledge-empty > span { width: 50px; height: 50px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: 50%; }.knowledge-empty svg { width: 22px; }.knowledge-empty h2 { margin: 15px 0 7px; color: var(--ink); font-size: 1rem; }.knowledge-empty p { max-width: 540px; margin: 0; font-size: .75rem; line-height: 1.5; }
.retrieval-flow { display: flex; align-items: center; gap: 8px; margin-top: 24px; }.retrieval-flow span { padding: 6px 9px; color: var(--ink-soft); background: var(--surface-subtle); border: 1px solid var(--line); font-size: .61rem; font-weight: 700; }.retrieval-flow i { width: 24px; border-top: 1px dashed var(--teal); }
.exchange-list, .source-cards { list-style: none; margin: 0; padding: 0; }.exchange-list { display: grid; gap: 14px; }.exchange-question { display: grid; gap: 5px; margin: 0 0 10px; font-size: .85rem; }.exchange-question strong { color: var(--muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }.evidence-state { width: max-content; padding: 4px 8px; border-radius: 999px; font-size: .62rem; font-weight: 700; }.evidence-grounded { color: var(--success); background: var(--success-pale); }.evidence-insufficient { color: var(--warning); background: var(--warning-pale); }.evidence-unavailable { color: var(--critical); background: var(--critical-pale); }
.source-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 9px; margin-top: 13px; }.source-card { padding: 13px; background: var(--surface-subtle); border: 1px solid var(--line); }.source-title { margin: 0; font-size: .73rem; font-weight: 700; }.source-version { color: var(--muted); font-size: .62rem; }.source-section { margin: 5px 0; color: var(--teal-dark); font-size: .65rem; font-weight: 700; }.source-excerpt { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.duplicate-compare fieldset {
border: 1px solid #dce3eb; border-radius: 10px; padding: 12px 16px; margin: 12px 0;
}
.duplicate-compare legend { font-weight: 700; color: #375065; padding: 0 6px; }
.duplicate-compare fieldset label { margin-right: 20px; }
.compare-table th, .compare-table td { vertical-align: top; }
.compare-table label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.duplicate-compare > button {
padding: 12px 20px; border-radius: 10px; border: none;
background: #14324f; color: white; font-weight: 700; cursor: pointer; margin-top: 12px;
}
.confirm-bar {
margin-top: 12px; padding: 14px; border-radius: 10px;
background: #fdf1de; border: 1px solid #f0d29e;
}
.confirm-bar p { margin: 0 0 10px; font-weight: 600; color: #8a5a10; }
.confirm-bar button {
padding: 10px 16px; border-radius: 8px; border: none; font-weight: 700; cursor: pointer; margin-right: 8px;
}
.confirm-bar button:first-of-type { background: #9a2530; color: white; }
.confirm-bar button:last-of-type { background: white; border: 1px solid #cfd8e2; }
.state-panel { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px; color: var(--muted); background: white; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }.state-panel svg { width: 24px; color: var(--critical); }.state-panel strong { color: var(--ink); font-size: .82rem; }.state-panel p { margin: 4px 0 0; font-size: .73rem; }.spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin .7s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }.state-empty svg { color: var(--teal-dark); }
.error { color: #9f2929; font-size: .74rem; font-weight: 600; }
.evidence-block {
background: #f6f8fb; border: 1px solid #dce3eb; border-radius: 10px;
padding: 12px; overflow-x: auto; font-size: 0.85rem;
}
.resolution-actions { display: flex; gap: 10px; margin-top: 12px; }
.resolution-actions button {
padding: 10px 18px; border-radius: 8px; border: 1px solid #cfd8e2;
background: white; font-weight: 700; cursor: pointer;
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(430px, .95fr); background: white; }
.login-story { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: 34px 7vw 30px; overflow: hidden; color: white; background: var(--petrol); }
.login-brand { height: auto; padding: 0; border: 0; }.login-brand .brand-mark { width: 36px; height: 36px; }.login-brand strong { font-size: 1.05rem; }.login-message { position: relative; z-index: 2; max-width: 620px; margin: auto 0 22px; }.login-message .eyebrow { color: #5eead4; }.login-message h1 { margin: 0; color: white; font-size: clamp(2.8rem, 5.5vw, 5.4rem); line-height: .98; letter-spacing: -.06em; }.login-message > p:last-child { max-width: 520px; margin: 23px 0 0; color: #a9b7c8; font-size: .98rem; line-height: 1.65; }
.control-illustration { position: absolute; width: min(35vw, 500px); aspect-ratio: 1; right: -80px; top: 7vh; opacity: .88; }.illustration-orbit { position: absolute; inset: 10%; border: 1px solid #29435a; border-radius: 50%; }.orbit-two { inset: 28%; border-style: dashed; transform: rotate(35deg); }.illustration-orbit::before, .illustration-orbit::after { content: ""; position: absolute; background: #2dd4bf; border-radius: 50%; }.illustration-orbit::before { width: 7px; height: 7px; top: 13%; left: 16%; }.illustration-orbit::after { width: 5px; height: 5px; right: 2%; bottom: 33%; }.illustration-core { position: absolute; inset: 40%; display: grid; place-items: center; color: white; background: #172a3e; border: 1px solid #2c465e; border-radius: 50%; }.illustration-core svg { width: 45px; }.illustration-node { position: absolute; width: 42px; height: 42px; display: grid; place-items: center; color: #5eead4; background: #152b3f; border: 1px solid #2c465e; border-radius: 50%; }.illustration-node svg { width: 18px; }.node-one { top: 13%; left: 20%; }.node-two { right: 5%; bottom: 27%; }.node-three { left: 15%; bottom: 12%; }
.login-footnote { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; margin: auto 0 0; color: #7f90a4; font-size: .68rem; }.login-footnote svg { width: 14px; }
.login-access { display: grid; place-items: center; padding: 46px max(38px, 7vw); background: #f8fafb; }.login-panel { width: min(470px, 100%); }.login-panel h2 { margin: 0; color: var(--ink); font-size: 1.7rem; letter-spacing: -.04em; }.login-intro { margin: 9px 0 26px; color: var(--muted); font-size: .8rem; line-height: 1.55; }.login-options { display: grid; gap: 10px; }.login-options button { min-height: 76px; display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 12px; padding: 13px; text-align: left; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 7px 20px rgba(15,23,42,.04); cursor: pointer; transition: border .16s ease, transform .16s ease, box-shadow .16s ease; }.login-options button:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--shadow-float); }.login-options button > svg { width: 17px; color: var(--teal-dark); }.login-options button > span:nth-child(2) { display: grid; gap: 5px; }.login-options strong { font-size: .8rem; }.login-options small { color: var(--muted); font-size: .66rem; }.role-icon { width: 40px; height: 40px; display: grid !important; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: var(--radius); }.role-icon svg { width: 18px; }.access-note { display: flex; gap: 10px; margin-top: 22px; padding-top: 20px; color: var(--muted); border-top: 1px solid var(--line); }.access-note > svg { width: 18px; color: var(--teal-dark); }.access-note p { display: grid; gap: 3px; margin: 0; }.access-note strong { color: var(--ink-soft); font-size: .69rem; }.access-note span { font-size: .64rem; }
@media (max-width: 1120px) {
.app-shell { grid-template-columns: 190px minmax(0, 1fr); }.sidebar { width: 190px; }.brand-lockup { padding-inline: 14px; }.readiness-band { grid-template-columns: 160px 1fr; }.readiness-band .inline-action { display: none; }.operations-grid { grid-template-columns: 1fr 1fr; }.timezone { display: none; }.review-facts { grid-template-columns: repeat(3, 1fr); }
}
.data-table td button {
padding: 6px 14px; border-radius: 8px; border: 1px solid #14324f;
background: #14324f; color: white; font-weight: 700; cursor: pointer; font-size: 0.85rem;
@media (max-width: 960px) {
.app-shell { display: block; }.app-workspace { min-height: 100vh; }.sidebar { width: min(286px, 86vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-float); }.sidebar.is-open { transform: none; }.nav-scrim { display: block; position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; padding: 0; background: rgba(5, 12, 22, .48); border: 0; }.mobile-menu { display: grid; }.topbar { padding: 0 20px; }.operator > span:last-child, .global-search kbd { display: none; }.global-search { width: min(460px, 55vw); }.mobile-nav { position: fixed; inset: auto 0 0; z-index: 22; height: 65px; display: grid; grid-template-columns: repeat(6, 1fr); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.98); border-top: 1px solid var(--line); }.mobile-nav a, .mobile-nav button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); background: transparent; border: 0; text-decoration: none; font-size: .55rem; font-weight: 700; cursor: pointer; }.mobile-nav svg { width: 18px; height: 18px; }.mobile-nav a.active { color: var(--teal-dark); }.mobile-nav a.active::before { content: ""; position: absolute; top: 0; width: 28px; height: 2px; background: var(--teal); }.app-footer { padding-bottom: 65px; }.operations-grid, .secondary-grid { grid-template-columns: 1fr; }.integration-cards { grid-template-columns: 1fr; }.login-shell { grid-template-columns: 1fr; }.login-story { min-height: 44vh; padding: 28px 8vw; }.login-message { margin: auto 0; }.login-message h1 { font-size: clamp(2.5rem, 9vw, 4rem); }.login-message > p:last-child { margin-top: 15px; }.control-illustration { width: 55vw; opacity: .45; right: -10vw; top: -5vw; }.login-footnote { margin-top: 20px; }.login-access { min-height: 56vh; padding: 42px 8vw 60px; }
}
.data-table td button:disabled { opacity: 0.6; cursor: not-allowed; }
.knowledge-status { color: #607084; font-size: 0.9rem; margin-bottom: 16px; }
.knowledge-form { margin-bottom: 20px; }
.knowledge-input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.knowledge-input-row input {
flex: 1; min-width: 240px; padding: 10px 12px; border: 1px solid #cfd8e2;
border-radius: 8px; font-size: 0.95rem;
}
.knowledge-input-row button {
padding: 10px 20px; border-radius: 8px; border: none;
background: #14324f; color: white; font-weight: 700; cursor: pointer;
}
.knowledge-input-row button:disabled { opacity: 0.6; cursor: not-allowed; }
.exchange-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.exchange-question { font-size: 1rem; margin: 0 0 6px; }
.evidence-state { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; }
.evidence-grounded { background: #e6f5ec; color: #1f6d3d; }
.evidence-insufficient { background: #fdf1de; color: #8a5a10; }
.evidence-unavailable { background: #fbe6e6; color: #8f2323; }
.source-cards { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.source-card { background: #f6f8fb; border: 1px solid #dce3eb; border-radius: 10px; padding: 12px; }
.source-title { margin: 0; font-weight: 700; }
.source-version { color: #607084; font-weight: 400; font-size: 0.85rem; }
.source-section { margin: 2px 0 6px; color: #375065; font-size: 0.85rem; font-weight: 600; }
.source-excerpt { margin: 0; font-size: 0.88rem; color: #47566b; }
@media (max-width: 700px) {
.app-header { flex-direction: column; align-items: flex-start; }
.user-badge { margin-left: 0; }
.data-table, .data-table thead, .data-table tbody, .data-table th, .data-table td, .data-table tr {
display: block;
}
.data-table thead { display: none; }
.data-table tr { border-bottom: 2px solid #dce3eb; padding: 8px 0; }
.data-table td, .data-table th { border: none; padding: 4px 12px; }
#main-content { width: min(100% - 28px, 620px); padding: 24px 0 90px; }.topbar { height: 58px; padding: 0 14px; gap: 8px; }.global-search { flex: 1; width: auto; }.topbar-meta { gap: 3px; }.operator { padding-left: 7px; border: 0; }.demo-banner { min-height: 28px; padding-inline: 10px; font-size: .59rem; }.page-header { align-items: flex-start; margin-bottom: 20px; }.page-header h1 { font-size: 1.65rem; }.page-actions { display: none; }.page-description { font-size: .78rem; }.readiness-band { display: block; }.readiness-label { min-height: 62px; border-right: 0; border-bottom: 1px solid var(--line); }.readiness-metrics { grid-template-columns: repeat(5, minmax(66px, 1fr)); overflow-x: auto; }.metric-cell { min-width: 68px; padding: 12px 9px; }.metric-cell dd { font-size: 1.18rem; }.metric-cell dt { font-size: .53rem; }.section-heading { padding: 14px; }.section-heading > a { display: none; }.queue-controls { padding: 9px 14px; }.attention-list li { grid-template-columns: auto minmax(0,1fr) 14px; padding-inline: 14px; }.queue-ref { display: none; }.attention-detail { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.movement-timeline { padding-inline: 14px; }.integration-list li, .recent-list li { padding-inline: 14px; }.recent-list time { display: none; }
.filters { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; }.filters label:first-child { grid-column: 1 / -1; }.filters input[type="text"], .filters select { min-width: 0; width: 100%; }.checkbox-label { align-self: center; }
.table-shell { overflow: visible; border: 0; background: transparent; }.table-meta { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 9px; }.data-table, .data-table tbody { display: block; }.data-table thead { display: none; }.data-table tr { display: block; margin-bottom: 9px; padding: 7px 0; background: white; border: 1px solid var(--line); border-radius: var(--radius); }.data-table th, .data-table td { min-height: 34px; height: auto; display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.3fr); align-items: center; gap: 10px; padding: 7px 12px; border: 0; text-align: right; font-size: .71rem; }.data-table th[scope="row"] { text-align: right; }.data-table th::before, .data-table td::before { content: attr(data-label); color: var(--muted); font-size: .57rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .06em; }.compare-table th, .compare-table td { text-align: left; }.pagination { justify-content: space-between; padding-inline: 0; border: 0; }
.tabs { margin-inline: -2px; }.record-surface { padding: 10px; }.detail-grid { grid-template-columns: 1fr 1fr; }.detail-grid div { min-height: 70px; padding: 11px; }.return-progress { padding-inline: 12px; gap: 6px; }.return-progress b { width: 20px; }.return-progress span { font-size: .58rem; }.return-form > .section-heading { padding: 16px; }.return-capture, .return-review { padding: 16px; }.form-grid, .condition-fieldset, .review-facts { grid-template-columns: 1fr; }.condition-fieldset { display: grid; }.review-facts div { display: flex; justify-content: space-between; align-items: center; }.review-facts dd { margin: 0; }.form-actions { padding: 12px 16px; }.form-actions .button { flex: 1; }.duplicate-compare { padding: 14px; }.duplicate-compare fieldset label { display: flex !important; margin-bottom: 8px; }.integration-cards article { min-height: 140px; }.knowledge-input-row { align-items: stretch; }.knowledge-input-row .button { min-width: 72px; padding-inline: 10px; }.knowledge-empty { min-height: 250px; padding: 22px 16px; }.retrieval-flow { width: 100%; gap: 4px; }.retrieval-flow span { padding: 5px; font-size: .52rem; }.retrieval-flow i { flex: 1; min-width: 5px; }.login-story { min-height: 38vh; }.login-message > p:last-child { font-size: .8rem; }.control-illustration { display: none; }.login-access { min-height: 62vh; padding: 34px 20px 50px; }.login-options button { min-height: 72px; }.app-footer { display: none; }
}
@media (max-width: 420px) {
.global-search input::placeholder { color: transparent; }.global-search { max-width: 118px; }.topbar-meta { margin-left: auto; }.avatar { width: 29px; height: 29px; }.mobile-nav a span, .mobile-nav button span { max-width: 56px; overflow: hidden; text-overflow: ellipsis; }.filters { grid-template-columns: 1fr; }.filters label:first-child { grid-column: auto; }.detail-grid { grid-template-columns: 1fr; }.readiness-metrics { margin-right: -1px; }.badge { font-size: .55rem; }.page-header h1 { font-size: 1.5rem; }.login-message h1 { font-size: 2.6rem; }
}