/* ============================================================ HEADCOUNT — Redesign layer (loads AFTER styles.css) ------------------------------------------------------------ From the Claude Design handoff (claude.ai/design). This file layers a new visual identity on top of the existing app: - Space Grotesk / Hanken Grotesk typography - refined surfaces, layered shadows, larger radii - 4 palettes [data-palette] · 3 type directions [data-type] - retuned dark mode [data-theme="dark"] Every original CSS variable name is re-aliased to the new tokens, so the whole existing stylesheet inherits the new look with no markup or logic changes. Default palette is the user's original blue ("brand"), which they explicitly chose. ============================================================ */ :root { /* ---- Spacing scale ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* ---- Radius (design scale) ---- */ --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ---- Type ---- */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-num: 'Space Grotesk', ui-monospace, monospace; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; /* ---- Motion ---- */ --ease: cubic-bezier(0.34, 1.2, 0.4, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.22s; /* ---- Elevation (shadow hue varies per palette via --shadow-color) ---- */ --shadow-color: 222 47% 30%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06); --shadow-sm-d: 0 2px 6px hsl(var(--shadow-color) / 0.07), 0 1px 2px hsl(var(--shadow-color) / 0.05); --shadow-md: 0 8px 24px hsl(var(--shadow-color) / 0.10), 0 2px 6px hsl(var(--shadow-color) / 0.05); --shadow-lg: 0 18px 50px hsl(var(--shadow-color) / 0.16), 0 6px 16px hsl(var(--shadow-color) / 0.07); /* ---- Map the design radii/shadows onto the app's existing names ---- */ --radius: var(--r-sm); --radius-sm: var(--r-xs); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --shadow-subtle: var(--shadow-xs); --shadow-sm: var(--shadow-sm-d); --shadow-soft: var(--shadow-sm-d); --shadow-medium: var(--shadow-md); --shadow-button: var(--shadow-xs); } /* ============================================================ PALETTES · set on via [data-palette] Each block defines the design color tokens AND re-aliases the app's original variable names (--text, --border, --accent, …). ============================================================ */ /* ----- BRAND : the original vivid blue (default) ----- */ :root, [data-palette="brand"] { --ink: #0f172a; --ink-2: #475069; --ink-3: #7c869b; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-ink: #fff; --primary-soft: #dbeafe; --primary-soft-ink: #1d4ed8; --c-accent: #3b82f6; --c-accent-hover: #2563eb; --accent-ink: #fff; --c-accent-light: #dbeafe; --accent-soft: #dbeafe; --accent-soft-ink: #1d4ed8; --c-success: #10b981; --success-soft: #d1fae5; --success-ink: #047857; --warn: #d9890f; --warn-soft: #fcefcf; --warn-ink: #92600a; --c-danger: #ef4444; --danger-soft: #fde2e2; --danger-ink: #b91c1c; --c-bg: #f6f8fb; --bg-tint: #eaeef5; --c-surface: #ffffff; --surface-2: #fafbfd; --surface-sunken: #f1f4f9; --c-border: #e4e8ef; --border-strong: #cfd6e2; --c-border-light: #eef2f7; --shadow-color: 222 47% 30%; --focus: #3b82f6; } /* ----- SLATE : crisp utility, indigo + teal ----- */ [data-palette="slate"] { --ink: #0f1729; --ink-2: #4a5468; --ink-3: #7c869a; --primary: #3b4ea8; --primary-hover: #303f8f; --primary-ink: #fff; --primary-soft: #e6e9f6; --primary-soft-ink: #2c3a7d; --c-accent: #0e7490; --c-accent-hover: #0b5e75; --accent-ink: #fff; --c-accent-light: #d6eef4; --accent-soft: #d6eef4; --accent-soft-ink: #0a566a; --c-success: #168a5e; --success-soft: #d6f0e3; --success-ink: #0a5b3c; --warn: #b8791a; --warn-soft: #f7e9cf; --warn-ink: #7c4f0c; --c-danger: #cf3d3a; --danger-soft: #f9dcda; --danger-ink: #87231f; --c-bg: #f5f6f8; --bg-tint: #eceef2; --c-surface: #ffffff; --surface-2: #fafbfc; --surface-sunken: #f1f3f6; --c-border: #e3e6eb; --border-strong: #cfd4dd; --c-border-light: #eef0f4; --shadow-color: 220 35% 20%; --focus: #3b4ea8; } /* ----- SANCTUARY : warm paper, teal + amber ----- */ [data-palette="sanctuary"] { --ink: #251f16; --ink-2: #6a5f4c; --ink-3: #998d76; --primary: #1f6f6b; --primary-hover: #185955; --primary-ink: #fff; --primary-soft: #d2e9e6; --primary-soft-ink: #16524e; --c-accent: #b07514; --c-accent-hover: #92610f; --accent-ink: #fff; --c-accent-light: #f6e7c8; --accent-soft: #f6e7c8; --accent-soft-ink: #7d5209; --c-success: #4f7d2f; --success-soft: #e2f0d2; --success-ink: #38591f; --warn: #bd7d12; --warn-soft: #f6e6c4; --warn-ink: #7f520a; --c-danger: #bb4630; --danger-soft: #f5ddd5; --danger-ink: #7e2c1c; --c-bg: #f6f1e9; --bg-tint: #efe7da; --c-surface: #fffdf9; --surface-2: #fbf7ef; --surface-sunken: #f2ebdd; --c-border: #e7ddca; --border-strong: #d8cab0; --c-border-light: #f0e9da; --shadow-color: 35 38% 26%; --focus: #b07514; } /* ----- EVERGREEN : calm fresh green ----- */ [data-palette="evergreen"] { --ink: #102017; --ink-2: #475a4f; --ink-3: #7a8c81; --primary: #1f7a4d; --primary-hover: #18643f; --primary-ink: #fff; --primary-soft: #d6efdf; --primary-soft-ink: #15603b; --c-accent: #b5630f; --c-accent-hover: #97520c; --accent-ink: #fff; --c-accent-light: #f6e2cb; --accent-soft: #f6e2cb; --accent-soft-ink: #7e470a; --c-success: #1f8a55; --success-soft: #d6f0e0; --success-ink: #135a37; --warn: #b8791a; --warn-soft: #f5e7cd; --warn-ink: #7c4f0c; --c-danger: #c1453a; --danger-soft: #f6dedb; --danger-ink: #82281f; --c-bg: #f1f5f2; --bg-tint: #e6ede8; --c-surface: #ffffff; --surface-2: #f9fbf9; --surface-sunken: #eef3ef; --c-border: #dde6df; --border-strong: #c7d5cb; --c-border-light: #e9f0eb; --shadow-color: 150 30% 18%; --focus: #1f7a4d; } /* ----- Bridge design color tokens -> the app's original names ----- */ :root, [data-palette] { --bg: var(--c-bg); --surface: var(--c-surface); --surface-elevated: var(--surface-2); --text: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); --border: var(--c-border); --border-light: var(--c-border-light); --accent: var(--c-accent); --accent-hover: var(--c-accent-hover); --accent-light: var(--c-accent-light); --success: var(--c-success); --success-hover: var(--success-ink); --danger: var(--c-danger); --danger-hover: var(--danger-ink); } /* ============================================================ DARK MODE · [data-theme="dark"] (light is the priority) ============================================================ */ [data-theme="dark"] { --ink: #eef2f9; --ink-2: #aab6cc; --ink-3: #7585a0; --primary: #60a5fa; --primary-hover: #7cb4fb; --primary-ink: #0a1426; --primary-soft: #1c2c45; --primary-soft-ink: #9cc4fc; --c-accent: #60a5fa; --c-accent-hover: #7cb4fb; --accent-ink: #0a1426; --c-accent-light: #16263e; --accent-soft: #16263e; --accent-soft-ink: #9cc4fc; --c-success: #46c78d; --success-soft: #123227; --success-ink: #8fe3c0; --warn: #e0a945; --warn-soft: #322615; --warn-ink: #f0cd8a; --c-danger: #ef6b63; --danger-soft: #341c1b; --danger-ink: #f4a9a4; --c-bg: #0b1220; --bg-tint: #111b2e; --c-surface: #131e30; --surface-2: #18253a; --surface-sunken: #0f1828; --c-border: #243349; --border-strong: #33455f; --c-border-light: #1b283d; --shadow-color: 222 60% 3%; } [data-theme="dark"][data-palette="slate"] { --primary: #8fa2e6; --primary-ink: #0c1430; --primary-soft: #232a44; --primary-soft-ink: #b3c0f0; --c-accent: #3fc0db; --accent-ink: #06222a; } [data-theme="dark"][data-palette="sanctuary"] { --c-bg: #16140f; --c-surface: #211d15; --surface-2: #27221a; --surface-sunken: #1a1711; --c-border: #352f23; --border-strong: #463e2e; --ink: #f5efe2; --ink-2: #c3b79f; --primary: #4fb3a9; --primary-ink: #08231f; --c-accent: #e0a93f; --accent-ink: #2a1d05; --c-accent-light: #32260f; --accent-soft: #32260f; --accent-soft-ink: #f0cd86; } [data-theme="dark"][data-palette="evergreen"] { --c-bg: #101813; --c-surface: #18241c; --surface-2: #1d2c22; --surface-sunken: #131d17; --c-border: #283a2e; --border-strong: #36503e; --ink: #ecf4ee; --primary: #57c98a; --primary-ink: #062414; --c-accent: #e0a049; --accent-ink: #2a1a06; } /* ============================================================ TYPE DIRECTIONS · [data-type] on ============================================================ */ [data-type="grotesk"] { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-num: 'Space Grotesk', ui-monospace, monospace; } [data-type="editorial"] { --font-display: 'Newsreader', Georgia, serif; --font-body: 'Public Sans', system-ui, sans-serif; --font-num: 'Public Sans', system-ui, sans-serif; } [data-type="mono"] { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-num: 'JetBrains Mono', ui-monospace, monospace; } /* ============================================================ TYPOGRAPHY APPLICATION (broad, low-risk) ============================================================ */ body { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.015em; } input[type="number"], .num, [class*="total"], [class*="grand"] { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ============================================================ STYLE PANEL (live palette / type / theme switcher) Self-contained classes — no conflict with existing markup. ============================================================ */ .style-fab { position: fixed; left: var(--s-4); bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); z-index: 120; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 15px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 14px; box-shadow: var(--shadow-md); cursor: pointer; transition: transform 0.14s var(--ease), box-shadow var(--dur); } .style-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .style-fab svg { width: 18px; height: 18px; color: var(--accent); } @media (max-width: 879px) { .style-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); height: 42px; padding: 0 15px 0 12px; } } .style-panel { position: fixed; left: var(--s-4); bottom: calc(var(--s-5) + 58px + env(safe-area-inset-bottom, 0px)); z-index: 121; width: min(330px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s-5); opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transform-origin: bottom left; transition: opacity var(--dur), transform var(--dur) var(--ease), visibility var(--dur); max-height: min(72vh, 620px); overflow-y: auto; } .style-panel.is-open { opacity: 1; visibility: visible; transform: none; } @media (max-width: 879px) { .style-panel { bottom: calc(96px + 50px + env(safe-area-inset-bottom, 0px)); } } .style-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .style-head strong { font-family: var(--font-display); font-size: 16px; color: var(--text); } .style-x { width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } .style-note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--s-4); } .style-group { margin-bottom: var(--s-4); } .style-label { display: block; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-2); } .style-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } .style-opts--1 { grid-template-columns: 1fr; } .style-opt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 12px; cursor: pointer; text-align: left; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); transition: border-color var(--dur), background var(--dur); } .style-opt:hover { border-color: var(--border-strong); } .style-opt.is-on { border-color: var(--primary); background: var(--primary-soft); } .style-opt--row { flex-direction: row; align-items: center; gap: var(--s-2); } .style-opt--row .style-opt-desc { margin-left: auto; } .style-sw { display: inline-flex; gap: 3px; margin-bottom: 4px; } .style-sw i { width: 16px; height: 16px; border-radius: 5px; display: block; } .style-opt-name { font-size: 13px; font-weight: var(--fw-bold); color: var(--text); } .style-opt-desc { font-size: 11px; color: var(--text-muted); } .style-seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; } .style-seg button { min-height: 36px; border: none; background: transparent; cursor: pointer; border-radius: var(--r-xs); font-size: 13px; font-weight: var(--fw-semi); color: var(--text-secondary); font-family: var(--font-body); } .style-seg button.is-active { background: var(--surface); color: var(--primary-soft-ink); box-shadow: var(--shadow-xs); } /* ============================================================ HEADCOUNT — area counts as stepper cards / spreadsheet (ported from the design's screens.css; scoped to the .areas blocks that redesign-ui.js builds on index.html) ============================================================ */ .areas { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); } .area-colhead { display: none; } .areas .area { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; transition: border-color var(--dur), box-shadow var(--dur); } .areas .area:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .areas .area-namecell { display: flex; align-items: center; gap: var(--s-2); padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .areas .area-name { font-weight: var(--fw-bold); font-size: 14.5px; color: var(--text); } .area-here-inline { margin-left: auto; display: inline-flex; align-items: baseline; gap: 5px; } .area-here-inline .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: var(--fw-bold); color: var(--text); } .area-here-inline .lbl { font-size: 10.5px; font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .area-herecell { display: none; } .areas .area-stats { display: flex; flex-direction: column; gap: 1px; background: var(--border); } .areas .stat { background: var(--surface-2); padding: 9px 14px; display: flex; flex-direction: row; align-items: center; gap: var(--s-3); } .areas .stat-cap { font-size: 13.5px; font-weight: var(--fw-semi); color: var(--text); } .areas .stepper { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .areas .step { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-pill); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 20px; font-weight: var(--fw-bold); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s, transform 0.1s, color 0.12s; -webkit-tap-highlight-color: transparent; user-select: none; } .areas .step:hover { border-color: var(--accent); color: var(--accent); } .areas .step:active { transform: scale(0.9); } .areas .step.step-plus:hover { background: var(--accent-light); } /* the moved real input, restyled as the centered value field */ .areas .stepper .step-val { width: 46px; height: 38px; min-width: 0; border: none !important; background: none !important; box-shadow: none !important; text-align: center; padding: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 21px; font-weight: var(--fw-bold); color: var(--text); -moz-appearance: textfield; } .areas .stepper .step-val::-webkit-outer-spin-button, .areas .stepper .step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .areas .stepper .step-val:focus { outline: none; } .areas .sectot-num { font-size: 21px; font-weight: var(--fw-bold); color: var(--primary-soft-ink); margin-left: auto; } /* per-area / section "open the tap-to-count pad" buttons — deliberately a soft SQUARE with a keypad icon, so they don't read like the round +/- steppers. */ .areas .area-namecell .area-tap-btn, .counter-trigger.counter-open-btn, .area-counter-btn.counter-open-btn { flex-shrink: 0; padding: 0; cursor: pointer; width: 32px; height: 32px; border-radius: var(--r-sm); border: none; background: var(--accent-light); color: var(--accent-hover); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur), color var(--dur); } .area-counter-btn.counter-open-btn { font-size: 0; } /* drop the original "+" glyph */ .areas .area-namecell .area-tap-btn { margin-left: var(--s-2); } .areas .area-namecell .area-tap-btn svg, .counter-trigger.counter-open-btn svg, .area-counter-btn.counter-open-btn svg { width: 17px; height: 17px; } .areas .area-namecell .area-tap-btn:hover, .counter-trigger.counter-open-btn:hover, .area-counter-btn.counter-open-btn:hover { background: var(--accent); color: #fff; } @media (min-width: 720px) { .areas .area-namecell .area-tap-btn { margin-left: auto; width: 28px; height: 28px; } .areas .area-namecell .area-tap-btn svg { width: 15px; height: 15px; } } /* ============================================================ STICKY BOTTOM SAVE BAR (mobile) — total + Save to cloud, matching the design's bottom save bar. ============================================================ */ .rc-savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--border); box-shadow: 0 -6px 24px hsl(var(--shadow-color) / 0.10); } .rc-sb-total { display: flex; flex-direction: column; line-height: 1.1; flex-shrink: 0; } .rc-sb-total .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: var(--fw-bold); color: var(--text); } .rc-sb-total .lbl { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); white-space: nowrap; } .rc-sb-save { margin-left: auto; min-width: 130px; } @media (max-width: 879px) { .rc-savebar { display: flex; } body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } /* the top save bar's primary Save is now the bottom bar's job */ .save-bar .save-bar-btn { display: none; } /* keep the scroll-to-top button above the bar */ .scroll-top-btn { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } /* hide the bottom Save when viewing a locked date */ body.is-locked-view .rc-savebar { display: none; } /* ============================================================ SHARED-COUNT BANNER — locked to the bottom of the screen so you can always see you're in a shared count without scrolling. ============================================================ */ #csBar { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; z-index: 96; margin: 0 !important; border-radius: 0 !important; border: none; border-top: 2px solid var(--accent); background: color-mix(in srgb, var(--surface) 94%, transparent) !important; backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); box-shadow: 0 -8px 28px hsl(var(--shadow-color) / 0.14); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-height: 60vh; overflow-y: auto; } /* while in a shared count, the banner owns the bottom — hide the regular save bar */ body.cs-in-session .rc-savebar { display: none !important; } body.cs-in-session { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); } /* compact on phones so it doesn't eat the screen */ @media (max-width: 879px) { #csBar { padding: 7px 12px; padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); font-size: 12px; line-height: 1.35; } /* drop the expiry/viewing line on phones */ #csBar .cs-bar-top:first-child > div:first-child > div:nth-child(3) { display: none; } #csBar .cs-bar-code { font-size: 13px; } #csBar .cs-bar-top { gap: 6px; } #csBar .cs-bar-actions .btn { min-height: 32px; padding: 0 10px; font-size: 12.5px; } body.cs-in-session { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } } /* partner number pill — match/differ/split colours, sits left of the stepper */ .areas .stepper .cs-peer { margin-right: 1px; } .areas .stepper .cs-peer.match { background: var(--success-soft); color: var(--success-ink); } .areas .stepper .cs-peer.differ { background: var(--warn-soft); color: var(--warn-ink); } .areas .stepper .cs-peer.split { background: var(--surface-sunken); color: var(--text-muted); } /* neutral (not blue) so the section-total rows don't read like the blue bars */ .areas .area.is-total { background: var(--surface-sunken); border: 1px solid var(--border-strong); } .areas .area.is-total .area-namecell { background: transparent; border-bottom: none; } .areas .area.is-total .area-name { color: var(--primary-soft-ink); } .areas .area.is-total .area-stats { background: transparent; } .areas .area.is-total .stat { background: transparent; } @media (min-width: 720px) { .areas { gap: 5px; } .area-colhead, .areas .area { display: grid; grid-template-columns: minmax(140px, 1.5fr) repeat(3, 1fr) 72px; align-items: center; gap: 0 var(--s-4); } .area-colhead { padding: 2px 16px 6px; border-bottom: 1px solid var(--border); margin-bottom: 2px; } .area-colhead span { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); text-align: center; } .area-colhead .ch-name { text-align: left; } .area-colhead .ch-here { text-align: right; } .areas .area { border-radius: var(--r-sm); padding: 5px 16px; background: var(--surface); overflow: visible; } .areas .area:hover { background: var(--surface-2); } .areas .area-namecell { padding: 0; border: none; background: none; min-width: 0; } .areas .area-name { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .area-here-inline { display: none; } .areas .area-stats { display: contents; background: none; } .areas .stat { background: none; padding: 6px 0; flex-direction: row; align-items: center; justify-content: center; gap: 0; } .areas .stat-cap { display: none; } .areas .stepper { margin: 0 auto; gap: 4px; } .areas .step { width: 28px; height: 28px; font-size: 16px; border-width: 1px; border-color: var(--border); color: var(--text-muted); opacity: 0.5; transition: opacity 0.14s, background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s; } .areas .area:hover .step, .areas .area:focus-within .step { opacity: 1; } .areas .stepper .step-val { width: 52px; height: 32px; font-size: 18px; } .area-herecell { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; } .areas .area-herecell .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: var(--fw-bold); color: var(--text-secondary); } .areas .area.is-total { padding: 9px 16px; border-radius: var(--r-md); } .areas .area.is-total .stat { padding: 0; } .areas .sectot-num { margin: 0 auto; font-size: 19px; } .areas .area.is-total .area-herecell .num { color: var(--primary-soft-ink); font-size: 18px; } } /* ---- Segmented service toggle: prototype pill + thumb look ---- */ .seg-enhanced.global-service-toggle { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-pill); } .seg-enhanced .toggle-slider { background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } .seg-enhanced .global-service-btn { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text-muted); } .seg-enhanced .global-service-btn.active { color: var(--primary-soft-ink); } /* ============================================================ COUNTER MODAL — big "tap without looking" buttons (restyles the existing modal markup; index-only classes) ============================================================ */ .counter-header h2, #counterTitle { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.02em; } .counter-service-badge { font-size: 11px; font-weight: var(--fw-bold); padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent-soft, var(--accent-light)); color: var(--accent-soft-ink, var(--accent-hover)); text-transform: uppercase; letter-spacing: 0.05em; } .counter-content-full .counter-category { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); margin-bottom: var(--s-3); } .counter-content-full .counter-label { font-weight: var(--fw-bold); font-size: 17px; color: var(--text); } .counter-content-full .counter-controls { display: flex; align-items: stretch; gap: var(--s-3); width: 100%; } .counter-content-full .counter-btn { flex: 0 0 auto; width: 76px; height: 68px; border-radius: var(--r-md); border: 2px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 34px; font-weight: var(--fw-bold); line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.1s, color 0.12s; -webkit-tap-highlight-color: transparent; } .counter-content-full .counter-btn:active { transform: scale(0.94); } .counter-content-full .counter-btn.plus { background: var(--success); border-color: transparent; color: #fff; } .counter-content-full .counter-btn.plus:hover { background: var(--success-ink); } .counter-content-full .counter-btn.minus { background: var(--danger); border-color: transparent; color: #fff; } .counter-content-full .counter-btn.minus:hover { background: var(--danger-ink); border-color: transparent; color: #fff; } .counter-content-full .counter-value { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; height: 68px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: var(--fw-bold); color: var(--text); } /* ============================================================ COMMAND CONSOLE — prominent running total + date (built by redesign-ui.js above the sticky bar; index-only) ============================================================ */ .rc-console { display: flex; align-items: center; gap: var(--s-4); padding: 14px 18px; margin: 0 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%), var(--surface); box-shadow: var(--shadow-md); } .rc-con-left { min-width: 0; } .rc-con-eyebrow { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .rc-con-date { font-family: var(--font-display); font-size: clamp(18px, 4.5vw, 24px); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text); line-height: 1.1; margin-top: 2px; } .rc-con-right { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .rc-con-total { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(34px, 10vw, 52px); font-weight: var(--fw-bold); line-height: 0.92; letter-spacing: -0.03em; color: var(--primary); } [data-theme="dark"] .rc-con-total { color: var(--text); } .rc-con-total.bump { animation: rcBump 0.3s var(--ease); } @keyframes rcBump { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } } .rc-con-cap { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; white-space: nowrap; } /* console "Change date" affordance (shown on mobile, where the top save bar is gone) */ .rc-con-daterow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .rc-con-change { display: none; flex-shrink: 0; align-items: center; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); border-radius: var(--r-pill); height: 26px; padding: 0 12px; font-size: 12px; font-weight: var(--fw-semi); font-family: var(--font-body); cursor: pointer; } .rc-con-change:hover { background: var(--surface-sunken); border-color: var(--text-muted); } .rc-sb-shared { white-space: nowrap; } @media (max-width: 879px) { .rc-console { padding: 10px 14px; gap: var(--s-3); border-radius: var(--r-md); } .rc-con-eyebrow { display: none; } .rc-con-date { font-size: 16px; } .rc-con-right { flex-direction: row; align-items: baseline; gap: 6px; } .rc-con-total { font-size: 30px; } .rc-con-cap { display: none; } } /* date now lives in the console — drop the duplicate in the save bar */ .redesign-headcount .save-bar-label { display: none; } /* the blue save bar used a -16px bleed meant for the old card shell; with the transparent shell that pushed it past the screen edges (worst on the 12px mobile gutter). Align it to the page gutter instead — no horizontal overflow. */ /* and connect it to the service-toggle card above: the toggle card squares its bottom, the blue bar squares its top + carries the card's side/bottom border, so the two read as one card with a blue footer. */ .redesign-headcount .sticky-bar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } .redesign-headcount .save-bar { margin: 0 0 var(--s-4); /* breathing room before the first card (Main Hall) */ border-radius: 0 0 var(--r-lg) var(--r-lg); border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } /* ============================================================ COMPACT, NAVBAR-STYLE TOP ON PHONES Trims the sticky top so it doesn't eat the screen, makes the header read as a navbar, and un-squashes the blue save bar. ============================================================ */ @media (max-width: 879px) { .sticky-shell { padding: 8px 12px 0; } /* header = navbar: single row, brand left, menu right, hairline under */ .page-header { margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--border); align-items: center; } .page-header h1 { font-size: 16px; line-height: 1.1; } .brand-org { font-size: 9.5px; } .subtitle-row { display: none; } /* drop the "How this works" row in the navbar */ .logo-slot { width: 34px; height: 34px; } /* console: tighter */ .rc-console { padding: 7px 12px !important; margin: 0 0 7px !important; border-radius: var(--r-md); } .rc-con-date { font-size: 15px; } .rc-con-total { font-size: 27px; } /* toggle + jump links: much tighter (this was the biggest space hog) */ .sticky-bar { padding: 2px 0 5px !important; gap: 5px; } .global-service-toggle { padding: 3px; } .global-service-btn { min-height: 34px !important; padding: 5px 8px; font-size: 13px; } .jump-links { padding-top: 2px; } .jump-links a { padding: 3px 9px; } /* slim save bar on mobile: keep the "last saved by" meta and the "Load saved count" prompt (+ Start fresh / Count this Sunday). Save, Other date and Shared count are relocated to the console "Change" and the bottom bar. */ .save-bar { padding: 6px 12px; gap: 8px; } .save-bar-info { min-width: 0; flex: 1; } .save-bar-meta { white-space: normal; line-height: 1.3; } .save-bar-actions { flex-shrink: 0; gap: 6px; } .save-bar-actions .btn { min-height: 30px; padding: 0 12px; font-size: 12.5px; } .save-bar .save-bar-btn, .save-bar .save-bar-alt-btn, .save-bar .save-bar-shared-btn { display: none !important; } .rc-con-change { display: inline-flex !important; } /* hide the blue bar entirely when it has nothing to show (fresh Sunday, no saves) */ .save-bar:not(.has-content) { display: none; } } /* ============================================================ REPORTS — calendar restyle (maps the design's calendar look onto the real .calendar-grid / .cal-day markup) ============================================================ */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .calendar-grid .cal-day-header { text-align: center; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 4px 0; background: none; border: none; } .calendar-grid .cal-day { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-sm); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: var(--fw-semi); color: var(--text-secondary); border: 1.5px solid transparent; cursor: pointer; background: none; transition: background var(--dur), border-color var(--dur), filter var(--dur); } .calendar-grid .cal-day-empty { visibility: hidden; cursor: default; } .calendar-grid .cal-day-disabled { color: var(--text-muted); opacity: 0.4; cursor: default; } .calendar-grid .cal-day.has-data { color: var(--text); background: var(--accent-light); border-color: transparent; } .calendar-grid .cal-day.has-data::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .calendar-grid .cal-day.has-data:hover { filter: brightness(0.97); } .calendar-grid .cal-day:not(.has-data):not(.cal-day-disabled):not(.cal-day-empty):hover { background: var(--surface-sunken); } .calendar-grid .cal-day.selected { background: var(--primary) !important; color: var(--primary-ink) !important; border-color: transparent !important; box-shadow: var(--shadow-sm); } .calendar-grid .cal-day.selected::after { background: var(--primary-ink); } .calendar-grid .cal-day-tag { font-size: 8.5px; font-weight: var(--fw-bold); color: var(--accent); margin-top: 1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calendar-grid .cal-day.selected .cal-day-tag { color: var(--primary-ink); } .calendar-grid .cal-lock-icon { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; opacity: 0.7; } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); } #calMonthYear { font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-bold); } .cal-nav { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; } .cal-nav:hover { background: var(--surface-sunken); } .cal-today { height: 38px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: var(--fw-semi); cursor: pointer; } .cal-today:hover { background: var(--surface-sunken); } /* stats pills -> segmented pill look */ .stats-pill { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill); padding: 7px 13px; font-size: 12.5px; font-weight: var(--fw-semi); color: var(--text-secondary); cursor: pointer; transition: all var(--dur); } .stats-pill:hover { color: var(--text); } .stats-pill.active { background: var(--primary-soft); color: var(--primary-soft-ink); border-color: transparent; } /* ============================================================ SHELL — frosted sticky header + pill nav (themable) ============================================================ */ .sticky-shell { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border: 1px solid var(--border); border-radius: var(--r-lg); } .page-header h1 { font-family: var(--font-display); letter-spacing: -0.02em; } .brand-org { color: var(--accent); font-weight: var(--fw-bold); letter-spacing: 0.13em; text-transform: uppercase; } /* desktop nav as a pill group */ .desktop-nav { gap: 2px; background: var(--surface-sunken); padding: 4px; border: 1px solid var(--border); border-radius: var(--r-pill); } .desktop-nav-link { padding: 8px 14px; border-radius: var(--r-pill); font-weight: var(--fw-semi); color: var(--text-secondary); } .desktop-nav-link:hover { background: transparent; color: var(--text); } .desktop-nav-link--active { color: var(--primary-soft-ink); background: var(--surface); box-shadow: var(--shadow-xs); } .settings-menu-btn { border-radius: var(--r-pill); color: var(--text-secondary); } /* ---- mobile slide-over drawer (matches the design's drawer) ---- */ #sidebar, .sidebar { background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); } .sidebar-header { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); border-bottom: 1px solid var(--border); } .sidebar-user-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 16px; color: var(--text); } .sidebar-user-role { font-size: 12px; color: var(--text-muted); text-transform: capitalize; } /* avatar dot before the user name block */ /* ============================================================ FULL-LENGTH NAVBAR — ONLY the top header bar spans the page; the console / toggle / save bar stay in the centred content. ============================================================ */ .sticky-shell { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; /* children use the container's gutters */ } .sticky-shell::after { display: none; } /* drop the old inset gradient line */ html, body { overflow-x: clip; } /* guard against the 100vw scrollbar gutter */ /* spec page width: 1080 (all screens) so the navbar content lines up with the page */ .container { max-width: 1080px; } .page-header { position: relative; /* anchor the scroll-progress bar to the navbar */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* centre the navbar content with the 1080px container (24px gutter -> 50vw - 516px) */ padding: 16px max(24px, calc(50vw - 516px)); margin-bottom: var(--s-3); /* frosted page bg (spec), NOT a white slab */ background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid transparent; /* borderless at rest */ transition: border-color var(--dur), box-shadow var(--dur); } /* full-width reading-progress bar pinned under the navbar; grows with scroll */ .rc-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; pointer-events: none; z-index: 3; } .rc-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 0 3px 3px 0; transition: width 0.08s linear; } /* ============================================================ PREMIUM MICRO-ANIMATIONS (subtle, reduced-motion safe) ============================================================ */ /* cards fade + rise into view once (the .rc-reveal class is only added by JS when IntersectionObserver is supported and motion is allowed, so content is never left hidden) */ .rc-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease); will-change: opacity, transform; } .rc-reveal.rc-in { opacity: 1; transform: none; } /* gentle hover lift on cards — pointer devices only */ @media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.22), 0 3px 8px -4px rgba(15, 23, 42, 0.10); border-color: var(--border-strong); } } @media (prefers-reduced-motion: reduce) { .rc-reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ "WHAT'S NEW" SPLASH CAROUSEL ============================================================ */ .wn-panel { position: relative; max-width: 460px; width: 100%; max-height: 92vh; overflow-y: auto; overflow-x: hidden; text-align: left; } .wn-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; border: none; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wn-close:hover { background: var(--border); color: var(--text); } .wn-media { height: 232px; display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px; } .wn-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; animation: wnFade 0.35s var(--ease-out); } @keyframes wnFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .wn-eyebrow { font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); } .wn-title { font-family: var(--font-display); font-size: 21px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); margin-top: 3px; } .wn-body { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin-top: 8px; min-height: 66px; } .wn-body strong { color: var(--text); font-weight: var(--fw-semi); } .wn-dots { display: flex; gap: 6px; justify-content: center; margin: 18px 0 6px; } .wn-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--border-strong); transition: width 0.25s var(--ease), background 0.25s var(--ease); } .wn-dot.active { background: var(--primary); width: 22px; } .wn-nav { display: flex; gap: 10px; margin-top: 12px; } .wn-nav .btn { flex: 1; min-width: 0; } .wn-how { display: block; width: 100%; margin-top: 10px; padding: 6px; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: var(--fw-semi); cursor: pointer; font-family: inherit; } .wn-how:hover { text-decoration: underline; } /* admin "default numbers" editor in the Combined Report card */ .combined-defaults { margin-top: var(--s-5); padding: var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-sunken); } .combined-defaults-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .combined-defaults-title { font-weight: var(--fw-bold); font-size: 13.5px; color: var(--text); } .combined-defaults-hint { font-size: 12.5px; color: var(--accent); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; } .combined-defaults-note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 6px 0 10px; } .combined-defaults-actions { display: flex; flex-wrap: wrap; gap: 8px; } .combined-defaults-actions .btn { min-height: 34px; padding: 0 14px; font-size: 13px; } /* the line + shadow only appear once the page has scrolled under the bar (spec .is-stuck) */ .page-header.rc-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } /* solid brand name — the spec "Headcount" is not a gradient */ .page-header h1 { background: none; -webkit-text-fill-color: var(--text); color: var(--text); } .brand-org { font-size: 10.5px; } /* ============================================================ HEADER = design-spec topbar single row: brand · (spacer) · nav pill · user chip · [≡ mobile] ============================================================ */ .page-header { display: flex; align-items: center; gap: var(--s-4); justify-content: space-between; } .subtitle-row { display: none; } /* spec topbar has no "How this works" row */ .logo-slot { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-xs); background: var(--surface); } .logo-slot img { width: 100%; height: 100%; object-fit: contain; } .page-header h1 { font-size: 17px; line-height: 1.15; } .brand-org { font-size: 10.5px; line-height: 1; } /* the settings (⋯) menu is removed — its actions live in the drawer, which the user chip (desktop) and the ≡ button (mobile) both open */ .settings-menu { display: none !important; } /* desktop: one centred row instead of the stacked column */ @media (min-width: 768px) { .page-header { align-items: center; } .header-actions { flex-direction: row; align-items: center; gap: var(--s-3); align-self: center; } .header-actions .header-user-info { order: 0; align-self: center; } } /* user chip — first name + avatar (spec .user-chip), opens the drawer */ #userInfo.header-user-info { display: inline-flex; align-items: center; gap: var(--s-2); max-width: none; overflow: visible; line-height: 1; padding: 5px 6px 5px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color var(--dur); } #userInfo.header-user-info:hover { border-color: var(--border-strong); } #userInfo .rc-uc-name { font-size: 13px; font-weight: var(--fw-semi); color: var(--text); white-space: nowrap; } #userInfo .rc-uc-avatar { width: 30px; height: 30px; border-radius: var(--r-pill); flex-shrink: 0; background: var(--primary); color: var(--primary-ink); background-image: radial-gradient(circle at 50% 38%, color-mix(in srgb, #fff 22%, transparent), transparent 60%); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: 0.02em; } /* below the nav breakpoint the ≡ button takes over; hide the chip */ @media (max-width: 767px) { #userInfo.header-user-info { display: none; } } /* mobile hamburger — spec .iconbtn */ #menuToggle.icon-btn { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 0; } #menuToggle.icon-btn svg { width: 22px; height: 22px; } /* avatar with the user's initials (matches the design's drawer) */ .sidebar-header .sidebar-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--primary); color: var(--primary-ink); background-image: radial-gradient(circle at 50% 38%, color-mix(in srgb, #fff 22%, transparent), transparent 60%); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 14px; letter-spacing: 0.02em; } .sidebar-nav { padding: var(--s-3); display: flex; flex-direction: column; gap: 2px; } .sidebar-item { display: flex; align-items: center; gap: var(--s-3); padding: 12px 14px; border-radius: var(--r-sm); font-size: 15.5px; font-weight: var(--fw-semi); color: var(--text); text-decoration: none; border: none; background: none; cursor: pointer; text-align: left; width: 100%; } .sidebar-item svg { width: 19px; height: 19px; color: var(--text-muted); flex-shrink: 0; } .sidebar-item:hover { background: var(--surface-sunken); } .sidebar-item--active { background: var(--primary-soft); color: var(--primary-soft-ink); } .sidebar-item--active svg { color: var(--primary-soft-ink); } .sidebar-item--danger { color: var(--danger-ink); } .sidebar-item--danger svg { color: var(--danger-ink); } .sidebar-divider { height: 1px; background: var(--border); margin: var(--s-2) var(--s-2); border: none; } .sidebar-close { margin-left: auto; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; } /* ============================================================ CHANGELOG — timeline entries ============================================================ */ .cl-entry { position: relative; padding: 0 0 var(--s-6) var(--s-6); border-left: 2px solid var(--border); } .cl-entry:last-child { border-left-color: transparent; padding-bottom: 0; } .cl-entry::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent); } .cl-entry:first-child::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); } .cl-entry-header { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: 6px; } .cl-version { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary-soft-ink); font-family: var(--font-num); font-size: 11.5px; font-weight: var(--fw-bold); } .cl-title { font-family: var(--font-display); font-size: 16.5px; font-weight: var(--fw-bold); } .cl-date { margin-left: auto; font-size: 12.5px; color: var(--text-muted); } .cl-body { font-size: 14px; color: var(--text-secondary); line-height: 1.65; } /* ============================================================ ADMIN — underline tabs + user cards ============================================================ */ .admin-tabs { display: flex; gap: var(--s-3); overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); scrollbar-width: none; -ms-overflow-style: none; } .admin-tabs::-webkit-scrollbar { display: none; } /* swipe to scroll the tabs, no visible bar */ .admin-tab { border: none; background: none; cursor: pointer; padding: 10px 4px; margin-bottom: -1px; font-family: var(--font-display); font-size: 14.5px; font-weight: var(--fw-bold); color: var(--text-muted); border-bottom: 2.5px solid transparent; white-space: nowrap; } .admin-tab:hover { color: var(--text); } .admin-tab.active { color: var(--primary-soft-ink); border-bottom-color: var(--primary); } .admin-user-card { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); margin-bottom: var(--s-3); } .admin-user-name { font-weight: var(--fw-bold); font-size: 15px; } .admin-user-email { font-size: 13px; color: var(--text-secondary); } .admin-user-date { font-size: 12px; color: var(--text-muted); } .user-status-pill, .admin-badge { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: var(--fw-bold); background: var(--surface-sunken); color: var(--text-secondary); } .user-role-select { border-radius: var(--r-sm); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); } /* ============================================================ FEEDBACK — form fields + success state ============================================================ */ .form-input, .form-select, .form-textarea { width: 100%; min-height: 44px; padding: 11px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 15px; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--focus) 18%, transparent); } .success-state { text-align: center; padding: var(--s-8) var(--s-4); } .success-state h3 { font-family: var(--font-display); font-size: 21px; } .feedback-card { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); padding: var(--s-4); margin-bottom: var(--s-3); } /* two-column: calendar left, selected-date detail right (sticky panel) */ @media (min-width: 860px) { .reports-twocol { display: grid; grid-template-columns: minmax(360px, 440px) 1fr; gap: var(--s-6); align-items: start; } .reports-twocol .rc-dd-col #inlineStats { margin-top: 0 !important; border-top: none !important; padding-top: var(--s-5) !important; position: sticky; top: 84px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); padding: var(--s-5) !important; } } /* ============================================================ REPORTS — day-detail panel (the Claude design's selected-day view) ============================================================ */ #inlineStats .dd-head { display: flex; align-items: flex-start; gap: var(--s-3); } #inlineStats .dd-head-text { min-width: 0; flex: 1; } #inlineStats .dd-dow { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } #inlineStats .dd-date { font-family: var(--font-display); font-size: 21px; font-weight: var(--fw-bold); letter-spacing: -0.02em; margin-top: 3px; color: var(--text); } #inlineStats .dd-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent-light); color: var(--accent-hover); font-size: 12px; font-weight: var(--fw-bold); } #inlineStats .dd-hero { margin: var(--s-5) 0; display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; } #inlineStats .dd-hero-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(46px, 9vw, 66px); font-weight: var(--fw-bold); line-height: 0.85; letter-spacing: -0.04em; color: var(--primary); } [data-theme="dark"] #inlineStats .dd-hero-num { color: var(--text); } #inlineStats .dd-hero-meta { display: flex; flex-direction: column; gap: 3px; } #inlineStats .dd-hero-cap { font-size: 12px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } #inlineStats .dd-delta { font-size: 14px; font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: 4px; } #inlineStats .dd-delta.up { color: var(--success); } #inlineStats .dd-delta.down { color: var(--danger); } #inlineStats .dd-delta.flat { color: var(--text-muted); } #inlineStats .dd-split { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); } #inlineStats .dd-svc-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } #inlineStats .dd-svc-name { font-family: var(--font-display); font-size: 14px; font-weight: var(--fw-bold); color: var(--text); } #inlineStats .dd-svc-name span { font-family: var(--font-body); font-size: 11.5px; font-weight: var(--fw-semi); color: var(--text-muted); margin-left: 6px; } #inlineStats .dd-svc-val { font-family: var(--font-num); font-size: 17px; font-weight: var(--fw-bold); color: var(--text); } #inlineStats .dd-bar { height: 9px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; } #inlineStats .dd-bar-fill { height: 100%; border-radius: var(--r-pill); transition: width 0.6s var(--ease-out); } #inlineStats .dd-bar-fill.a { background: var(--accent); } #inlineStats .dd-bar-fill.b { background: color-mix(in srgb, var(--primary) 70%, var(--accent)); } #inlineStats .dd-break { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-bottom: var(--s-4); } @media (max-width: 520px) { #inlineStats .dd-break { grid-template-columns: repeat(2, 1fr); } } #inlineStats .dd-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 10px; text-align: center; } #inlineStats .dd-tile-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: var(--fw-bold); color: var(--text); line-height: 1; } #inlineStats .dd-tile-lbl { font-size: 11px; font-weight: var(--fw-semi); color: var(--text-muted); margin-top: 5px; } #inlineStats .dd-by { font-size: 12.5px; color: var(--text-muted); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); } #inlineStats .savechip.is-locked { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: var(--fw-semi); height: fit-content; } /* ============================================================ ATTENDANCE PAGE ============================================================ */ /* the toggle sits in a white rounded card like headcount's sticky-bar */ .att-sticky { padding: var(--s-4) 16px; } .att-console-card { padding: var(--s-5); margin-top: var(--s-3); } /* space before the "Attendance for" date */ /* toast must sit above the modals (z-index 1000) so errors are visible in a modal */ .toast { z-index: 4000 !important; } .att-import-preview.is-error { background: var(--danger-soft, #fee2e2); color: var(--danger-ink, #991b1b); } .att-import-warn { color: var(--danger-ink, #b45309); } .att-console { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .att-console-label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .att-console-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .att-console-date { font-family: var(--font-display); font-size: 20px; font-weight: var(--fw-bold); color: var(--text); } .att-console-meta { font-size: 12.5px; color: var(--text-secondary); font-weight: var(--fw-semi); } .btn.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; } .att-cat-card { padding: var(--s-5); overflow: visible; /* let the autocomplete dropdown escape the card */ position: relative; z-index: 1; animation: attReveal 0.4s var(--ease-out) both; } .att-cat-card:nth-child(2) { animation-delay: 0.05s; } .att-cat-card:nth-child(3) { animation-delay: 0.1s; } .att-cat-card:nth-child(4) { animation-delay: 0.15s; } .att-cat-card--open { z-index: 40; } /* raise the focused card so its dropdown sits above the next one */ @keyframes attReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .att-cat-card { animation: none; } } /* extra breathing room between the service toggle and the first category card */ #attSections { margin-top: var(--s-4); display: block; } .att-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .att-cat-title { font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-bold); color: var(--text); } .att-cat-count { min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } .att-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .att-list:empty { display: none; } .att-entry { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); } .att-entry-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; } .att-entry-num { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 13px; } .att-entry-name { font-weight: var(--fw-semi); color: var(--text); } .att-entry-detail { font-size: 12px; color: var(--text-secondary); } .att-entry-rm { flex-shrink: 0; width: 28px; height: 28px; border: none; background: none; color: var(--text-muted); border-radius: var(--r-sm); cursor: pointer; font-size: 13px; } .att-entry-rm:hover { background: var(--danger-soft, #fee2e2); color: var(--danger); } .att-add { position: relative; } .att-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 14.5px; font-family: inherit; } .att-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .att-add-input { background: var(--surface-sunken); } .att-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; max-height: 260px; overflow-y: auto; } .att-suggest-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--text); font-family: inherit; } .att-suggest-item:hover { background: var(--surface-sunken); } .att-suggest-new { color: var(--accent); font-weight: var(--fw-semi); border-top: 1px solid var(--border); } .att-field { margin-bottom: 12px; } .att-field label { display: block; font-size: 13px; font-weight: var(--fw-semi); color: var(--text-secondary); margin-bottom: 5px; } .att-opt { color: var(--text-muted); font-weight: var(--fw-reg); } .att-gen-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .att-output { width: 100%; box-sizing: border-box; min-height: 120px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text); font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.5; resize: vertical; white-space: pre; } .att-import-preview { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-light); color: var(--text); font-size: 13.5px; line-height: 1.5; } /* ============================================================ PRIMARY MODE SWITCH (Headcount / Attendance) — a distinct segmented toggle, separate from the secondary nav pill. ============================================================ */ .nav-mode-toggle { display: none; align-items: center; gap: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; margin-right: var(--s-3); } @media (min-width: 768px) { .nav-mode-toggle { display: inline-flex; } } .nav-mode-link { padding: 8px 16px; border-radius: var(--r-pill); text-decoration: none; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--text-secondary); white-space: nowrap; transition: color var(--dur), background var(--dur), box-shadow var(--dur); } .nav-mode-link:hover { color: var(--text); } .nav-mode-link--active { color: var(--primary-ink); background: var(--primary); box-shadow: var(--shadow-sm); } /* attendance: per-person note + inline note editor */ .att-entry-note { font-size: 12px; color: var(--accent-hover, var(--accent)); font-style: italic; } .att-entry-note-btn { flex-shrink: 0; height: 26px; padding: 0 8px; border: none; background: none; color: var(--text-muted); border-radius: var(--r-sm); cursor: pointer; font-size: 12px; white-space: nowrap; } .att-entry-note-btn:hover { background: var(--surface-sunken); color: var(--text); } .att-note-edit { flex-basis: 100%; margin-top: 8px; } .att-note-edit .att-input { font-size: 13px; padding: 8px 10px; } .att-entry { flex-wrap: wrap; } .att-import-note { font-size: 12px; color: var(--text-secondary); } /* attendance import disambiguation candidates */ .db-cands { display: flex; flex-direction: column; gap: 6px; } .db-cand { width: 100%; justify-content: flex-start; } /* attendance: couple indicator chip on an entry */ .att-entry-couple { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--accent); background: var(--accent-light); padding: 1px 7px; border-radius: var(--r-pill); } /* attendance: save-to-cloud row + status */ .att-save { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .att-save-status { font-size: 12.5px; font-weight: var(--fw-semi); color: var(--text-muted); } .att-save-status.is-saved { color: var(--success, #0f9d6b); } .att-save-status.is-error { color: var(--danger-ink, #b45309); } /* attendance: per-day service flag (button + chip) */ .att-entry-flag { font-size: 11px; font-weight: var(--fw-bold); color: var(--accent-hover, var(--accent)); background: var(--accent-light); padding: 1px 7px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: 0.02em; } .att-entry-svc-btn { flex-shrink: 0; height: 26px; padding: 0 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--r-sm); cursor: pointer; font-size: 11.5px; font-weight: var(--fw-semi); white-space: nowrap; } .att-entry-svc-btn:hover { background: var(--surface-sunken); color: var(--text); } .att-entry-svc-btn.is-on { background: var(--accent-light); color: var(--accent-hover, var(--accent)); border-color: transparent; }