/* * Atlas design system: theme tokens, app shell, collapsed icon nav, and the * shared primitives (cards, badges, stats, tables). * * Tokens are the same HSL triples the original Atlas app uses in globals.css, * so light and dark match the product people already know. Theme is applied by * toggling `.dark` on , which the layout does before first paint. * * Hand-written rather than Tailwind: this app links a prebuilt tailwind.css and * runs no watcher, so a new utility class in a view would silently not exist. */ :root { --background: 225 35% 98%; --foreground: 236 18% 10%; --card: 0 0% 100%; --card-foreground: 236 18% 10%; --popover: 0 0% 100%; --border: 228 18% 88%; --input: 228 18% 88%; --primary: 190 92% 34%; --primary-foreground: 0 0% 100%; --muted: 225 22% 93%; --muted-foreground: 232 11% 42%; --accent: 39 95% 55%; --destructive: 0 84% 60%; --radius: 0.5rem; --distress-none: 215 15% 48%; --distress-preforeclosure: 39 95% 45%; --distress-auction: 22 92% 46%; --distress-reo: 0 74% 50%; --sidenav-w: 52px; --sidenav-w-open: 208px; --topbar-h: 52px; color-scheme: light; } .dark { --background: 255 12% 6%; --foreground: 220 35% 94%; --card: 250 12% 9%; --card-foreground: 220 35% 94%; --popover: 250 12% 9%; --border: 246 12% 20%; --input: 246 12% 22%; --primary: 190 96% 54%; --primary-foreground: 230 35% 7%; --muted: 250 10% 15%; --muted-foreground: 229 16% 70%; --accent: 39 96% 58%; --destructive: 0 72% 58%; --distress-none: 215 15% 58%; --distress-preforeclosure: 39 95% 58%; --distress-auction: 22 92% 58%; --distress-reo: 0 84% 64%; color-scheme: dark; } /* ── Base ── */ body.atlas { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; } .atlas a { color: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .muted { color: hsl(var(--muted-foreground)); } .tabular { font-variant-numeric: tabular-nums; } /* ── Shell ── */ .shell { position: fixed; inset: 0; display: flex; overflow: hidden; } .shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .shell-content { flex: 1; min-height: 0; overflow: auto; } /* ── Collapsed icon nav ── */ .sidenav { position: relative; z-index: 50; width: var(--sidenav-w); flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-right: 1px solid hsl(var(--border)); background: hsl(var(--card)); transition: width 160ms ease; overflow: hidden; } .shell[data-nav="open"] .sidenav { width: var(--sidenav-w-open); } .sidenav-toggle, .sidenav-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 9px; border: 0; border-radius: var(--radius); background: transparent; color: hsl(var(--muted-foreground)); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; position: relative; white-space: nowrap; } .sidenav-link svg, .sidenav-toggle svg { width: 16px; height: 16px; flex: none; } .sidenav-link:hover, .sidenav-toggle:hover { background: hsl(var(--foreground) / 0.05); color: hsl(var(--foreground)); } .sidenav-link[aria-current="page"] { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); } .sidenav-link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 0 2px 2px 0; background: hsl(var(--primary)); } .sidenav-link[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; } .sidenav-label { opacity: 0; transition: opacity 120ms ease; } .shell[data-nav="open"] .sidenav-label { opacity: 1; } .sidenav-section { margin: 10px 0 2px; padding: 0 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--muted-foreground) / 0.7); opacity: 0; height: 0; overflow: hidden; } .shell[data-nav="open"] .sidenav-section { opacity: 1; height: auto; } .sidenav-spacer { flex: 1; } /* ── Top bar ── */ .topbar { position: relative; z-index: 40; height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0 0.9rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); } .brand { font-weight: 900; letter-spacing: 0.2em; font-size: 14px; text-decoration: none; padding-right: 0.2em; flex: none; } .topbar-title { font-size: 13px; color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-spacer { flex: 1; } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; } .icon-button:hover { color: hsl(var(--foreground)); } .icon-button svg { width: 15px; height: 15px; } .theme-toggle .icon-sun { display: none; } .dark .theme-toggle .icon-sun { display: block; } .dark .theme-toggle .icon-moon { display: none; } .topbar-user { display: flex; align-items: center; gap: 0.5rem; flex: none; } .topbar-user .email { font-size: 12px; color: hsl(var(--muted-foreground)); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-user form { margin: 0; } .button-quiet { height: 30px; padding: 0 0.7rem; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground)); font-size: 12px; cursor: pointer; } .button-quiet:hover { color: hsl(var(--foreground)); } /* ── Primitives ── */ .card { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); background: hsl(var(--card)); } .card-head { padding: 0.7rem 0.9rem; border-bottom: 1px solid hsl(var(--border)); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } .card-body { padding: 0.9rem; } .badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 1px 7px; border-radius: 999px; border: 1px solid hsl(var(--border)); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .badge--none { color: hsl(var(--distress-none)); border-color: hsl(var(--distress-none) / 0.4); } .badge--preforeclosure { color: hsl(var(--distress-preforeclosure)); border-color: hsl(var(--distress-preforeclosure) / 0.45); background: hsl(var(--distress-preforeclosure) / 0.08); } .badge--auction_scheduled { color: hsl(var(--distress-auction)); border-color: hsl(var(--distress-auction) / 0.45); background: hsl(var(--distress-auction) / 0.08); } .badge--reo { color: hsl(var(--distress-reo)); border-color: hsl(var(--distress-reo) / 0.45); background: hsl(var(--distress-reo) / 0.08); } .badge--entity { color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.4); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); overflow: hidden; } .stat { background: hsl(var(--card)); padding: 0.8rem 0.9rem; } .stat dt { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: 0 0 4px; } .stat dd { margin: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } .stat dd.positive { color: hsl(155 60% 42%); } .dark .stat dd.positive { color: hsl(155 65% 58%); } .stat dd.negative { color: hsl(var(--destructive)); } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: 0.5rem 0.7rem; border-bottom: 1px solid hsl(var(--border)); } .data-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid hsl(var(--border)); } .data-table tr:last-child td { border-bottom: 0; } .data-table tbody tr:hover { background: hsl(var(--foreground) / 0.03); } .data-table a { color: hsl(var(--primary)); text-decoration: none; } .data-table a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .sidenav, .sidenav-label { transition: none; } }