/* ================================================================= * Demo HR Source of Truth — Design System * * Refined minimal admin aesthetic. Quiet competence over loud chrome. * ================================================================= */ :root { color-scheme: light; /* Surfaces */ --bg: #fafaf9; --surface: #ffffff; --surface-2: #f5f5f4; --surface-3: #e7e5e4; /* Text */ --text: #1c1917; --text-muted: #57534e; --text-subtle: #78716c; --text-faint: #a8a29e; /* Lines */ --line: #e7e5e4; --line-strong: #d6d3d1; /* Accent — slate primary */ --primary: #1e293b; --primary-hover: #0f172a; --primary-soft: #f1f5f9; /* Semantic */ --success: #047857; --success-soft: #ecfdf5; --success-line: #a7f3d0; --warning: #b45309; --warning-soft: #fffbeb; --warning-line: #fde68a; --danger: #b91c1c; --danger-hover: #991b1b; --danger-soft: #fef2f2; --danger-line: #fecaca; --info: #0369a1; --info-soft: #f0f9ff; --info-line: #bae6fd; /* Shadows — very soft, layered */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04); --shadow-lg: 0 16px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.04); /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Type */ --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; /* Layout */ --sidebar-w: 232px; --topbar-h: 56px; } /* ================================================================= * Dark theme — a token override. The shell is entirely token-driven, * so only the color variables change. `data-theme` is set on * by the no-flash head script (from localStorage, defaulting to the * OS prefers-color-scheme) and flipped by the topbar toggle. * ================================================================= */ :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #1c1917; --surface: #292524; --surface-2: #35302c; --surface-3: #44403c; /* Text */ --text: #f5f5f4; --text-muted: #a8a29e; --text-subtle: #8a827b; --text-faint: #6b635c; /* Lines */ --line: #3a3531; --line-strong: #57534e; /* Accent — kept dark enough for white button text */ --primary: #2563eb; --primary-hover: #3b82f6; --primary-soft: #1e293b; /* Semantic */ --success: #34d399; --success-soft: #052e23; --success-line: #065f46; --warning: #fbbf24; --warning-soft: #3a2a06; --warning-line: #78350f; --danger: #ef4444; --danger-hover: #f87171; --danger-soft: #3a1414; --danger-line: #7f1d1d; --info: #38bdf8; --info-soft: #082f49; --info-line: #0c4a6e; /* Shadows — deeper on a dark canvas */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.50), 0 2px 4px -1px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.60), 0 4px 8px -2px rgba(0, 0, 0, 0.30); } /* Soften the light↔dark flip on the large surfaces */ body, .sidebar, .topbar, .card, .btn, .input, .select, .textarea, .badge { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } /* Theme toggle — show the icon for the theme you'd switch TO */ .theme-toggle { display: inline-flex; align-items: center; } .theme-toggle__icon { width: 16px; height: 16px; display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); text-decoration: underline; } code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; } /* ===================================================== * Layout * ===================================================== */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100vh; } .sidebar { grid-area: sidebar; background: var(--surface); border-right: 1px solid var(--line); padding: var(--s-6) 0; display: flex; flex-direction: column; } .sidebar__brand { padding: 0 var(--s-6) var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: 2px; } .sidebar__brand-lockup { display: flex; align-items: center; gap: 8px; } .sidebar__brand-icon { width: 20px; height: 20px; flex-shrink: 0; } .sidebar__brand-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .sidebar__brand-tagline { font-size: 11px; color: var(--text-faint); letter-spacing: 0.02em; text-transform: uppercase; } .sidebar__nav { flex: 1; display: flex; flex-direction: column; gap: var(--s-1); padding: 0 var(--s-3); } .sidebar__section-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: var(--s-3) var(--s-3) var(--s-1); } .sidebar__link { display: flex; align-items: center; gap: var(--s-3); padding: 7px var(--s-3); border-radius: var(--r-md); color: var(--text-muted); font-size: 13px; text-decoration: none; transition: background 0.12s, color 0.12s; } .sidebar__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .sidebar__link.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 500; } .sidebar__link-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; } .sidebar__footer { padding: var(--s-3) var(--s-6); font-size: 11px; color: var(--text-faint); border-top: 1px solid var(--line); } .topbar { grid-area: topbar; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-8); } .topbar__breadcrumb { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: var(--s-2); } .topbar__breadcrumb-sep { color: var(--text-faint); } .topbar__user { display: flex; align-items: center; gap: var(--s-4); font-size: 13px; color: var(--text-muted); } .topbar__user-name { color: var(--text); font-weight: 500; } .main { grid-area: main; padding: var(--s-8); overflow-x: auto; } .page-header { margin-bottom: var(--s-8); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); } .page-header__text { flex: 1; } .page-header__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--s-1) 0; } .page-header__subtitle { font-size: 13px; color: var(--text-muted); margin: 0; } .page-header__actions { display: flex; gap: var(--s-3); align-items: center; } /* ===================================================== * Cards * ===================================================== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); } .card__header { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); } .card__title { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .card__body { padding: var(--s-6); } .card--flush .card__body { padding: 0; } /* ===================================================== * Buttons * ===================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 7px var(--s-4); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.25; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s; text-decoration: none; white-space: nowrap; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .btn--primary { background: var(--primary); color: white; border-color: var(--primary); } .btn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); color: white; text-decoration: none; } .btn--secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); } .btn--secondary:hover:not(:disabled) { background: var(--surface-2); color: var(--text); text-decoration: none; } .btn--ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); text-decoration: none; } .btn--danger { background: var(--danger); color: white; border-color: var(--danger); } .btn--danger:hover:not(:disabled) { background: var(--danger-hover); border-color: var(--danger-hover); color: white; } .btn--sm { padding: 4px var(--s-3); font-size: 12px; } .btn--icon { padding: 6px; width: 28px; height: 28px; } /* ===================================================== * Forms * ===================================================== */ .form-row { margin-bottom: var(--s-5); } .form-grid { display: grid; gap: var(--s-5); } .form-grid--2col { grid-template-columns: repeat(2, 1fr); } @media (max-width: 720px) { .form-grid--2col { grid-template-columns: 1fr; } } .label { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: var(--s-2); letter-spacing: 0.01em; } .label__required { color: var(--danger); margin-left: 2px; } .input, .select, .textarea { width: 100%; padding: 8px var(--s-3); font-family: inherit; font-size: 13px; line-height: 1.4; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); transition: border-color 0.12s, box-shadow 0.12s; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08); } .input:disabled, .select:disabled { background: var(--surface-2); color: var(--text-subtle); cursor: not-allowed; } .select { appearance: auto; background-image: none; } .form-hint { font-size: 12px; color: var(--text-subtle); margin-top: var(--s-1); } .form-actions { display: flex; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); } .checkbox-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; } .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--primary); } .checkbox-row label { cursor: pointer; font-size: 13px; user-select: none; } /* ===================================================== * Tables * ===================================================== */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th, .table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; } .table th { background: var(--surface-2); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); position: sticky; top: 0; z-index: 1; } .table tr:hover td { background: var(--surface-2); } .table tr:last-child td { border-bottom: none; } .table__sort { display: inline-flex; align-items: center; gap: var(--s-1); color: inherit; cursor: pointer; text-decoration: none; user-select: none; } .table__sort:hover { color: var(--text); text-decoration: none; } .table__sort-arrow { font-size: 9px; color: var(--text-faint); } .table__sort.is-active .table__sort-arrow { color: var(--primary); } .table__actions { display: flex; gap: var(--s-1); justify-content: flex-end; } .table__empty { text-align: center; padding: var(--s-12) var(--s-6); color: var(--text-muted); } .table__empty-text { font-size: 14px; margin-bottom: var(--s-2); } .table__empty-hint { font-size: 12px; color: var(--text-faint); } .table tr.is-archived td { color: var(--text-subtle); background: var(--surface-2); } .table tr.is-archived .badge { opacity: 0.7; } /* ===================================================== * Badges * ===================================================== */ .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; letter-spacing: 0.01em; } .badge--success { background: var(--success-soft); color: var(--success); border-color: var(--success-line); } .badge--warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line); } .badge--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); } .badge--neutral { background: var(--surface-2); color: var(--text-muted); border-color: var(--line-strong); } .badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } /* ===================================================== * Tabs / pills * ===================================================== */ .tabs { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: var(--r-md); gap: 2px; } .tabs__tab { padding: 5px var(--s-3); font-size: 12px; color: var(--text-muted); border-radius: var(--r-sm); text-decoration: none; font-weight: 500; transition: background 0.12s, color 0.12s; } .tabs__tab:hover { color: var(--text); text-decoration: none; } .tabs__tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); } /* ===================================================== * Flash messages (toasts) * ===================================================== */ .flashes { position: fixed; top: var(--s-5); right: var(--s-5); z-index: 100; display: flex; flex-direction: column; gap: var(--s-2); max-width: 420px; } .flash { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: 13px; box-shadow: var(--shadow-md); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--text-faint); animation: flash-in 0.2s ease-out; } @keyframes flash-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .flash--success { border-left-color: var(--success); } .flash--error { border-left-color: var(--danger); } .flash--warning { border-left-color: var(--warning); } .flash--info { border-left-color: var(--info); } /* ===================================================== * Login page (no sidebar) * ===================================================== */ .auth-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6); background: radial-gradient(circle at 20% 10%, rgba(30, 41, 59, 0.04), transparent 40%), radial-gradient(circle at 80% 90%, rgba(30, 41, 59, 0.04), transparent 40%), var(--bg); } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-8); box-shadow: var(--shadow-lg); } .auth-card__brand { text-align: center; margin-bottom: var(--s-8); } .auth-card__title { font-size: 18px; font-weight: 600; margin: var(--s-3) 0 var(--s-1); letter-spacing: -0.01em; } .auth-card__subtitle { font-size: 13px; color: var(--text-muted); margin: 0; } .auth-card__mark { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; } /* ===================================================== * Modal (used by HTMX-loaded forms) * ===================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(2px); z-index: 50; display: grid; place-items: center; padding: var(--s-5); animation: fade-in 0.15s ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 640px; max-height: calc(100vh - var(--s-10)); overflow: hidden; display: flex; flex-direction: column; animation: modal-in 0.18s ease-out; } @keyframes modal-in { from { transform: translateY(8px) scale(0.99); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal__header { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .modal__title { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .modal__close { background: none; border: none; font-size: 18px; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--r-sm); } .modal__close:hover { background: var(--surface-2); color: var(--text); } .modal__body { padding: var(--s-6); overflow-y: auto; } /* ===================================================== * Inline error display * ===================================================== */ .inline-error { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: 13px; margin-bottom: var(--s-4); } .inline-info { background: var(--info-soft); border: 1px solid var(--info-line); color: var(--info); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: 13px; margin-bottom: var(--s-4); } .inline-success { background: var(--success-soft); border: 1px solid var(--success-line); color: var(--success); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: 13px; margin-bottom: var(--s-4); } /* ===================================================== * Misc utilities * ===================================================== */ .text-muted { color: var(--text-muted); } .text-faint { color: var(--text-faint); } .text-mono { font-family: var(--font-mono); } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .divider { height: 1px; background: var(--line); margin: var(--s-6) 0; border: none; } .stat { display: flex; flex-direction: column; gap: var(--s-1); } .stat__label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .stat__value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "tnum" 1; } .kbd { display: inline-block; padding: 1px 6px; font-family: var(--font-mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text-muted); } .empty-state { padding: var(--s-12) var(--s-6); text-align: center; color: var(--text-muted); } .empty-state__title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 var(--s-2) 0; } .empty-state__body { font-size: 13px; margin: 0 0 var(--s-5) 0; } /* Form data after creation — shown once */ .secret-reveal { background: var(--warning-soft); border: 1px solid var(--warning-line); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-5); } .secret-reveal__label { font-size: 12px; font-weight: 500; color: var(--warning); margin-bottom: var(--s-2); } .secret-reveal__value { font-family: var(--font-mono); font-size: 13px; background: var(--surface); padding: var(--s-3); border-radius: var(--r-sm); border: 1px solid var(--warning-line); word-break: break-all; } .secret-reveal__warning { font-size: 12px; color: var(--warning); margin-top: var(--s-2); } /* Copy-ready code snippets (e.g. MCP client config on Settings → MCP) */ .code-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin: var(--s-4) 0 var(--s-2); } .code-block { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: var(--r-sm); padding: var(--s-3); overflow-x: auto; white-space: pre; margin: 0 0 var(--s-2); } /* Column selector dropdown */ .col-picker { position: relative; } .col-picker__menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: var(--s-2); min-width: 200px; z-index: 10; display: none; } .col-picker.is-open .col-picker__menu { display: block; } .col-picker__option { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); cursor: pointer; border-radius: var(--r-sm); font-size: 13px; } .col-picker__option:hover { background: var(--surface-2); } /* ── Activity / audit log ──────────────────────────────────────────────────── */ .activity-views { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); } .activity-filters { margin-bottom: var(--s-5); } .activity-filters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3) var(--s-4); } .activity-filters__grid .form-row { margin: 0; } .activity-filters__actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); } .activity-count { margin-left: auto; font-size: 0.85rem; } .activity-row:hover { background: var(--surface-2); } .activity-row__caret { user-select: none; } .activity-detail > td { background: var(--surface-2); padding: var(--s-4) var(--s-6); } .activity-detail__head { display: flex; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); font-size: 0.9rem; } .activity-detail__json { margin: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 0.8rem; line-height: 1.5; overflow-x: auto; white-space: pre; }