:root { --bg: #f6f7f9; --surface: #ffffff; --text: #1c2330; --muted: #667085; --border: #e3e6eb; --sidebar-bg: #16202e; --sidebar-text: #c9d2de; --sidebar-active: #2a3a50; --primary: #2458d6; --primary-hover: #1c47b0; --link: #2458d6; --danger: #c93434; --warning-text: #a15c00; --success-bg: #e8f6ee; --success-text: #1d6b3f; --error-bg: #fdecec; --radius: 8px; } @media (prefers-color-scheme: dark) { :root { --bg: #11151c; --surface: #1a2029; --text: #e6e9ee; --muted: #98a2b3; --border: #2b3340; --sidebar-bg: #0b0f15; --sidebar-active: #1f2a3a; --primary: #3b6ae0; --primary-hover: #2f5bc8; --link: #8fb0ff; --danger: #ef6464; --warning-text: #f0b35a; --success-bg: #173324; --success-text: #8fd9ad; --error-bg: #3a1c1c; } } * { box-sizing: border-box; } body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.6rem; margin: 0; } h2 { font-size: 1.1rem; margin: 0 0 12px; } h3 { font-size: 1rem; margin: 20px 0 8px; } /* 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 32px; max-width: 1100px; } .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: 6px; 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: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; } .icon-button:hover { background: rgba(255, 255, 255, 0.1); } .icon-button .icon { width: 22px; height: 22px; } .sidebar { width: 240px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; background: var(--sidebar-bg); color: var(--sidebar-text); } .sidebar-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 2px 0 10px; } .brand { color: #fff; font-weight: 700; font-size: 1.2rem; } .brand:hover { text-decoration: none; } .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; } .sidebar-hidden .sidebar { width: 64px; } .sidebar-hidden .sidebar > :not(.sidebar-top), .sidebar-hidden .brand { display: none; } .sidebar-hidden .sidebar-top { padding: 0; } } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--sidebar-text); } .nav a:hover { background: var(--sidebar-active); text-decoration: none; color: #fff; } .nav a.active { background: var(--sidebar-active); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); } .nav a:focus-visible, .menu-button:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 1px; } .sidebar .nav { flex: 1; } .nav-bottom { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* 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: 7px 10px; border-radius: 8px; cursor: pointer; color: #fff; } .menu-button:hover, .menu[open] > .menu-button { background: var(--sidebar-active); } .menu-button-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .menu-button .chevron { width: 16px; height: 16px; opacity: 0.7; 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; } .user-name { font-weight: 600; font-size: 0.9rem; } .user-email { font-size: 0.78rem; color: var(--sidebar-text); } .workspace-mark { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; background: var(--primary); color: #fff; font-weight: 700; object-fit: contain; } img.workspace-mark { background: #fff; padding: 3px; } .avatar { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #3b4a61; color: #fff; font-size: 0.75rem; font-weight: 700; } .menu-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); } .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%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer; } .menu-item:hover { background: var(--bg); text-decoration: none; } .menu-item:focus-visible { background: var(--bg); 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-heading { padding: 8px 10px 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .menu-divider { height: 1px; margin: 6px 4px; background: var(--border); } .workspace-menu { margin-bottom: 6px; } .user-menu { margin-top: auto; } /* at the bottom even when there's no nav (no workspace yet) */ .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; } .nav a { padding: 10px 12px; } /* bigger tap targets */ /* 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 { 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-brand { color: #fff; font-weight: 700; font-size: 1.1rem; } .topbar-brand:hover { text-decoration: none; } .topbar-workspace { margin-left: auto; margin-right: 8px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; 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; } } /* 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: #8a5cf6; } .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: #fdf0dc; color: #8f4d00; } .badge.badge-contractual { background: #e7eefc; color: #2458d6; } .badge.badge-meeting { background: #efe9fe; color: #6d3fd6; } @media (prefers-color-scheme: dark) { .badge.badge-payment { background: #3a2a14; color: #f3c27a; } .badge.badge-contractual { background: #1c2a47; color: #9bb8f5; } .badge.badge-meeting { background: #2a2145; color: #c4b0fb; } } .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 #8a5cf6; } /* 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; } } .btn .icon { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; } .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: #d98a1c; background: #fdf0dc; } @media (prefers-color-scheme: dark) { .week-status.is-returned { background: #3a2a14; } } .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 #d98a1c; border-radius: var(--radius); background: #fdf0dc; color: #6b3b00; } @media (prefers-color-scheme: dark) { .form-notice { background: #3a2a14; color: #f3c27a; } } 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: #fdf0dc; color: #8f4d00; } @media (prefers-color-scheme: dark) { .badge.badge-returned { background: #3a2a14; color: #f3c27a; } } .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: 12px; background: var(--surface); color: var(--text); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .modal::backdrop { background: rgba(16, 22, 32, 0.45); } .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: 210px minmax(0, 1fr); gap: 24px; 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: #e7eefc; color: var(--primary); font-weight: 600; } .settings-menu a.active .icon { color: var(--primary); } @media (prefers-color-scheme: dark) { .settings-menu a.active { background: #1c2a47; color: #9bb8f5; } } .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: 400px; margin: 10vh auto; padding: 0 16px; } .auth-brand { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 20px; } .auth-card h1 { font-size: 1.3rem; margin-bottom: 16px; } .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; } /* Building blocks */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; } .muted { color: var(--muted); } .small { font-size: 0.85rem; } .right { text-align: right; } .plain-list { list-style: none; margin: 0; padding: 0; } .plain-list li { padding: 6px 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); } .stat:hover { text-decoration: none; border-color: var(--primary); } .stat-value { font-size: 2rem; font-weight: 700; } .stat-label { color: var(--muted); } /* Buttons */ .btn { display: inline-block; padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; } .btn:hover { text-decoration: none; border-color: var(--muted); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger-outline { color: var(--danger); } .btn-danger-outline:hover { border-color: var(--danger); } .btn-small { padding: 3px 10px; font-size: 0.85rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* 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: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; } 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; } } .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--border); color: var(--muted); } .badge-active { background: var(--success-bg); color: var(--success-text); } .badge-prospect { background: #e7eefc; color: #2458d6; } @media (prefers-color-scheme: dark) { .badge-prospect { background: #1c2a47; color: #9bb8f5; } } .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); border-radius: 6px; padding: 7px 10px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; } select { max-width: 100%; } /* long options (client names) can't widen the page */ .form { max-width: 640px; } .form .field { display: flex; flex-direction: column; gap: 4px; 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: 0.9rem; padding: 0; margin-bottom: 4px; } .field fieldset label { display: inline-flex; gap: 8px; align-items: center; font-weight: normal; font-size: 0.95rem; } .field fieldset > div > div { margin: 2px 0; } .field label { font-weight: 600; font-size: 0.9rem; } .field .helptext { color: var(--muted); font-size: 0.85rem; } .field:has(input[type="checkbox"]) { flex-direction: row; align-items: center; flex-wrap: wrap; } .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; } .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: 0.9rem; } .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: 35; 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: 6px; background: var(--success-bg); color: var(--success-text); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); pointer-events: auto; } .message-success { animation: message-out 0.4s ease 6s forwards; } .message-error { background: var(--error-bg); color: var(--danger); } .message-info { background: var(--surface); color: var(--text); animation: message-out 0.4s ease 6s forwards; } .message-warning { background: #fdf0dc; color: #8f4d00; } @media (prefers-color-scheme: dark) { .message-warning { background: #3a2a14; color: #f3c27a; } } @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: dim results while a search request is in flight */ .results { transition: opacity 150ms; } .results.htmx-request { opacity: 0.55; } .pagination { display: flex; gap: 12px; align-items: center; justify-content: center; } /* Print: just the page content */ @media print { .topbar, .sidebar, .skip-link, .nav-backdrop, #messages, #timer-bar { display: none !important; } .layout { display: block; } .content { max-width: none; padding: 0; } } /* Page subtitles (under an h1), links that look like text, a label that isn't a