/* Firmdesk's stylesheet. No build step: this file is what the browser gets. 1. Tokens the values everything else is made of: colour, type, space, radius, shadow 2. Base the page, links, headings 3. App shell sidebar, phone top bar, menus 4. Pages one section per part of the app (deadlines, tasks, time, billing, portal...) 5. Components buttons, fields, tables, badges, tabs, page headers, filters, search Colours come from tokens only, so the light and dark themes are each a list of values. The theme follows the computer's setting unless someone picks one (the user menu; kept in this browser): . */ @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-ext-wght-normal.1ad231aac0a8.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- 1. Tokens ---------------------------------------------------------------------------------------- */ :root { color-scheme: light; /* Space: a 4px scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Type */ --font: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* Shape */ --radius-sm: 4px; --radius-md: 6px; --radius: 8px; --radius-lg: 12px; --radius-full: 999px; --control-height: 34px; --touch-target: 44px; /* Surfaces and text */ --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f9fafb; --surface-3: #f1f3f6; --text: #182230; --text-2: #344054; --muted: #5d6b82; --border: #e4e7ec; --border-strong: #cfd4dc; --control-off: #c3c8d0; /* Brand and links */ --primary: #2458d6; --primary-hover: #1c47b0; --primary-soft: #e8effd; --on-primary: #ffffff; --link: #2458d6; --focus-ring: rgba(36, 88, 214, 0.32); /* Status: what the colour means, the same everywhere */ --danger: #c93434; /* overdue, errors, destructive */ --danger-solid: #c93434; --danger-bg: #fdecec; --danger-border: #f1b5b5; --warning: #d98a1c; /* due soon, needs a look */ --warning-text: #8f4d00; --warning-bg: #fdf0dc; --warning-bg-soft: #fffaf2; --warning-border: #d98a1c; --warning-border-soft: #f0cf9b; --success: #1d8a52; /* done, paid, approved */ --success-text: #1d6b3f; --success-bg: #e8f6ee; --success-border: #a8dbbd; --info-text: #2458d6; /* in progress, new */ --info-bg: #e7eefc; --info-border: #b9ccf5; --purple: #8a5cf6; /* waiting on the client, meetings */ --purple-text: #6d3fd6; --purple-bg: #efe9fe; --error-bg: var(--danger-bg); --status-overdue: var(--danger); --status-soon: var(--warning); --status-waiting: var(--purple); --status-progress: var(--primary); --status-done: var(--success); /* The sidebar keeps its own dark surface in both themes */ --sidebar-bg: #131c2b; --sidebar-text: #b9c3d3; --sidebar-heading: #8492a8; --sidebar-active: #22304a; --sidebar-hover: #1b2740; --sidebar-border: rgba(255, 255, 255, 0.08); /* Depth */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.12); --shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.18); --backdrop: rgba(16, 22, 32, 0.45); /* Charts */ --series-1: #2a78d6; --series-2: #eb6834; --chart-grid: #eceef1; --chart-base: #c3c8d0; } /* The dark theme, chosen in the user menu. The same list follows for computers set to dark. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --surface: #161a21; --surface-2: #1b2029; --surface-3: #232935; --text: #e6e9ee; --text-2: #c9cfd9; --muted: #98a2b3; --border: #2a303b; --border-strong: #3d4554; --control-off: #3a4452; --primary: #2f5fd6; --primary-hover: #3b6ae0; --primary-soft: #1a2744; --link: #8fb0ff; --focus-ring: rgba(143, 176, 255, 0.4); --danger: #ef6464; --danger-solid: #c93434; --danger-bg: #3a1c1c; --danger-border: #6b2c2c; --warning: #e0a040; --warning-text: #f3c27a; --warning-bg: #3a2a14; --warning-bg-soft: #241c10; --warning-border: #a86a14; --warning-border-soft: #5a4220; --success: #4cc38a; --success-text: #8fd9ad; --success-bg: #173324; --success-border: #2a5a40; --info-text: #9bb8f5; --info-bg: #1c2a47; --info-border: #2c3f66; --purple: #a78bfa; --purple-text: #c4b0fb; --purple-bg: #2a2145; --sidebar-bg: #0a0d12; --sidebar-active: #1c2638; --sidebar-hover: #141b28; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6); --backdrop: rgba(0, 0, 0, 0.6); --series-1: #3987e5; --series-2: #d95926; --chart-grid: #262e3a; --chart-base: #3a4452; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1116; --surface: #161a21; --surface-2: #1b2029; --surface-3: #232935; --text: #e6e9ee; --text-2: #c9cfd9; --muted: #98a2b3; --border: #2a303b; --border-strong: #3d4554; --control-off: #3a4452; --primary: #2f5fd6; --primary-hover: #3b6ae0; --primary-soft: #1a2744; --link: #8fb0ff; --focus-ring: rgba(143, 176, 255, 0.4); --danger: #ef6464; --danger-solid: #c93434; --danger-bg: #3a1c1c; --danger-border: #6b2c2c; --warning: #e0a040; --warning-text: #f3c27a; --warning-bg: #3a2a14; --warning-bg-soft: #241c10; --warning-border: #a86a14; --warning-border-soft: #5a4220; --success: #4cc38a; --success-text: #8fd9ad; --success-bg: #173324; --success-border: #2a5a40; --info-text: #9bb8f5; --info-bg: #1c2a47; --info-border: #2c3f66; --purple: #a78bfa; --purple-text: #c4b0fb; --purple-bg: #2a2145; --sidebar-bg: #0a0d12; --sidebar-active: #1c2638; --sidebar-hover: #141b28; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6); --backdrop: rgba(0, 0, 0, 0.6); --series-1: #3987e5; --series-2: #d95926; --chart-grid: #262e3a; --chart-base: #3a4452; } } /* --- 2. Base ------------------------------------------------------------------------------------------ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: var(--text-base)/1.5 var(--font); font-feature-settings: "cv11", "ss01"; /* Inter: single-storey a, open digits */ background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { color: var(--text); letter-spacing: -0.011em; } h1 { font-size: var(--text-2xl); font-weight: 650; line-height: 1.25; margin: 0; } h2 { font-size: var(--text-lg); font-weight: 600; margin: 0 0 12px; } h3 { font-size: var(--text-md); font-weight: 600; margin: 20px 0 8px; } strong, b { font-weight: 600; } code { font-family: var(--font-mono); font-size: 0.92em; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } ::selection { background: var(--primary-soft); } /* --- 3. App shell: sidebar (a slide-in drawer below 900px), phone top bar, main content ------------------- */ .layout { display: flex; min-height: 100vh; } .content { flex: 1; min-width: 0; padding: 28px 36px 48px; max-width: 1240px; } .content:focus { outline: none; } /* focused by the skip link */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: var(--radius-md); background: #1c47b0; color: #fff; } .skip-link:focus { top: 12px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: inherit; cursor: pointer; } .icon-button:hover { background: rgba(127, 137, 150, 0.16); } .icon-button .icon { width: 20px; height: 20px; } .sidebar .icon-button:hover, .topbar .icon-button:hover { background: rgba(255, 255, 255, 0.1); } .sidebar { width: 244px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 10px; background: var(--sidebar-bg); color: var(--sidebar-text); font-size: var(--text-sm); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .sidebar-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 0 0 8px; } .brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 650; font-size: 1.05rem; letter-spacing: -0.015em; } .brand:hover { text-decoration: none; } .brand-mark { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; } .sidebar-close, .sidebar-toggle { display: none; } /* Wider screens: the menu button beside the brand hides the sidebar down to a strip that keeps just that button (static/js/app.js; base.html's script brings the choice back on every page). */ @media (min-width: 900px) { .js .sidebar-toggle { display: inline-flex; } /* Collapsed: a rail of icons (each link keeps its name as a tooltip), without the names and headings. */ .sidebar-hidden .sidebar { width: 64px; padding-left: 10px; padding-right: 10px; } .sidebar-hidden .brand, .sidebar-hidden .nav a > span, .sidebar-hidden .nav-heading, .sidebar-hidden .menu-button-text, .sidebar-hidden .menu-button .chevron, .sidebar-hidden .search-button span, .sidebar-hidden .search-button kbd { display: none; } .sidebar-hidden .sidebar-top { padding: 0; justify-content: center; } .sidebar-hidden .nav a, .sidebar-hidden .menu-button, .sidebar-hidden .search-button { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar-hidden .nav-group + .nav-group { border-top: 1px solid var(--sidebar-border); padding-top: 8px; } .sidebar-hidden .menu-panel { left: 0; right: auto; min-width: 240px; } } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: var(--radius-md); color: var(--sidebar-text); font-weight: 500; } .nav a .icon { width: 17px; height: 17px; opacity: 0.85; } .nav a:hover { background: var(--sidebar-hover); text-decoration: none; color: #fff; } .nav a.active { background: var(--sidebar-active); color: #fff; font-weight: 600; } .nav a.active .icon { opacity: 1; color: #8fb0ff; } .nav a:focus-visible, .menu-button:focus-visible, .search-button:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 1px; } .sidebar .nav { flex: 1; gap: 16px; margin-top: 4px; } .nav-group { display: flex; flex-direction: column; gap: 1px; } .nav-heading { padding: 0 10px 5px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sidebar-heading); } .nav-bottom { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sidebar-border); } /* Search: a button that looks like a field; it opens the search box (Ctrl+K) */ .search-button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 6px 10px; margin: 2px 0 4px; border: 1px solid var(--sidebar-border); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); color: var(--sidebar-text); font: inherit; text-align: left; cursor: pointer; } .search-button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; } .search-button .icon { width: 16px; height: 16px; } .search-button span { flex: 1; } .search-button kbd, .kbd { padding: 1px 6px; border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.06); font: 500 0.6875rem/1.5 var(--font); color: var(--sidebar-heading); } /* Menu panels:
(static/js/app.js closes them on an outside click or Escape) */ .menu { position: relative; } .menu > summary { list-style: none; } .menu > summary::-webkit-details-marker { display: none; } .menu-button { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-md); cursor: pointer; color: #fff; } .menu-button:hover, .menu[open] > .menu-button { background: var(--sidebar-hover); } .menu-button-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .menu-button .chevron { width: 15px; height: 15px; opacity: 0.6; transition: transform 0.15s; } .menu[open] > .menu-button .chevron { transform: rotate(180deg); } .sidebar-workspace-name, .user-name, .user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-workspace-name { font-weight: 600; font-size: var(--text-base); } .user-name { font-weight: 600; } .user-email { font-size: var(--text-xs); color: var(--sidebar-heading); } .workspace-mark { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; background: var(--primary); color: #fff; font-weight: 700; font-size: var(--text-sm); object-fit: contain; } img.workspace-mark { background: #fff; padding: 2px; } .avatar { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #334463; color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; } .menu-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); font-size: var(--text-base); } .user-menu .menu-panel { top: auto; bottom: calc(100% + 4px); } .menu form { margin: 0; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; } .menu-item:hover { background: var(--surface-3); text-decoration: none; } .menu-item:focus-visible { background: var(--surface-3); outline: 2px solid var(--primary); outline-offset: -2px; } .menu-item .icon { width: 16px; height: 16px; color: var(--muted); } .menu-item.is-current { font-weight: 600; cursor: default; } .menu-item.is-current:hover { background: none; } .menu-item.is-current .icon { color: var(--primary); } .menu-item.is-danger, .menu-item.is-danger .icon { color: var(--danger); } .menu-item.is-danger:hover { background: var(--danger-bg); } .menu-heading { padding: 8px 10px 4px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .menu-divider { height: 1px; margin: 5px 4px; background: var(--border); } .workspace-menu { margin-bottom: 2px; } .user-menu { margin-top: auto; } /* at the bottom even when there's no nav (no workspace yet) */ .help-menu { margin-top: auto; } /* then Help is the first thing at the bottom, the user menu under it */ .help-menu + .user-menu { margin-top: 0; } .help-menu .menu-panel { top: auto; bottom: calc(100% + 4px); } .help-menu .menu-button { color: var(--sidebar-text); font-weight: 500; } .help-menu .menu-button > .icon { width: 17px; height: 17px; opacity: 0.85; } .help-menu .menu-item { white-space: normal; } /* Theme: system, light or dark (static/js/app.js) */ .theme-switch { display: flex; gap: 2px; margin: 2px 4px 4px; padding: 2px; border-radius: var(--radius-md); background: var(--surface-3); } .theme-switch button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 3px 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font: 500 var(--text-xs)/1 var(--font); cursor: pointer; } .theme-switch button .icon { width: 14px; height: 14px; } .theme-switch button:hover { color: var(--text); } .theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); } .no-js .theme-switch { display: none; } .topbar, .nav-backdrop { display: none; } .nav-backdrop { cursor: pointer; } /* iOS only sends taps on clickable-looking elements */ @media (max-width: 899px) { .layout { flex-direction: column; } .content { padding: 20px 16px 40px; } .nav a, .menu-item { min-height: var(--touch-target); } /* a finger's width */ .sidebar { font-size: var(--text-base); } /* Without JS the sidebar is a block at the top of the page. */ .no-js .sidebar { position: static; width: auto; height: auto; overflow: visible; } .no-js .nav { flex-direction: row; flex-wrap: wrap; } .no-js .nav-bottom { margin: 0; padding: 0; border: 0; } .no-js .user-menu, .no-js .help-menu { margin-top: 0; } /* With JS it's a drawer, opened from the top bar. */ .js .topbar { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 8px; background: var(--sidebar-bg); color: #fff; } .topbar .icon-button { width: var(--touch-target); height: var(--touch-target); } .topbar-brand { color: #fff; font-weight: 650; font-size: 1.05rem; } .topbar-brand:hover { text-decoration: none; } .topbar-workspace { margin-left: auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--sidebar-text); } .js .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(300px, 86vw); height: auto; transform: translateX(-100%); visibility: hidden; box-shadow: 0 0 40px rgba(0, 0, 0, 0.3); } .js.nav-open .sidebar { transform: none; visibility: visible; } /* Slide only while opening or closing (app.js sets nav-animate), not when the layout changes. */ .js.nav-animate .sidebar { transition: transform 0.2s ease, visibility 0s linear 0.2s; } .js.nav-animate.nav-open .sidebar { transition: transform 0.2s ease; } .js .sidebar-close { display: inline-flex; } .js.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10, 15, 25, 0.5); } .js { scroll-padding-top: 64px; } /* links to #sections land below the sticky top bar */ .js.nav-open body { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .sidebar, .menu-button .chevron { transition: none !important; } * { scroll-behavior: auto !important; } } /* --- 4. Pages ----------------------------------------------------------------------------------------- */ /* Deadlines (the tracker) */ .content.wide { max-width: none; } .tracker-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; } .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); } .segmented a { padding: 6px 14px; color: var(--text); font-size: 0.9rem; } .segmented a + a { border-left: 1px solid var(--border); } .segmented a:hover { text-decoration: none; background: var(--bg); } .segmented a.active { background: var(--primary); color: #fff; } .tracker-nav { display: flex; gap: 6px; align-items: center; } .tracker-nav .btn.active { border-color: var(--primary); color: var(--link); } .range-label { margin-left: 6px; font-weight: 600; } .tracker-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .tracker-filters input[type="search"] { min-width: 200px; } @media (max-width: 720px) { /* two filters per row */ .tracker-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tracker-filters input[type="search"] { grid-column: 1 / -1; min-width: 0; } .tracker-filters select { width: 100%; min-width: 0; } } .check { display: inline-flex; gap: 6px; align-items: center; font-size: 0.9rem; white-space: nowrap; } .count { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--border); color: var(--muted); font-size: 0.75rem; text-align: center; font-weight: 600; } .board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; } @media (max-width: 720px) { /* one column at a time, swiped */ .board { grid-auto-columns: 86%; scroll-snap-type: x mandatory; } .board-column { scroll-snap-align: start; } } .board-column { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .board-column.overdue { border-color: var(--danger); } .board-column.overdue .column-title { color: var(--danger); } .board-column.current { border-color: var(--primary); } .column-header { padding: 10px 12px; border-bottom: 1px solid var(--border); } .column-title { font-weight: 600; } .column-sub { font-size: 0.8rem; color: var(--muted); } .column-items { padding: 8px; display: flex; flex-direction: column; gap: 8px; } .column-empty { margin: 4px; } .deadline-card { border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px; padding: 8px 10px; background: var(--bg); font-size: 0.88rem; } .deadline-card.statutory { border-left-color: var(--danger); } .deadline-card.contractual { border-left-color: var(--primary); } .deadline-card.meeting { border-left-color: var(--purple); } .client-handled { opacity: 0.55; } .is-done .card-title { text-decoration: line-through; } .card-date { font-size: 0.8rem; font-weight: 600; } .card-entity { display: block; font-weight: 600; margin-top: 2px; } .card-title { margin: 2px 0 6px; } .card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .card-actions { display: flex; gap: 6px; } .overdue-text { color: var(--danger); font-weight: 600; } /* Tags: what a tracker item is */ .tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; } .badge.badge-filing { background: var(--error-bg); color: var(--danger); } .badge.badge-payment { background: var(--warning-bg); color: var(--warning-text); } .badge.badge-contractual { background: var(--info-bg); color: var(--info-text); } .badge.badge-meeting { background: var(--purple-bg); color: var(--purple-text); } .group-row th { background: var(--bg); color: var(--text); text-transform: none; letter-spacing: 0; font-size: 0.9rem; } .group-row.overdue th { color: var(--danger); } .group-row.current th { color: var(--link); } .tracker-table tr.statutory td:first-child { box-shadow: inset 3px 0 0 var(--danger); } .tracker-table tr.contractual td:first-child { box-shadow: inset 3px 0 0 var(--primary); } .tracker-table tr.meeting td:first-child { box-shadow: inset 3px 0 0 var(--purple); } /* Tasks */ .tick { width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--surface); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; flex-shrink: 0; } .tick:hover { border-color: var(--primary); } .tick.done { background: var(--primary); border-color: var(--primary); } .task-progress { margin: 4px 0 6px; font-size: 0.85rem; } .progress-line { display: inline-flex; align-items: center; gap: 6px; } .task-progress progress, .progress-line progress { width: 70px; height: 6px; accent-color: var(--primary); } .next-task { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; } .next-task-title { flex: 1; min-width: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .success-text { color: var(--success-text); font-weight: 600; } .deadline-card.task { border-left-style: dashed; border-left-color: var(--muted); } .card-for { margin: -4px 0 6px; } .badge.badge-task { background: var(--bg); color: var(--muted); border: 1px solid var(--border); } .who { display: inline-flex; gap: 3px; flex-wrap: wrap; } .who-chip { display: inline-block; min-width: 1.9em; padding: 1px 5px; border-radius: 999px; text-align: center; background: var(--border); color: var(--text); font-size: 0.72rem; font-weight: 700; } .task-table td { vertical-align: top; } .tick-cell { width: 28px; } .task-row.is-done .task-title { text-decoration: line-through; color: var(--muted); } .task-row.skipped { opacity: 0.55; } a.task-title { font-weight: 600; color: var(--text); } a.task-title:hover { color: var(--link); } .task-for { margin-top: 2px; } .link-action { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--muted); cursor: pointer; } .link-action:hover { color: var(--text); text-decoration: underline; } .later-tasks { margin-top: 8px; } .later-tasks summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; margin: 8px 0; } .card > details > table th:first-child, .card > details > table td:first-child { padding-left: 0; } .card > details > table th:last-child, .card > details > table td:last-child { padding-right: 0; } /* My work */ .work-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 16px; } .work-filters input[type="search"] { flex: 1; min-width: 200px; } .filter-group { display: inline-flex; align-items: center; gap: 8px; } .filter-label { font-size: 0.85rem; color: var(--muted); white-space: nowrap; } .segmented a { white-space: nowrap; } /* Radio segmented controls (My work filters): the radio is hidden, its label is the button. */ .segmented label { position: relative; padding: 6px 14px; font-size: 0.9rem; cursor: pointer; white-space: nowrap; } .segmented label + label { border-left: 1px solid var(--border); } .segmented label:hover { background: var(--bg); } .segmented label.active, .segmented label:has(input:checked) { background: var(--primary); color: #fff; } .segmented label:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: -4px; } .segmented input[type="radio"] { position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none; } .segmented .count { margin-left: 2px; } .segmented .active .count, .segmented label:has(input:checked) .count { background: rgba(255, 255, 255, 0.25); color: #fff; } .work-list .task-table td { padding-top: 12px; padding-bottom: 12px; } .work-list .task-main { min-width: 200px; } .work-list .task-for-cell { min-width: 180px; } .empty-state p { margin: 0; } .more-later { margin: -8px 0 20px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); } .filter-group { flex-wrap: wrap; } @media (max-width: 720px) { .segmented a, .segmented label { padding: 6px 10px; } } @media (max-width: 360px) { .segmented a, .segmented label { padding: 6px 8px; } } /* A narrow task list (tasks/_task_row.html rows in a .task-list inside a .task-list-box) shows each task as a small card: phones, and small laptops where the sidebar takes room. */ .task-list-box { container: task-list / inline-size; } @container task-list (max-width: 760px) { .task-list, .task-list tbody { display: block; } .task-list tr.group-row, .task-list tr.group-row th { display: block; } .task-list tr.task-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--border); } table.task-list tr.task-row > td { padding: 0; border: 0; } /* beats .table-wrap's first/last-cell padding */ .task-list .tick-cell { grid-row: 1 / 4; width: auto; } .task-list .task-main { grid-column: 2; min-width: 0; } .task-list .who-cell { grid-column: 3; grid-row: 1; } .task-list .task-for-cell { grid-column: 2 / 4; min-width: 0; } .task-list .due-cell { grid-column: 2; white-space: normal; } /* beside the timer and Not needed buttons */ .task-list .due-cell div { display: inline; } .task-list .due-cell div::before { content: " · "; } .task-list .actions-cell { grid-column: 3; } .card:not(.table-wrap) > .task-list tr.task-row, .card > details > .task-list tr.task-row { padding-left: 0; padding-right: 0; } /* the card pads it */ } /* Time: the timer bar (on every page while a timer runs), timer buttons, the timesheet and the report */ #timer-bar { position: sticky; top: 0; z-index: 25; } #timer-bar:has(.timer-bar) { margin-top: -8px; padding-top: 8px; background: var(--bg); } /* nothing shows through above it */ @media (max-width: 899px) { .js #timer-bar { top: 56px; } } /* below the phone top bar */ .timer-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 8px 12px; border: 1px solid var(--primary); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); font-size: 0.92rem; } .timer-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--danger); animation: timer-pulse 1.6s ease-in-out infinite; } @keyframes timer-pulse { 50% { opacity: 0.3; } } .timer-clock { font-weight: 700; font-variant-numeric: tabular-nums; } .timer-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .timer-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } @media (prefers-reduced-motion: reduce) { .timer-dot { animation: none; } } .icon.icon-fill { fill: currentColor; stroke: none; } .timer-toggle { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; vertical-align: middle; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; } .timer-toggle .icon { width: 11px; height: 11px; } .timer-toggle:not(.is-running) .icon { margin-left: 2px; } /* the triangle looks centred */ .timer-toggle:hover { color: var(--link); border-color: var(--primary); } .timer-toggle.is-running { background: var(--danger); border-color: var(--danger); color: #fff; } .timer-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .actions-cell .timer-toggle { margin-right: 10px; } .time-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; } .time-totals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-bottom: 8px; } .time-totals a { margin-left: auto; font-size: 0.9rem; } /* Week grid: hours per client (rows) and day (columns); the client column stays put while a phone scrolls the days. */ .week-grid th, .week-grid td { padding: 9px 10px; } .week-grid thead th { text-align: right; white-space: nowrap; } .week-grid thead th:first-child { text-align: left; } .week-grid abbr { text-decoration: none; } .week-grid th[scope="row"] { min-width: 170px; text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 600; color: var(--text); } .week-grid th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); } .week-grid .today { background: rgba(59, 106, 224, 0.08); } .week-grid thead .today { color: var(--link); } .week-grid .total { font-weight: 700; } .week-grid tfoot th, .week-grid tfoot td { border-top: 2px solid var(--border); font-weight: 700; } @media (max-width: 560px) { /* more room for the days */ .week-grid th[scope="row"] { min-width: 110px; max-width: 150px; font-size: 0.85rem; } .week-grid th, .week-grid td { padding: 8px; } } /* Entries by day (timesheet), and on a client's or task's page */ .day-list { padding-top: 6px; padding-bottom: 6px; } .day + .day { border-top: 1px solid var(--border); } .day-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 0; } .day-title { margin: 0; font-size: 0.98rem; } .day-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .entry-list { list-style: none; margin: 0 0 6px; padding: 0; } .entry { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--border); } .entry-hours { flex: 0 0 3.2rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .entry-main { flex: 1; min-width: 0; overflow-wrap: anywhere; } .entry-main .badge { margin-left: 4px; } .entry-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Report */ .report-filters .report-dates { display: none; } .report-filters:has(select[name="period"] option[value="custom"]:checked) .report-dates { display: inline-flex; } .report-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 600; color: var(--text); } .report-table .report-subline th[scope="row"] { padding-left: 36px; font-weight: normal; color: var(--muted); } .report-subline td { color: var(--muted); } .report-table tfoot th, .report-table tfoot td { border-top: 2px solid var(--border); font-weight: 700; } /* Typing hours into the week grid. The table scrolls sideways on its own, above the grid's buttons. */ .card.week-grid-card { overflow: visible; } /* beats .table-wrap's */ .grid-scroll { overflow-x: auto; border-radius: var(--radius) var(--radius) 0 0; } .week-grid td:has(.hours-input) { padding-left: 4px; padding-right: 4px; } .hours-input { width: 4.2em; padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; border-color: transparent; background: var(--bg); } .hours-input:hover { border-color: var(--border); } .hours-input:focus { background: var(--surface); } .week-grid td.has-error .hours-input { border-color: var(--danger); background: var(--error-bg); } .cell-error { display: block; max-width: 7em; margin-top: 2px; margin-left: auto; font-size: 0.72rem; line-height: 1.2; color: var(--danger); white-space: normal; } .cell-fixed { cursor: help; border-bottom: 1px dotted var(--muted); } .grid-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 20px; border-top: 1px solid var(--border); } .grid-add { flex-wrap: wrap; } .grid-add select { max-width: 280px; } .grid-dirty { display: none; color: var(--warning-text); font-weight: 600; } .week-grid-card.is-dirty .grid-dirty { display: inline; } /* Where the week's timesheet stands (not submitted, submitted, approved, returned) */ .week-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .week-status-text { margin: 0; flex: 1; min-width: 220px; } .week-status.is-submitted { border-color: var(--primary); } .week-status.is-approved { border-color: var(--success-text); background: var(--success-bg); } .week-status.is-returned { border-color: var(--warning-border); background: var(--warning-bg); } .return-week > summary { list-style: none; } .return-week > summary::-webkit-details-marker { display: none; } /* Opened, "Return…" takes a line of its own for the note (a popover would run off a phone's screen). */ .week-status .actions:has(.return-week[open]), .return-week[open] { flex-basis: 100%; } .return-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .return-form input { flex: 1; min-width: 180px; } .form-notice { padding: 10px 14px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); } fieldset.form-grid { border: 0; padding: 0; margin: 0; min-width: 0; } .badge.badge-billed { background: var(--success-bg); color: var(--success-text); } .badge.badge-returned { background: var(--warning-bg); color: var(--warning-text); } .unrated { margin-left: 2px; color: var(--warning-text); cursor: help; } .table-card-heading { margin: 0; padding: 16px 20px 4px; } .table-card-empty { margin: 0; padding: 8px 20px 20px; } /* Log time form: "Non-billable" only means something for client time. */ .time-form:has(select[name="time-entity"] option[value=""]:checked) .field-non-billable { display: none; } .field-non-billable { column-gap: 12px; } .actions .push-right { margin-left: auto; } /* Modal dialog (static/js/app.js) */ .modal { padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--shadow-lg); } .modal::backdrop { background: var(--backdrop); } .modal-card { padding: 20px 24px 24px; } .modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .modal-header h2 { margin: 0; font-size: 1.2rem; } .modal-close { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 8px; border-radius: 6px; } .modal-close:hover { background: var(--bg); color: var(--text); } /* Task form: two columns, the client/engagement/deadline block re-rendered when it changes */ .task-form { max-width: none; } .form-grid, .task-links, .time-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; } .form-grid .span-2 { grid-column: span 2; } .task-links noscript, .time-links noscript { grid-column: 1 / -1; } /* the no-JS hint spans however many columns there are */ .task-page-form { max-width: 680px; } @media (max-width: 560px) { .form-grid, .task-links, .time-links { grid-template-columns: minmax(0, 1fr); } .form-grid .span-2 { grid-column: auto; } } .missing-steps { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; } .progress-cell { min-width: 160px; } .checklist { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0 16px; } .checklist legend { font-weight: 700; padding: 0 6px; } .checklist-table th, .checklist-table td { padding: 6px 6px; } .checklist-table input[type="text"] { width: 100%; min-width: 180px; } .checklist-table .days input { width: 5rem; } .checklist-table select { max-width: 220px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .checklist { min-width: 0; } /* a fieldset otherwise grows to fit its table */ .checklist-rows { container: checklist / inline-size; overflow-x: auto; } @media (min-width: 721px) { .sr-only-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* A narrow checklist (phones, small laptops) shows each step as a stack of labelled fields. */ @container checklist (max-width: 840px) { .checklist-table thead { display: none; } .checklist-table, .checklist-table tbody, .checklist-table tr, .checklist-table td { display: block; } .checklist-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); } .checklist-table tbody tr:last-child { border-bottom: 0; } .checklist-table td, .card > .checklist-table td:first-child { padding: 4px 0; border: 0; text-align: left; } .checklist-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.8rem; font-weight: 600; color: var(--muted); } .checklist-table input[type="text"], .checklist-table select { width: 100%; max-width: none; min-width: 0; } } /* Workspace picker */ .workspace-list { list-style: none; margin: 16px 0 0; padding: 0; max-width: 640px; } .workspace-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 16px 20px; } .workspace-card.current { border-color: var(--primary); } .workspace-name { font-weight: 600; font-size: 1.05rem; } .workspace-info { flex: 1; min-width: 0; } .workspace-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--border); padding: 3px; } /* Firm logo */ .logo-preview { margin-bottom: 12px; } .logo-preview img { max-width: 220px; max-height: 90px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; padding: 8px; background: #fff; } /* Settings pages */ .settings-form { max-width: 680px; } .settings-form.engagement-page { max-width: 960px; } .engagement-page .form { max-width: none; } .engagement-page .form > .field { max-width: 600px; } .settings-form .card { scroll-margin-top: 16px; } .item-list { list-style: none; margin: 0 0 8px; padding: 0; } .item-list .item { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); } .item-list .item:last-child { border-bottom: 0; } .item-title { font-weight: 600; } .item-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .logo-grid .item { flex-direction: column; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } .logo-grid .item:last-child { border-bottom: 1px solid var(--border); } .logo-grid .item.is-default { border-color: var(--primary); } .logo-grid .item-actions { justify-content: flex-start; } .logo-thumb { width: 100%; height: 80px; object-fit: contain; background: #fff; border-radius: 6px; } /* Settings: a menu panel beside the section being edited (a row of chips on smaller screens) */ .settings-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; } .settings-menu { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .settings-menu-group { display: flex; flex-direction: column; gap: 2px; } .settings-menu-heading { padding: 4px 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .settings-menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 0.93rem; } .settings-menu a .icon { width: 16px; height: 16px; color: var(--muted); } .settings-menu a:hover { background: var(--bg); text-decoration: none; } .settings-menu a.active { background: var(--info-bg); color: var(--info-text); font-weight: 600; } .settings-menu a.active .icon { color: var(--info-text); } .settings-body { min-width: 0; max-width: 720px; } .settings-body > h2 { font-size: 1.25rem; margin-bottom: 4px; } .settings-body > .section-intro { margin: 0 0 16px; } .settings-body .form { max-width: none; } /* as wide as the list cards */ .card-heading { margin: 0 0 12px; font-size: 1rem; } .item-with-icon { display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .item-with-icon > .icon { margin-top: 3px; color: var(--muted); } @media (max-width: 1099px) { .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } .settings-menu { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; background: none; } .settings-menu-group { flex-direction: row; flex-wrap: wrap; gap: 6px; } .settings-menu-heading { display: none; } .settings-menu a { white-space: nowrap; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .settings-menu a.active { border-color: var(--primary); } } /* Sign-in and invite pages */ .auth-page { max-width: 420px; margin: 9vh auto 40px; padding: 0 16px; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; } .auth-brand img { border-radius: 9px; } .auth-card { padding: 28px; box-shadow: var(--shadow-sm); } .auth-card h1 { font-size: var(--text-xl); margin-bottom: 16px; } .auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 16px; font-size: var(--text-sm); color: var(--muted); } .auth-links a { color: var(--muted); } .auth-card .form { max-width: none; } .btn-block { width: 100%; } .card.notice { border-color: var(--primary); } .invite-link { display: flex; gap: 8px; margin-top: 8px; } .invite-link input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; } /* --- 5. Components ------------------------------------------------------------------------------------ */ /* Page header: where you are (breadcrumb), the title, one line about it, then one main action and a menu for the rest. Every page starts with one. */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; } .page-header > div:first-child { min-width: 0; flex: 1 1 320px; } .page-header h1 { overflow-wrap: anywhere; } .page-header h1 .badge { vertical-align: middle; } .page-header p { margin: 4px 0 0; } .page-header > div:first-child > a.muted.small, .portal-page-header > div:first-child > a.muted.small { display: inline-block; margin-bottom: 4px; font-weight: 500; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 4px; font-size: var(--text-sm); color: var(--muted); } .breadcrumb a { color: var(--muted); font-weight: 500; } .breadcrumb a:hover { color: var(--text); text-decoration: none; } .breadcrumb .sep { color: var(--border-strong); } .breadcrumb [aria-current] { color: var(--text-2); } .page-subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; color: var(--muted); } .page-header .actions { flex-shrink: 0; } /* The rest of a page's actions, behind a "more" button */ .more-menu .menu-panel { left: auto; right: 0; min-width: 210px; z-index: 30; } .more-menu > summary { cursor: pointer; } .more-menu > summary.btn { display: inline-flex; align-items: center; justify-content: center; padding-left: 9px; padding-right: 9px; } .more-menu > summary .icon { margin: 0; width: 16px; height: 16px; } .more-menu[open] > summary.btn { border-color: var(--border-strong); background: var(--surface-3); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-xs); } .muted { color: var(--muted); } .small { font-size: var(--text-sm); } .right { text-align: right; } .plain-list { list-style: none; margin: 0; padding: 0; } .plain-list li { padding: 7px 0; border-bottom: 1px solid var(--border); } .plain-list li:last-child { border-bottom: 0; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .stat { display: flex; flex-direction: column; color: var(--text); } a.stat:hover { text-decoration: none; border-color: var(--primary); } .stat-value { font-size: var(--text-3xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; } .stat-label { color: var(--muted); } /* Buttons: primary (one per page), secondary (the default), ghost, danger */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 5px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 500 var(--text-base)/1.4 var(--font); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-xs); transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; } .btn:hover { text-decoration: none; background: var(--surface-2); border-color: var(--muted); } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn:active { box-shadow: none; } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-ghost { background: none; border-color: transparent; box-shadow: none; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); border-color: transparent; } .btn-danger { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; } .btn-danger:hover { background: #a92a2a; border-color: #a92a2a; } .btn-danger-outline { color: var(--danger); } .btn-danger-outline:hover { border-color: var(--danger); background: var(--danger-bg); } .btn-small { min-height: 28px; padding: 2px 10px; font-size: var(--text-sm); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .btn .icon { width: 15px; height: 15px; margin-right: 6px; } .btn.icon-only .icon { margin-right: 0; } .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* Tables */ .table-wrap { padding: 0; overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; white-space: nowrap; } thead th { background: var(--surface-2); } .card:not(.table-wrap) > table thead th, .card > .table-scroll > table thead th, .card > details > table thead th, .card > details > .table-scroll > table thead th { background: none; } tbody tr:last-child td { border-bottom: 0; } .card > table th:first-child, .card > table td:first-child { padding-left: 0; } .card > table th:last-child, .card > table td:last-child { padding-right: 0; } .table-wrap table th:first-child, .table-wrap table td:first-child { padding-left: 20px; } .table-wrap table th:last-child, .table-wrap table td:last-child { padding-right: 20px; } .card > .table-scroll > table th:first-child, .card > .table-scroll > table td:first-child, .card > details > .table-scroll > table th:first-child, .card > details > .table-scroll > table td:first-child { padding-left: 0; } .card > .table-scroll > table th:last-child, .card > .table-scroll > table td:last-child, .card > details > .table-scroll > table th:last-child, .card > details > .table-scroll > table td:last-child { padding-right: 0; } @media (max-width: 720px) { .hide-sm { display: none; } } /* The table component:
. Sticky column names, a row that lights up under the pointer, its actions showing on hover or focus, columns that sort (links in the header), and a first column that stays put when a phone scrolls sideways. Density: "comfortable" by default, "compact" on (the Display menu). */ .data-table-box { position: relative; } .data-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border); border-bottom: 0; } .data-table tbody tr:hover > td, .data-table tbody tr:focus-within > td { background: var(--surface-2); } .data-table tbody tr.is-selected > td { background: var(--primary-soft); } .data-table td { vertical-align: middle; } .data-table .row-actions { text-align: right; white-space: nowrap; } @media (hover: hover) and (min-width: 900px) { .data-table .row-actions > * { opacity: 0; transition: opacity 0.1s; } .data-table tr:hover .row-actions > *, .data-table tr:focus-within .row-actions > *, .data-table .row-actions > [open] { opacity: 1; } } .data-table .select-cell { width: 36px; padding-right: 0; } .data-table .select-cell input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--primary); } th.sortable { padding: 0; } th.sortable > a { display: flex; align-items: center; gap: 4px; padding: 10px 14px; color: inherit; } .table-wrap table th.sortable:first-child { padding-left: 0; } .table-wrap table th.sortable:first-child > a { padding-left: 20px; } th.sortable > a:hover { color: var(--text); text-decoration: none; } th.sortable.num > a { justify-content: flex-end; } th.sortable .sort-mark { width: 12px; height: 12px; opacity: 0.35; } th.sortable[aria-sort] > a { color: var(--text); } th.sortable[aria-sort] .sort-mark { opacity: 1; color: var(--primary); } th.sortable[aria-sort="descending"] .sort-mark { transform: rotate(180deg); } :root[data-density="compact"] th, :root[data-density="compact"] td { padding-top: 5px; padding-bottom: 5px; } :root[data-density="compact"] th.sortable { padding-top: 0; padding-bottom: 0; } :root[data-density="compact"] th.sortable > a { padding-top: 5px; padding-bottom: 5px; } :root[data-density="compact"] .data-table .small, :root[data-density="compact"] .data-table .muted.small { display: none; } @media (max-width: 720px) { .data-table th:first-child:not(.select-cell), .data-table td:first-child:not(.select-cell), .data-table .select-cell + th, .data-table .select-cell + td { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); } .data-table thead th:first-child, .data-table thead .select-cell + th { z-index: 3; background: var(--surface-2); } .data-table .select-cell { display: none; } /* bulk actions are for a bigger screen */ } /* What the ticked rows can do: a bar that shows once one is ticked (static/js/app.js) */ .bulk-bar { position: sticky; bottom: 16px; z-index: 20; display: none; align-items: center; gap: 8px 12px; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 8px 10px 8px 16px; border-radius: var(--radius-lg); background: var(--text); color: var(--surface); box-shadow: var(--shadow-lg); } .bulk-bar.is-active { display: flex; } .bulk-bar .bulk-count { font-weight: 600; margin-right: 4px; } .bulk-bar .btn { background: transparent; border-color: rgba(127, 137, 150, 0.5); color: inherit; box-shadow: none; } .bulk-bar .btn:hover { background: rgba(127, 137, 150, 0.25); } .bulk-bar select { min-height: 28px; padding: 2px 26px 2px 8px; font-size: var(--text-sm); } .no-js .bulk-bar, .no-js .select-cell { display: none; } .badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .badge-active { background: var(--success-bg); color: var(--success-text); } .badge-prospect { background: var(--info-bg); color: var(--info-text); } .badge-inactive { background: var(--surface-3); color: var(--muted); } .badge-overdue { background: var(--danger-bg); color: var(--danger); } .badge-soon { background: var(--warning-bg); color: var(--warning-text); } .badge-client { background: var(--purple-bg); color: var(--purple-text); } .badge-done { background: var(--success-bg); color: var(--success-text); } .details { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; margin: 0; } .details dt { color: var(--muted); } .details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } @media (max-width: 720px) { .details { grid-template-columns: 1fr; gap: 2px; } .details dd { margin-bottom: 10px; } } /* Forms */ .filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .filters input[type="search"] { flex: 1; min-width: 200px; } input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 6px 10px; } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.switch), select { min-height: var(--control-height); } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.85; } input:hover, select:hover, textarea:hover { border-color: var(--muted); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; min-height: 0; padding: 0; vertical-align: -3px; box-shadow: none; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; } input[type="search"] { -webkit-appearance: none; appearance: none; } select { max-width: 100%; /* long options (client names) can't widen the page */ -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8798' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } select[multiple] { background-image: none; padding-right: 10px; } input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; } .form { max-width: 640px; } .form .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; } .form .field input:not([type="checkbox"]):not([type="radio"]), .form .field select, .form .field textarea { width: 100%; } /* Radio groups (rendered by Django as a fieldset) */ .field fieldset { border: 0; padding: 0; margin: 0; } .field fieldset legend { font-weight: 600; font-size: var(--text-sm); padding: 0; margin-bottom: 4px; } .field fieldset label { display: inline-flex; gap: 8px; align-items: center; font-weight: normal; font-size: var(--text-base); } .field fieldset > div > div { margin: 3px 0; } .field label { font-weight: 600; font-size: var(--text-sm); color: var(--text-2); } .field .helptext { color: var(--muted); font-size: var(--text-sm); } .field:has(input[type="checkbox"]) { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 8px; } .inline-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .inline-form .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; } /* Inline forms use placeholders instead; help text would misalign the row. */ .inline-form .helptext { display: none; } /* Entity form: the household fields only for an individual */ .form:has(select[name="entity_type"]) .field:not(.has-error):has([name="household_head"], [name="household_role"]) { display: none; } .form:has(select[name="entity_type"] option[value="individual"]:checked) .field:has([name="household_head"], [name="household_role"]) { display: flex; } /* Share register entry form: show From/To only for the types that use them */ .txn-form .field-from_party, .txn-form .field-to_party { display: none; } .txn-form:has(select[name="transaction_type"] option[value="issue"]:checked) .field-to_party, .txn-form:has(select[name="transaction_type"] option[value="transfer"]:checked) .field-from_party, .txn-form:has(select[name="transaction_type"] option[value="transfer"]:checked) .field-to_party, .txn-form:has(select[name="transaction_type"] option[value="redemption"]:checked) .field-from_party { display: flex; } .txn-form input[type="number"] { width: 8rem; } .section-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .section-header h2, .section-header .filters { margin: 0; } .section-header .filters { align-items: center; } .num { text-align: right; font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .tabular, time, .card-date, .deadline-day { font-variant-numeric: tabular-nums; } .table-scroll { overflow-x: auto; } tr.future { opacity: 0.45; } form.inline { display: inline; } details.past { margin-top: 12px; } details.past summary { cursor: pointer; color: var(--muted); margin-bottom: 8px; } .warning { color: var(--warning-text); } .errorlist { list-style: none; margin: 0 0 8px; padding: 0; color: var(--danger); font-size: var(--text-sm); } .has-error input, .has-error select, .has-error textarea { border-color: var(--danger); } /* Messages: toasts in the corner, so they show wherever the page is scrolled; confirmations fade out. */ #messages { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(420px, calc(100vw - 32px)); pointer-events: none; } .messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .message { padding: 10px 14px; border-radius: var(--radius); background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); box-shadow: var(--shadow-md); pointer-events: auto; font-weight: 500; } .message-success { animation: message-out 0.4s ease 6s forwards; } .message-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } .message-info { background: var(--surface); color: var(--text); border-color: var(--border); animation: message-out 0.4s ease 6s forwards; } .message-warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border-soft); } @keyframes message-out { to { opacity: 0; visibility: hidden; } } @media (max-width: 720px) { #messages { right: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .message-success, .message-info { animation-duration: 0s; } } /* htmx: what's being replaced dims while the request is on its way, and a bar runs along the top of the page */ .results { transition: opacity 150ms; } .results.htmx-request, .htmx-request.results { opacity: 0.55; } .htmx-indicator { opacity: 0; transition: opacity 0.2s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } #loading-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 2px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, var(--primary) 40%, #8fb0ff 60%, transparent); background-size: 50% 100%; background-repeat: no-repeat; } .is-loading #loading-bar { opacity: 1; animation: loading-bar 1.1s linear infinite; } @keyframes loading-bar { from { background-position: -50% 0; } to { background-position: 150% 0; } } @media (prefers-reduced-motion: reduce) { .is-loading #loading-bar { animation: none; background: var(--primary); } } /* A grey shape where content is on its way (tabs loading) */ .skeleton { display: block; border-radius: var(--radius-md); background: var(--surface-3); color: transparent; animation: skeleton 1.4s ease-in-out infinite; } .skeleton-line { height: 12px; margin: 10px 0; } .skeleton-line.is-short { width: 40%; } @keyframes skeleton { 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* Nothing here yet: what this is for, and the way to start */ .empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; color: var(--muted); } .empty > .icon { width: 32px; height: 32px; stroke-width: 1.5; color: var(--border-strong); margin-bottom: 4px; } .empty h2, .empty h3 { margin: 0; font-size: var(--text-md); color: var(--text); } .empty p { max-width: 460px; margin: 0; } .empty .actions { margin-top: 10px; justify-content: center; } /* Tooltips: [data-tip] on anything that takes focus or the pointer */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 70; transform: translateX(-50%); width: max-content; max-width: 260px; padding: 5px 9px; border-radius: var(--radius-md); background: #111827; color: #fff; font: 500 var(--text-xs)/1.4 var(--font); text-transform: none; letter-spacing: 0; white-space: normal; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s 0.25s; } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; } [data-tip][data-tip-side="right"]::after { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); } .pagination { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; } .pagination .page-size { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; } .pagination .page-size select { min-height: 28px; padding: 2px 26px 2px 8px; font-size: var(--text-sm); } .load-more { display: flex; justify-content: center; padding: 12px; } /* Tabs: sections of one record, each with its own address */ .tabs { display: flex; gap: 2px; margin: 0 0 20px; padding: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; list-style: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; white-space: nowrap; } .tabs a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--border-strong); } .tabs a.active, .tabs a[aria-current] { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); } .tabs a:focus-visible { outline-offset: -2px; } .tabs .count { font-size: var(--text-xs); } .tabs .count.is-alert { background: var(--danger-bg); color: var(--danger); } @media (max-width: 899px) { .tabs a { min-height: var(--touch-target); } } /* Filters: a search box, a Filters button that opens the rest, what's in force as chips that come off, and the views someone saved. All of it is in the address, so a filtered list can be bookmarked and shared. */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } .toolbar input[type="search"] { flex: 1 1 240px; min-width: 0; max-width: 420px; } .toolbar .push-right { margin-left: auto; } .search-field { position: relative; flex: 1 1 240px; min-width: 0; max-width: 420px; } .search-field > .icon { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search-field input[type="search"] { width: 100%; max-width: none; padding-left: 32px; } .filter-menu .menu-panel { left: 0; right: auto; z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 14px; display: grid; gap: 10px; } .filter-menu > summary { cursor: pointer; } .filter-menu[open] > summary.btn { border-color: var(--primary); color: var(--link); } .filter-menu .field { display: flex; flex-direction: column; gap: 4px; margin: 0; } .filter-menu .field label, .filter-menu .field-label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .filter-menu select, .filter-menu input[type="text"], .filter-menu input[type="date"] { width: 100%; } .filter-menu .check { white-space: normal; } .filter-menu .actions { justify-content: space-between; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border); } .filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: 0.6875rem; font-weight: 700; } .filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; } .filter-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 1px 4px 1px 10px; border-radius: var(--radius-full); background: var(--primary-soft); color: var(--info-text); font-size: var(--text-sm); font-weight: 500; } .filter-chip a { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: inherit; } .filter-chip a:hover { background: var(--info-border); text-decoration: none; } .filter-chip a .icon { width: 12px; height: 12px; } .filter-chips .clear-all { font-size: var(--text-sm); margin-left: 4px; } .saved-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; } .saved-views .chip.is-current { border-color: var(--primary); color: var(--link); font-weight: 600; } .saved-view-form { display: flex; gap: 6px; } .saved-view-form input { min-width: 0; flex: 1; } /* Print: just the page content */ @media print { .topbar, .sidebar, .skip-link, .nav-backdrop, #messages, #timer-bar, #loading-bar, .bulk-bar, .toolbar, .filter-chips, .saved-views, .pagination, .page-header .actions, .tabs, .row-actions, .select-cell, .no-print { display: none !important; } .layout { display: block; } .content { max-width: none; padding: 0; } body { background: #fff; color: #000; font-size: 11pt; } .card { border: 0; box-shadow: none; padding: 0; break-inside: avoid; } .data-table thead th { position: static; } a { color: inherit; text-decoration: none; } .print-only { display: block !important; } } .print-only { display: none; } /* Links that look like text, a label that isn't a