/* HR OS — shared utility styles * Small set of component-y classes that are easier to read than long * Tailwind class strings. These use raw color values (matching the tokens * in tailwind-config.js) so they work without the Tailwind JIT @apply * machinery (the Play CDN doesn't process external stylesheets). */ /* ---- Body baseline ---- */ html, body { height: 100%; } body { margin: 0; font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #1A1816; background: #FFFFFF; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } input, button, select, textarea { font-family: inherit; } input::placeholder, textarea::placeholder { color: #9A968F; } /* ---- Page canvas + content card (2026-06 design refresh) ---- Soft paper canvas with a whisper of dot-grid texture; page content sits in a white card with a hairline border. Apply `page-canvas` on , wrap the main content in `.page-card`, and lead the page header with a `.page-title-icon` chip. */ body.page-canvas { background-color: #F7F5F0; background-image: radial-gradient(rgba(122,118,111,0.13) 1px, transparent 1.2px); background-size: 22px 22px; } .page-card { background: #fff; border: 1px solid #E8E3D9; border-radius: 12px; box-shadow: 0 1px 2px rgba(28,24,18,0.04), 0 12px 32px -20px rgba(28,24,18,0.10); padding: 14px 16px 12px; } @media (max-width: 767px) { .page-card { padding: 10px 10px 12px; border-radius: 10px; } } .page-title-icon { width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid #E8E3D9; display: inline-flex; align-items: center; justify-content: center; color: #3A3833; flex-shrink: 0; box-shadow: 0 1px 2px rgba(28,24,18,0.05); } /* ---- Left nav items ---- */ .nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: #3A3833; text-decoration: none; transition: background .12s, color .12s; } .nav-link:hover { background: #F4F1EA; } .nav-link.is-active { background: #F4F1EA; color: #1A1816; font-weight: 600; } /* Expandable parents (Mailboxes, Org, Activity, Settings) are