/* ============================================================================= 2027.css - GENERATED FILE - wiped and rebuilt by merge-css.cmd (Run\patch.cmd runs merge-css before IIS recycle; AppShell links this + print.css). Do not hand-edit: changes are overwritten on the next merge / patch. Edit sources instead, in this order: 1. reset.css 2. tokens.css 3. layout.css 4. components.css 5. toast.css print.css is NOT merged (separate media=print link). Rebuild: Run\merge-css.cmd ============================================================================= */ /* --- reset.css --- */ /* ============================================ reset.css — modern CSS reset First in the screen cascade. ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; line-height: 1.5; scroll-behavior: smooth; } body { min-height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; text-wrap: balance; } p { text-wrap: pretty; } table { border-collapse: collapse; border-spacing: 0; } /* --- tokens.css --- */ /* ============================================ tokens.css — design tokens + layout policy ============================================ Supported surfaces (locked): 1. Mobile (default) — field phones; full-width content 2. Office (wide) — min-width 60rem; content max 8.5in 3. Print — print.css (media=print); not tokens here Themes (cookie + data-theme on ): dark (default) — Sample-inspired dark + orange light — light + orange Tablets: no third layout. Width decides mobile vs office. ============================================ */ :root { /* Content column */ --content-max: 100%; --page-pad: 1rem; /* Shared type stack */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Spacing & radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Z-index scale (grow carefully) */ --z-menu: 100; --z-toast: 1000; /* Brand accent (shared by both themes) */ --color-accent: #f97316; --color-accent-hover: #ea580c; --color-accent-light: rgba(249, 115, 22, 0.15); --color-on-accent: #ffffff; } /* ---------- Dark + Orange (default) ---------- */ :root, [data-theme="dark"] { color-scheme: dark; --color-text: #e5e5e5; --color-text-muted: #a3a3a3; --color-heading: #fafafa; --color-border: #262626; --color-bg: #0a0a0a; --color-bg-elevated: #141414; --color-bg-subtle: #1a1a1a; --color-toast-bg: #333333; --color-toast-fg: #ffffff; } /* ---------- Light + Orange ---------- */ [data-theme="light"] { color-scheme: light; --color-text: #262626; --color-text-muted: #737373; --color-heading: #0a0a0a; --color-border: #e5e5e5; --color-bg: #fafafa; --color-bg-elevated: #ffffff; --color-bg-subtle: #f5f5f5; --color-toast-bg: #262626; --color-toast-fg: #ffffff; --color-accent-light: rgba(249, 115, 22, 0.12); } /* * Office / wide breakpoint. * 60rem ≈ 960px — room for an 8.5in column plus a little chrome. * Content width stays 8.5in so on-screen forms match letter-size printing habits. */ @media screen and (min-width: 60rem) { :root { --content-max: 8.5in; --page-pad: 1.25rem; } } /* --- layout.css --- */ /* ============================================ layout.css — app shell Mobile-first; office width via tokens. ============================================ */ body { font-family: var(--font-sans); color: var(--color-text); background-color: var(--color-bg); } /* Menu chrome: hidden until boot marks the session authenticated. Sticky so Menu / messages / Account stay put while #content scrolls. */ #menu { display: none; position: sticky; top: 0; z-index: var(--z-menu); width: 100%; padding: 0.4rem var(--page-pad); border-bottom: 1px solid var(--color-border); background-color: var(--color-bg-elevated); } html[data-authed="1"] #menu { display: block; } /* Menu left; messages + Account hug the trailing edge as a group. */ .menu-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; max-width: var(--content-max); margin-inline: auto; } .menu-bar > form { margin: 0; flex-shrink: 0; } .menu-bar-end { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-left: auto; min-width: 0; } .menu-bar-end > form { margin: 0; flex-shrink: 0; } #msg-alert { min-width: 0; min-height: 0; } #msg-alert[hidden] { display: none !important; } /* Icon-only Account shortcut — same height as Menu, does not steal notice space. Two classes so this wins over later .btn padding in components.css. */ .btn.btn-account { min-width: 2.75rem; min-height: 2.75rem; padding: 0.4rem; } .icon-account { display: block; width: 1.25rem; height: 1.25rem; position: relative; flex-shrink: 0; border: 2px solid currentColor; border-radius: 50%; overflow: hidden; } .icon-account::before { content: ""; position: absolute; left: 50%; top: 0.12rem; width: 0.34rem; height: 0.34rem; border-radius: 50%; background: currentColor; transform: translateX(-50%); } .icon-account::after { content: ""; position: absolute; left: 50%; bottom: -0.1rem; width: 0.72rem; height: 0.48rem; border-radius: 50% 50% 0 0; background: currentColor; transform: translateX(-50%); } #content { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--page-pad); } #content.loading { color: var(--color-text-muted); } /* --- components.css --- */ /* ============================================ components.css — forms, buttons, shared UI ============================================ */ /* ---------- Dashboard (company pulse home) ---------- */ .dash-head h1 { margin-bottom: 0.25rem; } .dash-quick-row { margin-top: 0.5rem; } .dash-section > h2 { margin: 0 0 0.75rem; font-size: 1.05rem; } .dash-item { padding: 0.65rem 0.75rem; margin-bottom: 0.5rem; border-left: 3px solid var(--color-border); background: var(--color-bg); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .dash-item-headline { font-weight: 500; line-height: 1.35; } .dash-item-link { margin-top: 0.4rem; } .dash-kind-onsite { border-left-color: var(--color-accent, #3b82f6); } .dash-kind-driving { border-left-color: #eab308; } .dash-kind-shop, .dash-kind-office { border-left-color: #8b5cf6; } .dash-kind-new { border-left-color: #22c55e; } .dash-kind-docs { border-left-color: #06b6d4; } .dash-kind-equip { border-left-color: #f97316; } .dash-kind-alert { border-left-color: #ef4444; } .dash-attention > h2 { color: #b91c1c; } .dash-alert-flag { margin-top: 0.2rem; font-size: 0.95rem; } .dash-item-links.button-row { margin-top: 0.35rem; margin-bottom: 0; } /* ---------- Guest auth (login + activate) ---------- */ .auth-panel { max-width: 22rem; margin: 1.5rem auto 0; padding: 1.25rem 1.25rem 1.5rem; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg, var(--radius-md)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .auth-brand { text-align: center; margin-bottom: 1.25rem; } .auth-logo { display: block; max-width: 11rem; width: 100%; height: auto; margin: 0 auto 0.75rem; object-fit: contain; } .auth-company { font-size: 0.95rem; font-weight: 600; color: var(--color-heading); line-height: 1.3; } .auth-panel > h2 { margin: 0 0 0.35rem; font-size: 1.15rem; text-align: center; } .auth-form { margin-top: 0.5rem; } .auth-submit { width: 100%; margin-top: 0.25rem; } .auth-secondary { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border); text-align: center; } .auth-secondary > form { margin-top: 0.5rem; } .auth-secondary .btn { width: 100%; } /* HR printable invite / password-reset slip */ .auth-handoff-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.35rem; } .auth-handoff-details { margin: 0.75rem 0; line-height: 1.5; } .auth-handoff-label { margin-top: 0.75rem; font-size: 0.875rem; color: var(--color-text-muted); } .auth-handoff-code { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; margin: 0.35rem 0 1rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: center; background: var(--color-bg); } .auth-handoff-steps { margin: 0.75rem 0; line-height: 1.55; } .auth-handoff-actions { margin-bottom: 0.75rem; } .auth-handoff-sms { margin: 0.75rem 0; padding: 0.65rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); line-height: 1.45; } .auth-handoff-sms-ok { background: var(--color-bg-subtle); } .auth-handoff-sms-fail { border-color: var(--color-accent); background: var(--color-accent-light); } /* ---------- Field wrappers (labelinput / checkbox / select) ---------- */ .field { margin-bottom: 0.75rem; } .field > label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; color: var(--color-text); } /* Bare labels outside .field (legacy call sites) */ label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; color: var(--color-text); } /* ---------- Text-like controls (never checkboxes/radios) ---------- */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input:not([type]), textarea, select { display: block; width: 100%; margin-bottom: 0.75rem; padding: 0.625rem 0.875rem; font-size: 1rem; line-height: 1.5; color: var(--color-heading); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Spacing owned by .field when using helpers */ .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field input[type="tel"], .field input[type="url"], .field input[type="search"], .field input[type="date"], .field input:not([type]), .field textarea, .field select { margin-bottom: 0; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="date"]:focus, input:not([type]):focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); } input::placeholder, textarea::placeholder { color: var(--color-text-muted); } textarea { min-height: 7.5rem; resize: vertical; } /* ---------- Checkbox / radio ---------- */ /* * Stacked full-width text styles must NOT apply here. * .field-checkbox is a single-line control + label. */ .field-checkbox { margin-bottom: 0.75rem; } .field-checkbox > .checkbox-label, .checkbox-label { display: inline-flex; align-items: center; gap: 0.625rem; margin-bottom: 0; font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--color-text); cursor: pointer; user-select: none; } input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; box-sizing: border-box; width: 1.25rem; height: 1.25rem; margin: 0; padding: 0; flex-shrink: 0; vertical-align: middle; accent-color: var(--color-accent); cursor: pointer; border: none; background: none; box-shadow: none; } input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: none; border-color: transparent; } /* ---------- Buttons ---------- */ button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.25rem 0.25rem 0.25rem 0; padding: 0.75rem 1.25rem; font-size: 1rem; font-weight: 600; line-height: 1; color: var(--color-heading); background-color: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } button:hover { background-color: var(--color-bg-elevated); border-color: var(--color-accent); } /* Resting accent outline — same as hover. One hint control per view. */ button.btn-nudge, .btn.btn-nudge { border-color: var(--color-accent); } button:active { transform: scale(0.98); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; line-height: 1; border-radius: var(--radius-md); border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background-color: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); } .btn-primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn-secondary { background-color: transparent; color: var(--color-heading); border-color: var(--color-border); } .btn-secondary:hover { background-color: var(--color-bg-subtle); } .theme-picker { display: grid; gap: 0.5rem; margin: 1.25rem 0; padding: 1rem; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .box { margin-bottom: 1rem; padding: 1rem; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); } /* Job-site extras (pump / crane / water / misc) — closed until needed. */ details.site-extra > summary { cursor: pointer; font-weight: 600; user-select: none; } details.site-extra[open] > summary { margin-bottom: 0.75rem; } /* Job Sites Edit: test link left, remove X right. */ .job-link-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin: 0.35rem 0 0.65rem; } .job-link-open { margin: 0; max-width: calc(100% - 3.75rem); justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere; } .job-link-remove { flex: 0 0 auto; margin: 0 0 0 auto; min-width: 2.75rem; padding: 0.75rem 0.85rem; color: #ef4444; border-color: #ef4444; background-color: transparent; } .job-link-remove:hover { background-color: rgba(239, 68, 68, 0.12); border-color: #ef4444; color: #ef4444; } /* ---------- Project Docs ---------- */ .text-muted { color: var(--color-text-muted); font-size: 0.875rem; } .doc-cats { gap: 0.4rem; } .doc-cats form { margin: 0; } .doc-cats .doc-cat { margin: 0; padding: 0.5rem 0.85rem; font-size: 0.875rem; } .doc-list { display: grid; gap: 0.5rem; margin: 0.5rem 0 1rem; } .doc-row { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.75rem; align-items: start; padding: 0.65rem 0.75rem; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .doc-row-sensitive { border-color: rgba(249, 115, 22, 0.45); } .doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-top: 0.35rem; } .doc-main { min-width: 0; } .doc-main form { margin: 0; } .doc-main button { width: 100%; margin: 0; justify-content: flex-start; text-align: left; font-weight: 500; background: transparent; border-color: transparent; } .doc-main button:hover { border-color: var(--color-accent); background-color: var(--color-bg-subtle); } .doc-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.65rem; padding-top: 0.35rem; border-top: 1px solid var(--color-border); margin-top: 0.15rem; } .doc-actions form { margin: 0; } .doc-actions .btn { width: auto; margin: 0; padding: 0.45rem 0.75rem; font-size: 0.875rem; font-weight: 600; justify-content: center; text-align: center; background-color: transparent; border: 1px solid var(--color-border); color: var(--color-heading); } .doc-actions .btn:hover { border-color: var(--color-accent); background-color: var(--color-bg-subtle); } .doc-actions .doc-delete:hover { border-color: #ef4444; color: #ef4444; } .doc-rename { flex: 1 1 12rem; min-width: 10rem; max-width: 22rem; } .doc-rename .field { margin: 0; } .doc-rename input[type="text"] { margin: 0; padding: 0.45rem 0.65rem; font-size: 0.875rem; } .doc-replace { display: inline-flex; align-items: center; } .doc-type { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-muted); background-color: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.15rem 0.4rem; } .doc-badge-sensitive { font-size: 0.7rem; font-weight: 700; color: var(--color-accent); background-color: var(--color-accent-light); border-radius: var(--radius-sm); padding: 0.15rem 0.4rem; } /* TimeClock per diem: Mon–Fri one row, Sat–Sun second (compact) */ .perdiem-box .text-muted { margin-bottom: 0.5rem; } .perdiem-row { display: grid; gap: 0.35rem 0.5rem; margin-top: 0.35rem; align-items: end; } .perdiem-weekdays { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Weekend under Mon–Tue column width (2 of 5) */ .perdiem-weekend { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc((100% - 2rem) * 0.4 + 0.5rem); } .perdiem-day { margin: 0; min-width: 0; } .perdiem-day .field { margin-bottom: 0; } .perdiem-day .field > label { font-size: 0.75rem; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .perdiem-day .field select { padding: 0.35rem 0.25rem; font-size: 0.8rem; line-height: 1.25; } /* Safety Docs gallery (image scale test / office review) */ .safetydocs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .safetydocs-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.5rem; background: var(--color-bg-subtle); min-width: 0; } .safetydocs-name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .safetydocs-job { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .safetydocs-thumb-link { display: block; margin-top: 0.35rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg); } .safetydocs-thumb { display: block; width: 100%; height: auto; max-height: 12rem; object-fit: cover; vertical-align: middle; } .safetydocs-hint { font-size: 0.7rem; margin-top: 0.25rem; } .safetydocs-card .btn { margin-top: 0.35rem; width: 100%; } .safetydocs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 0.75rem; } .safetydocs-table th, .safetydocs-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); vertical-align: top; } .safetydocs-table th { font-weight: 600; color: var(--color-text-muted); } .safetydocs-chronic { background: var(--color-accent-light); } .safetydocs-flags { font-weight: 700; font-size: 0.8rem; color: var(--color-accent); margin: 0.35rem 0; } .safetydocs-notes { white-space: pre-wrap; font-family: var(--font-sans); font-size: 0.85rem; margin: 0.25rem 0 0.5rem; padding: 0.5rem; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .safetydocs-snippet { font-size: 0.75rem; max-width: 14rem; } .safetydocs-shift .safetydocs-thumb { max-height: 10rem; } /* TimeClock HR notes (append-only user→office channel) */ .timeclock-hr-notes { white-space: pre-wrap; font-family: var(--font-sans); font-size: 0.9rem; margin: 0.35rem 0 0.75rem; padding: 0.5rem 0.65rem; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); max-height: 12rem; overflow: auto; } /* Time allocation claims — stand out with accent */ .tsa-claim { margin: 0.5rem 0; padding: 0.5rem 0.65rem; border-left: 3px solid var(--color-accent); background: var(--color-accent-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .tsa-claim-title { font-weight: 600; color: var(--color-heading); } .tsa-claim-notes { font-size: 0.85rem; color: var(--color-text); margin-top: 0.2rem; opacity: 0.9; } .tsa-claim .button-row { margin-top: 0.35rem; margin-bottom: 0; } .tc-catalog { margin: 0.5rem 0; } .tc-catalog input[type="search"] { width: 100%; } .tc-rest-shift { margin: 0.75rem 0 0.25rem; } .tc-started-earlier { border-left: 3px solid var(--color-accent); } /* TSA allocation report */ .tsa-range-header { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; } .tsa-grand-total, .tsa-user-total { font-weight: 700; color: var(--color-accent); white-space: nowrap; } .tsa-user-header { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; } .tsa-report-row { display: grid; grid-template-columns: 4.5rem 4.5rem minmax(6rem, 1fr) minmax(6rem, 1.5fr) auto; gap: 0.4rem 0.65rem; align-items: start; padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); } .tsa-report-dur { font-weight: 600; font-variant-numeric: tabular-nums; } .tsa-report-date { font-variant-numeric: tabular-nums; color: var(--color-text-muted, var(--color-text)); opacity: 0.9; } .tsa-report-notes { font-size: 0.85rem; min-width: 0; overflow-wrap: anywhere; } .tsa-filter-link { text-align: left; white-space: normal; max-width: 100%; } .tsa-more-panel { margin: 0.25rem 0 0.75rem; } .tsa-more-top { display: grid; grid-template-columns: 1fr auto; margin-bottom: 0.5rem; } .tsa-geo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; } @media (max-width: 40rem) { .tsa-report-row { grid-template-columns: 4rem 4rem 1fr auto; } .tsa-report-notes { grid-column: 1 / -1; } .tsa-geo-row { grid-template-columns: 1fr; } } /* Forgot clock-out recovery (long open shift) */ .timeclock-forgot-out { border: 2px solid var(--color-accent); background: var(--color-accent-light); } .timeclock-forgot-out h2 { color: var(--color-heading); margin-top: 0; } .timeclock-forgot-out-does { margin: 0.5rem 0 0.75rem 1.1rem; padding: 0; } .timeclock-forgot-out-does li { margin: 0.25rem 0; } .timeclock-forgot-out-btn { width: 100%; min-height: 2.75rem; font-weight: 700; } /* TimeClock refresh — pocket-all-day stale view */ .timeclock-refresh-bar { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); } .timeclock-refresh-bar > form { margin: 0.5rem 0; } .timeclock-refresh-btn { width: 100%; min-height: 3rem; font-size: 1.1rem; font-weight: 700; } .timeclock-asof { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; } /* Collapsible sections (safety OK, time adjust) — native
*/ details.tc-collapse { padding-top: 0.65rem; padding-bottom: 0.65rem; } .tc-collapse-summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style-position: outside; user-select: none; } .tc-collapse-summary::-webkit-details-marker { color: var(--color-text-muted); } .tc-collapse-body { margin-top: 0.75rem; } .tc-personal-add { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px dashed var(--color-border); } .tc-personal-label { font-weight: 600; margin-bottom: 0.25rem; } /* TimeClock "this week" mini payroll (Ready only) */ .thisweek-nav { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; } .thisweek-nav > form { margin: 0; } .thisweek-nav-label { text-align: center; font-size: 0.9rem; font-weight: 500; } .thisweek-sheet { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; background: var(--color-bg-subtle); } .thisweek-day { font-weight: 600; margin-bottom: 0.25rem; } .thisweek-claim { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.75rem; font-size: 0.9rem; margin-top: 0.2rem; } .thisweek-notes { font-size: 0.8rem; margin: 0 0 0.25rem 0; } .thisweek-sheet-totals, .thisweek-week-totals, .tc-shift-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.35rem; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 500; } .thisweek-week-totals { margin-top: 0.35rem; padding: 0.5rem 0; } /* View / edit chrome: Docs, links, Pin, nav, vendor actions — wraps on narrow width */ .button-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, max-content)); gap: 0.5rem 0.75rem; margin-top: 0.75rem; margin-bottom: 0.75rem; align-items: stretch; justify-content: start; } .button-row > form { margin: 0; min-width: 0; display: flex; } /* Direct button (e.g. Save overrides wired via submitonclick outside its form) */ .button-row > button, .button-row > form > button { width: 100%; min-width: 0; margin: 0; } /* Pinned project rows (Job Sites / Equipment / General lists) */ .list-item-pinned { margin: 0; } .list-item-pinned > form, .doc-list > .list-item-pinned form { margin: 0; } .list-item-pinned button { width: 100%; justify-content: flex-start; text-align: left; border-color: var(--color-accent) !important; background-color: var(--color-accent-light) !important; color: var(--color-heading); font-weight: 600; } .list-item-pinned button:hover { border-color: var(--color-accent-hover) !important; background-color: var(--color-bg-elevated) !important; } /* Equipment multi-line Notes blob */ .equip-notes { margin-top: 0.35rem; margin-bottom: 0.75rem; padding: 0.75rem 0.875rem; white-space: pre-wrap; word-break: break-word; font-size: 0.95rem; line-height: 1.45; color: var(--color-text); background-color: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); } /* ---------- Shared upload zone (JS/upload.js) ---------- */ .upload-zone { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-elevated); transition: border-color 0.15s ease, background-color 0.15s ease; } .upload-zone.upload-dragover { border-color: var(--color-accent); background-color: var(--color-accent-light); } .upload-zone.upload-busy { opacity: 0.9; } .upload-zone .upload-pick { justify-self: start; } .upload-hint { font-size: 0.875rem; color: var(--color-text-muted); } .upload-status { font-size: 0.875rem; color: var(--color-text); min-height: 1.25em; } .upload-progress { width: 100%; height: 0.5rem; accent-color: var(--color-accent); } .upload-zone input[type="file"][hidden] { display: none; } /* Job Sites Invoice (Payroll): full-width row under .button-row */ .invoice-upload-row { margin-top: 0.25rem; margin-bottom: 0.75rem; } .invoice-upload-row .upload-pick { justify-self: start; } /* ---------- List toolbar (ModuleUi::listToolbar*) ---------- */ .list-toolbar { display: grid; gap: 0.65rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .list-toolbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; } .list-toolbar .field, .list-toolbar .field-checkbox { margin-bottom: 0; } /* Search: labeled, not full content width */ .list-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; } .list-toolbar .field-search { flex: 1 1 11rem; max-width: 18rem; min-width: 9rem; margin-bottom: 0; } .list-toolbar .field-search input[type="search"] { width: 100%; margin-bottom: 0; } .list-archive { display: flex; align-items: center; } .list-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--color-text-muted); } .list-pagination .page-status { min-width: 6rem; text-align: center; color: var(--color-text); font-variant-numeric: tabular-nums; } /* Reset is quiet until filters differ from defaults */ .list-reset .list-reset-active { border-color: var(--color-accent); color: var(--color-accent); } @media screen and (min-width: 60rem) { .list-toolbar-row { gap: 0.75rem 1rem; } .list-toolbar .field-search { max-width: 22rem; } } /* TimeClock This week — HR / office change layer */ .thisweek-sheet-changed { border-left: 3px solid var(--color-accent); padding-left: 0.5rem; } .thisweek-hr-label { font-weight: 600; font-size: 0.85rem; margin-top: 0.5rem; } .thisweek-sheet-notes { white-space: pre-wrap; font-family: inherit; font-size: 0.85rem; margin: 0.25rem 0 0.5rem; padding: 0.4rem 0.5rem; background: var(--color-bg-subtle); border-radius: var(--radius-sm); } .thisweek-office-event { font-size: 0.8rem; margin: 0.15rem 0; opacity: 0.95; } .thisweek-src { font-size: 0.85rem; } /* Payroll office edit */ .pr-edit-panel { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--color-border); } .pr-edit-form { margin: 0.75rem 0; padding: 0.65rem; background: var(--color-bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .pr-edit-label { font-weight: 600; margin-bottom: 0.35rem; } .pr-duration-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; } .pr-claim-edit { margin: 0.5rem 0; padding: 0.5rem; border-left: 3px solid var(--color-accent); } .pr-create { margin-bottom: 1rem; } /* TSA large CSV export confirm */ .tsa-export-warn { border: 2px solid var(--color-accent); background: var(--color-accent-light); } .tsa-export-warn-text { font-weight: 600; margin-bottom: 0.5rem; } /* ---------- Payroll report (print-first) ---------- */ .pr-toolbar { display: grid; gap: 0.65rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .pr-toolbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; } .pr-toolbar .field { margin-bottom: 0; } .pr-range { font-weight: 600; } .pr-person { margin-bottom: 1.5rem; } details.pr-person > summary.pr-person-head { cursor: pointer; user-select: none; list-style: none; } details.pr-person > summary.pr-person-head::-webkit-details-marker { display: none; } details.pr-person > summary.pr-person-head::marker { content: none; } .pr-person-title { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; } .pr-person-chevron { flex: 0 0 auto; width: 1rem; font-size: 1.05rem; line-height: 1; color: var(--color-heading); } .pr-person-chevron::before { content: "▸"; } details.pr-person[open] > summary .pr-person-chevron::before { content: "▾"; } .pr-person-head h2 { margin: 0; flex: 1 1 auto; } .pr-person-head .pr-totals { margin-top: 0.15rem; } .pr-perdiem-office { font-size: 0.85rem; margin-top: 0.25rem; } .pr-perdiem-edit { margin-top: 0.45rem; } .pr-perdiem-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; } .pr-person-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.45rem; } .pr-flag-address { font-weight: 600; font-size: 0.85rem; color: var(--color-text-muted); } .pr-sheet-open { border-left: 3px solid var(--color-accent); } .pr-sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; } .pr-sheet-day { font-weight: 700; color: var(--color-heading); } .pr-sheet-who { margin-left: auto; font-weight: 700; color: var(--color-heading); text-align: right; } .pr-sheet-flags { font-weight: 700; color: var(--color-accent); letter-spacing: 0.02em; } /* Payroll: all-at-once in/safety/out/submit within StackedPunches::kMaxSpanMinutes */ .pr-sheet-stacked { border-left: 3px solid var(--color-warning, #c9a227); } .pr-badge-stacked { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--color-warning-ink, #5c4a00); background: var(--color-warning-bg, #fff3bf); border: 1px solid var(--color-warning, #c9a227); border-radius: var(--radius-sm); padding: 0.15rem 0.45rem; } .pr-times, .pr-geo-row, .pr-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; margin: 0.35rem 0; } .pr-totals { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); font-weight: 600; font-variant-numeric: tabular-nums; padding: 0.35rem 0.5rem; background: var(--color-bg-subtle); border-radius: var(--radius-sm); } .pr-totals-free-high { border: 1px solid var(--color-accent); background: var(--color-accent-light); } .pr-src-times { font-size: 0.85rem; margin-bottom: 0.35rem; } .pr-claim { margin: 0.35rem 0; padding-left: 0.5rem; border-left: 2px solid var(--color-border); } .pr-claim-title { font-weight: 600; } .pr-claim-notes { font-size: 0.9rem; margin-top: 0.15rem; white-space: pre-wrap; } .pr-notes { white-space: pre-wrap; word-break: break-word; margin: 0.35rem 0 0.75rem; padding: 0.5rem 0.65rem; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; } .pr-event { font-size: 0.85rem; margin: 0.2rem 0; } .pr-week-label { font-weight: 700; margin-bottom: 0.35rem; } .pr-grand { margin-top: 1rem; } @media (max-width: 40rem) { .pr-times, .pr-geo-row, .pr-totals { grid-template-columns: 1fr; } } /* ---------- Messages (mod=message + shell #msg-alert) ---------- */ .msg-alert-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; border-color: var(--color-accent); color: var(--color-heading); background: var(--color-accent-light); } /* Phones: keep envelope + count; hide "New message(s)" so Account stays on the row. */ @media (max-width: 30rem) { .msg-alert-btn { position: relative; padding-inline: 0.65rem; } .msg-alert-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } .msg-alert-btn .msg-alert-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.8rem; font-variant-numeric: tabular-nums; background: var(--color-accent); color: var(--color-on-accent, #fff); } .msg-alert-pulse { animation: msg-alert-pulse 1.4s ease-in-out infinite; } @keyframes msg-alert-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); } 50% { box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--color-accent) 0%, transparent); } } .msg-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .msg-head-row h1 { margin: 0; } .msg-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem; align-items: start; padding: 0.65rem 0; border-bottom: 1px solid var(--color-border); } .msg-row-attention { border-left: 3px solid var(--color-accent); padding-left: 0.65rem; background: var(--color-accent-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0.35rem 0; padding-top: 0.65rem; padding-bottom: 0.65rem; } .msg-row-from { font-size: 0.85rem; color: var(--color-text-muted, var(--color-text)); opacity: 0.9; } .msg-row-title { font-weight: 700; color: var(--color-heading); } .msg-row-preview { font-size: 0.9rem; margin-top: 0.15rem; } .msg-row-when { font-size: 0.8rem; margin-top: 0.2rem; } .msg-detail-from { font-weight: 600; } .msg-badge { display: inline-block; margin: 0.35rem 0; padding: 0.15rem 0.5rem; font-size: 0.75rem; font-weight: 700; border-radius: var(--radius-sm); background: var(--color-accent-light); color: var(--color-accent); } .msg-body { white-space: pre-wrap; word-break: break-word; margin: 0.75rem 0; padding: 0.75rem; background: var(--color-bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-family: inherit; font-size: 0.95rem; } .msg-error { color: var(--color-accent); font-weight: 600; margin-bottom: 0.75rem; } .msg-recipient-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.35rem 0.75rem; margin: 0.5rem 0 1rem; max-height: 16rem; overflow: auto; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-subtle); } .msg-recipient { min-width: 0; } .msg-recipient .field { margin-bottom: 0; } .msg-recipients-label { font-weight: 600; margin-top: 0.75rem; } /* ---------- Timekeeping geolocation (JS/geo.js + GeoUi) ---------- */ .geo-notice { margin-top: 0.75rem; } .geo-notice ul, .geo-consent-list { margin: 0.5rem 0 0.75rem 1.25rem; padding: 0; } .geo-tools { margin: 0.75rem 0; } .geo-status { font-size: 0.9rem; margin-bottom: 0.75rem; min-height: 1.25em; } .geo-status-ok { color: var(--color-heading); font-weight: 600; } .geo-status-bad, .geo-help-error { color: var(--color-accent); font-weight: 600; } .geo-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.55); } .geo-panel { max-width: 28rem; width: 100%; max-height: 90vh; overflow: auto; } .geo-panel-actions { margin-top: 1rem; } .geo-help { margin-bottom: 1rem; } .geo-help-steps { margin: 0.5rem 0 0.75rem 1.25rem; padding: 0; text-align: left; } .geo-help-steps li { margin-bottom: 0.5rem; } /* --- toast.css --- */ /* ============================================ toast.css — 2027.js maketoast() ============================================ */ .toast { position: fixed; top: 20px; right: 20px; z-index: var(--z-toast, 1000); max-width: 300px; padding: 15px 20px; color: var(--color-toast-fg, #fff); background-color: var(--color-toast-bg, #333); border-radius: var(--radius-md, 5px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); font-family: var(--font-sans, system-ui, sans-serif); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .toast.show { opacity: 1; transform: translateY(0); }