/* ============================================================================ Clay — the Ledge Dashboard skin. Originally a claymorphism / neumorphic comp (soft "cloudy" inset + raised shadows). Flattened per request: the pastel `tone-*` palette, Nunito, and the purple accent (--lw-accent, the Import-from-Anaqua button colour) are all kept, but the puffy neumorphic shadows are gone — surfaces are now clean white cards with hairline borders and, at most, a single soft drop shadow. Per-status / per-owner accents are still handled by the `.tone-*` classes (see ledge_extras.status_tone / owner_tone). The class names keep the `clay-` prefix so templates don't need to change. Everything is scoped under `.clay-root` so it can't leak into the other (Tailwind) pages that share base.html. ============================================================================ */ /* ---- design tokens (flat surfaces, kept palette) -------------------------- */ .clay-root { --lw-canvas: #eef0f3; --lw-surface: #ffffff; --lw-surface-2: #f1f3f6; --lw-border: #e3e6ec; --lw-divider: #edeff2; --lw-text: #2f3440; --lw-text-2: #454c5b; --lw-text-3: #6e7686; --lw-text-4: #a4abb8; --lw-accent: #7a5af5; --lw-on-accent: #ffffff; --lw-accent-soft: #ece8fe; --lw-accent-soft-text: #6544cf; --lw-radius: 16px; --lw-radius-sm: 12px; --lw-shadow: 0 1px 2px rgba(70, 80, 100, .06); --lw-thead-text: #8a92a2; --lw-overdue: var(--tone-rose-text); --lw-today: var(--tone-amber-text); --lw-fs: 17px; /* DEFAULT table/row text size (single source of truth) — matches the former A+ max. The A−/A+ control overrides this on .clay-root once the user clicks it. */ --lw-font: 'Nunito', system-ui, -apple-system, sans-serif; --lw-mono: 'IBM Plex Mono', ui-monospace, monospace; /* tone tokens (status / owner accent colours) */ --tone-slate-bg: #eceaf5; --tone-slate-text: #6b6688; --tone-slate-ring: #ddd9ee; --tone-slate-solid: #9b95ba; --tone-rose-bg: #fbe7ee; --tone-rose-text: #bd587e; --tone-rose-ring: #f3d2de; --tone-rose-solid: #e07a9e; --tone-amber-bg: #fbf0dd; --tone-amber-text: #a9762c; --tone-amber-ring: #f1e1c1; --tone-amber-solid: #e0a44f; --tone-sky-bg: #e4f0fa; --tone-sky-text: #4d84b0; --tone-sky-ring: #cee3f3; --tone-sky-solid: #74a9d4; --tone-indigo-bg: #e8edf7; --tone-indigo-text: #566aa0; --tone-indigo-ring: #d6deef; --tone-indigo-solid: #7d8fc4; --tone-emerald-bg: #e2f3e9; --tone-emerald-text: #4c9569; --tone-emerald-ring: #cbe8d5; --tone-emerald-solid: #6cbf90; --tone-blue-bg: #e6ecfb; --tone-blue-text: #5870c0; --tone-blue-ring: #d3ddf6; --tone-blue-solid: #8095e0; --tone-red-bg: #fbe5e5; --tone-red-text: #bd5757; --tone-red-ring: #f3d1d1; --tone-red-solid: #e07a7a; --tone-violet-bg: #efe9f9; --tone-violet-text: #7a63b3; --tone-violet-ring: #e2d7f3; --tone-violet-solid: #a78bda; --tone-yellow-bg: #fff1b5; --tone-yellow-text: #6f5d0b; --tone-yellow-ring: #f6e18f; --tone-yellow-solid: #ecdb78; min-height: 100vh; background: var(--lw-canvas); color: var(--lw-text); font-family: var(--lw-font); } /* ---- per-tone accent variables (status badges, owner avatars, stats, dots) - */ .clay-root .tone-slate { --t-bg:var(--tone-slate-bg); --t-text:var(--tone-slate-text); --t-ring:var(--tone-slate-ring); --t-solid:var(--tone-slate-solid); } .clay-root .tone-rose { --t-bg:var(--tone-rose-bg); --t-text:var(--tone-rose-text); --t-ring:var(--tone-rose-ring); --t-solid:var(--tone-rose-solid); } .clay-root .tone-amber { --t-bg:var(--tone-amber-bg); --t-text:var(--tone-amber-text); --t-ring:var(--tone-amber-ring); --t-solid:var(--tone-amber-solid); } .clay-root .tone-sky { --t-bg:var(--tone-sky-bg); --t-text:var(--tone-sky-text); --t-ring:var(--tone-sky-ring); --t-solid:var(--tone-sky-solid); } .clay-root .tone-indigo { --t-bg:var(--tone-indigo-bg); --t-text:var(--tone-indigo-text); --t-ring:var(--tone-indigo-ring); --t-solid:var(--tone-indigo-solid); } .clay-root .tone-emerald { --t-bg:var(--tone-emerald-bg); --t-text:var(--tone-emerald-text); --t-ring:var(--tone-emerald-ring); --t-solid:var(--tone-emerald-solid); } .clay-root .tone-blue { --t-bg:var(--tone-blue-bg); --t-text:var(--tone-blue-text); --t-ring:var(--tone-blue-ring); --t-solid:var(--tone-blue-solid); } .clay-root .tone-red { --t-bg:var(--tone-red-bg); --t-text:var(--tone-red-text); --t-ring:var(--tone-red-ring); --t-solid:var(--tone-red-solid); } .clay-root .tone-violet { --t-bg:var(--tone-violet-bg); --t-text:var(--tone-violet-text); --t-ring:var(--tone-violet-ring); --t-solid:var(--tone-violet-solid); } .clay-root .tone-yellow { --t-bg:var(--tone-yellow-bg); --t-text:var(--tone-yellow-text); --t-ring:var(--tone-yellow-ring); --t-solid:var(--tone-yellow-solid); } /* ---- keyframes ------------------------------------------------------------ */ @keyframes clayShimmer { 0% { background-position: -600px 0 } 100% { background-position: 600px 0 } } @keyframes claySpin { to { transform: rotate(360deg) } } @keyframes claySlideIn { from { opacity: 0; transform: translateX(12px) } to { opacity: 1; transform: translateX(0) } } /* ---- scrollbars ----------------------------------------------------------- */ .lw-scroll::-webkit-scrollbar { height: 10px; width: 10px; } .lw-scroll::-webkit-scrollbar-thumb { background: rgba(110, 118, 138, .4); border-radius: 99px; } .lw-scroll::-webkit-scrollbar-track { background: transparent; } /* ---- form controls (flat, hairline border) -------------------------------- */ .clay-root .clay-input, .clay-root select.lw-sel { width: 100%; border: 1px solid var(--lw-border); border-radius: 10px; background-color: var(--lw-surface); color: var(--lw-text-2); font-family: inherit; outline: none; transition: border-color .12s, box-shadow .12s; } .clay-root .clay-input:focus, .clay-root select.lw-sel:focus { border-color: var(--lw-accent); box-shadow: 0 0 0 3px var(--lw-accent-soft); } .clay-root .clay-input::placeholder { color: var(--lw-text-4); } /* native select chevron */ select.lw-sel { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a59ebd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; } /* the big rounded search box on the top bar */ .clay-root .clay-search { height: 42px; border: 1px solid var(--lw-border); border-radius: 11px; padding: 0 16px 0 42px; font-size: 13.5px; font-weight: 600; font-family: inherit; color: var(--lw-text); background-color: var(--lw-surface); outline: none; transition: border-color .12s, box-shadow .12s; } .clay-root .clay-search:focus { border-color: var(--lw-accent); box-shadow: 0 0 0 3px var(--lw-accent-soft); } .clay-root .clay-search::placeholder { color: var(--lw-text-4); } /* ---- raised panels (sidebar cards, table card) ---------------------------- */ .clay-panel { background: var(--lw-surface); border-radius: var(--lw-radius); border: 1px solid var(--lw-border); box-shadow: var(--lw-shadow); } /* small icon "chips" that head each sidebar panel */ .clay-panel-icon { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; flex: none; } .clay-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lw-text-3); } /* ---- raised / accent buttons (top bar, import) ---------------------------- */ .clay-icon-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--lw-border); background: var(--lw-surface); color: var(--lw-text-3); cursor: pointer; box-shadow: var(--lw-shadow); transition: background .12s, color .12s, border-color .12s; } .clay-icon-btn:hover { color: var(--lw-text); border-color: var(--lw-text-4); } /* ---- row actions: Done + Delete (each arms a Confirm/Cancel step) --------- */ .clay-btn-delete { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer; background: var(--tone-red-solid); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: var(--lw-shadow); transition: background .12s, transform .12s, box-shadow .12s; } .clay-btn-delete:hover, .clay-btn-delete:focus-visible { filter: brightness(.94); } .clay-btn-delete:active { transform: scale(.97); } .clay-btn-delete.is-armed { box-shadow: 0 0 0 2px var(--lw-surface), 0 0 0 4px var(--tone-red-solid); } .clay-btn-done { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer; background: var(--tone-emerald-solid); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: var(--lw-shadow); transition: background .12s, transform .12s, filter .12s; } .clay-btn-done:hover, .clay-btn-done:focus-visible { filter: brightness(.94); } .clay-btn-done:active { transform: scale(.97); } /* Neutral "Cancel" that backs out of an armed Done/Delete confirm. */ .clay-btn-cancel { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 40px; padding: 0 18px; border: 1px solid var(--lw-divider); border-radius: 10px; cursor: pointer; background: var(--lw-surface); color: var(--lw-text-2); font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .12s, color .12s, border-color .12s, transform .12s; } .clay-btn-cancel:hover, .clay-btn-cancel:focus-visible { color: var(--lw-text); border-color: var(--lw-text-4); } .clay-btn-cancel:active { transform: scale(.97); } /* The little "Mark filed?" / "Delete for good?" prompt shown while a confirm is armed. */ .clay-confirm-hint { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--lw-text-3); text-align: center; padding: 0 2px 2px; } /* Restore an auto-filtered row back onto the working list (Deleted Items view). */ .clay-btn-restore { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer; background: var(--lw-accent); color: var(--lw-on-accent); font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: var(--lw-shadow); transition: background .12s, transform .12s, filter .12s; } .clay-btn-restore:hover, .clay-btn-restore:focus-visible { filter: brightness(1.06); } .clay-btn-restore:active { transform: scale(.97); } /* Rec/RTX pending row — Submit, in the Same Day / accent purple, with a spaced icon + label. */ .clay-btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer; background: var(--lw-accent); color: var(--lw-on-accent); font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: var(--lw-shadow); transition: filter .12s, transform .12s; } .clay-btn-submit:hover, .clay-btn-submit:focus-visible { filter: brightness(.94); } .clay-btn-submit:active { transform: scale(.97); } /* RTX wording: the same button reads "Done" and carries the route's green, so the action matches the green "Filed" tag the row turns into (see _route_row.html). Modifier only — size, icon gap and press/hover behaviour stay shared with the accent version. */ .clay-btn-submit.is-done { background: var(--tone-emerald-solid); color: #fff; } /* Rec/RTX submitted row — a plain green "Ledged" label ("Filed" on RTX; not a button), matching the bold date/time that sits just below it, only rendered in green (see _route_row.html). */ .clay-tag-submitted { display: block; text-align: center; white-space: nowrap; font-family: inherit; font-weight: 800; font-size: calc(var(--lw-fs, 17px) + 2px); color: var(--tone-emerald-solid); } .clay-row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; max-width: 116px; margin-left: auto; } .clay-row-actions .clay-btn-delete, .clay-row-actions .clay-btn-done, .clay-row-actions .clay-btn-submit, .clay-row-actions .clay-tag-submitted, .clay-row-actions .clay-btn-cancel, .clay-row-actions .clay-btn-restore { width: 100%; justify-content: center; } /* Completed Rec/RTX row: the one-line "Completed" + date/time is wider than the 116px action cap, which would clip it and push it past the cell edge. Drop the cap for this state so the actions cell grows to fit its content, and right-align everything against the cell's edge. */ .clay-row-actions.is-completed { max-width: none; align-items: flex-end; } .clay-row-actions.is-completed > * { width: auto; } /* Filing/Rec row "Send email": a single Outlook-blue tile that opens a mailto: draft in the default mail app (Outlook desktop on firm machines), addressed to the row's Target user and cc'ing their support assistant when that person is an attorney. Subject = " : ". See _mail_button.html, shared by _row.html and _route_row.html. */ .clay-mail-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: none; cursor: pointer; text-decoration: none; color: #fff; background: linear-gradient(135deg, #2b7cd3, #0f5bab); box-shadow: 0 2px 6px -2px rgba(15, 91, 171, .5); transition: filter .15s, transform .1s, box-shadow .15s; } .clay-mail-btn:hover, .clay-mail-btn:focus-visible { filter: brightness(1.07); box-shadow: 0 4px 11px -3px rgba(15, 91, 171, .6); } .clay-mail-btn:active { transform: scale(.95); } /* No address resolved for this row's Target user (nobody on the support roster, no account email): the draft still opens with the subject filled in, so the tile dims rather than disappearing — the To field is simply left for the sender. Regains full contrast on hover/focus. */ .clay-mail-btn.is-unaddressed { background: linear-gradient(135deg, #93b4d6, #7d9cbe); box-shadow: 0 1px 4px -2px rgba(15, 91, 171, .35); } /* Row slide-out while HTMX removes it after a confirmed delete. */ .clay-root tr.htmx-swapping > td { opacity: 0; transform: translateX(22px); transition: opacity .22s ease, transform .22s ease; } /* ---- multi-select: row checkbox + bulk action toolbar --------------------- */ .clay-checkbox { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin: 0; vertical-align: middle; cursor: pointer; border: 1.5px solid var(--lw-border); border-radius: 6px; background: var(--lw-surface); box-shadow: var(--lw-shadow); transition: background .12s, border-color .12s, box-shadow .12s; position: relative; } .clay-checkbox:hover { border-color: var(--lw-accent); } .clay-checkbox:checked, .clay-checkbox:indeterminate { background: var(--lw-accent); border-color: var(--lw-accent); } .clay-checkbox:checked::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px; border: solid var(--lw-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .clay-checkbox:indeterminate::after { content: ""; position: absolute; left: 3.5px; top: 7px; width: 9px; height: 0; border-top: 2px solid var(--lw-on-accent); } .clay-checkbox:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; } /* The bar that surfaces above the table once ≥1 row is checked. */ .clay-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; border-radius: 15px; border: 1px solid var(--lw-border); background: var(--lw-surface); box-shadow: var(--lw-shadow); } .clay-bulkbar-count { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 800; color: var(--lw-text-2); } .clay-bulkbar-count > span { color: var(--lw-accent); } /* Toolbar buttons sit inline (row actions are column-stacked; here we want a row). */ .clay-bulkbar .clay-btn-delete, .clay-bulkbar .clay-btn-done, .clay-bulkbar .clay-btn-restore, .clay-bulkbar .clay-btn-cancel { height: 38px; padding: 0 16px; } /* "Select all N matching" bridge under the bulk toolbar (see _results.html). Accent-tinted so it reads as an offer, not an error, and centred like a notice. */ .clay-selectall-note { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--lw-accent-soft); background: var(--lw-accent-soft); color: var(--lw-accent-soft-text); font-size: 13px; font-weight: 600; } .clay-selectall-link { border: none; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--lw-accent); cursor: pointer; text-decoration: underline; } .clay-selectall-link:hover { filter: brightness(1.08); } .clay-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--lw-border); background: var(--lw-surface); color: var(--lw-text-2); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: var(--lw-shadow); transition: background .12s, border-color .12s, color .12s; } .clay-btn:hover { border-color: var(--lw-text-4); color: var(--lw-text); } .clay-btn-accent { background: var(--lw-accent); color: var(--lw-on-accent); font-weight: 800; border-color: transparent; box-shadow: 0 2px 6px -1px rgba(122, 90, 245, .45); } .clay-btn-accent:hover { border-color: transparent; color: var(--lw-on-accent); filter: brightness(1.05); } /* ---- segmented control (scope switcher, view modes, group, sort dir) ------ */ .clay-seg { display: inline-flex; align-items: center; gap: 2px; background: var(--lw-surface-2); border-radius: 10px; padding: 3px; border: 1px solid var(--lw-border); } .clay-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: none; border-radius: 8px; background: transparent; color: var(--lw-text-3); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; } .clay-seg-btn:hover:not(.is-active) { color: var(--lw-text-2); } .clay-seg-btn.is-active { background: var(--lw-surface); color: var(--lw-text); font-weight: 800; box-shadow: var(--lw-shadow); } .clay-seg-btn:disabled { cursor: not-allowed; opacity: .55; } /* The hero scope switcher (Same Day / Next Day / Filed) — larger and the focal control. Active tab is a solid purple pill so the current view reads at a glance. */ .clay-seg-hero { padding: 4px; border-radius: 14px; } .clay-seg-hero .clay-seg-btn { height: 40px; padding: 0 18px; font-size: 14.5px; font-weight: 800; border-radius: 10px; gap: 8px; } /* Active pill follows the selected source tab's colour (--src-tint); default = purple. */ .clay-seg-hero .clay-seg-btn.is-active { background: var(--src-tint); color: var(--lw-on-accent); box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--src-tint) 50%, transparent); transition: background .3s, box-shadow .3s; } .clay-seg-hero .clay-seg-btn .clay-seg-count { font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: var(--lw-surface); color: var(--lw-text-3); } .clay-seg-hero .clay-seg-btn.is-active .clay-seg-count { background: rgba(255, 255, 255, .24); color: var(--lw-on-accent); } /* ---- primary source switcher — ring-dial tabs (Filing / Recommendation / RTX) Lives in the top bar. Ported from the claude.ai comp but flattened to the app's tokens: an inactive tab collapses to just its dial; the active tab expands to reveal its label and takes a per-tab accent gradient (`--tint`). UI only for now — the active tab is toggled client-side (Alpine), the list below is unchanged. Scoped under .clay-root so it never leaks into the Tailwind pages. --------- */ /* Source theme: the active tab's colour, exposed for the header to follow. `source` is an Alpine var lifted to .clay-root and mirrored as [data-source]; these vars re-tint the scope pill, the ring and the date badge (see below). Filing keeps the app's purple. */ .clay-root { --src-tint: var(--lw-accent); --src-ring-1: #8b6cf6; --src-ring-2: #6a45ef; } .clay-root[data-source="recommendation"] { --src-tint: #16a97e; --src-ring-1: #3cc79a; --src-ring-2: #0d8f68; } .clay-root[data-source="rtx"] { --src-tint: #d68a2e; --src-ring-1: #e6b35c; --src-ring-2: #bf751b; } .clay-root .clay-viewbar { display: inline-flex; align-items: center; gap: 10px; flex: none; } .clay-root .clay-vtab { --tint: var(--lw-accent); display: inline-flex; align-items: center; gap: 13px; flex: none; padding: 4px; border: none; border-radius: 999px; background: transparent; font-family: inherit; cursor: pointer; /* Route switcher is now links — clear default anchor underline / visited colour. */ color: inherit; text-decoration: none; transition: background .3s cubic-bezier(.22,.9,.32,1), box-shadow .3s cubic-bezier(.22,.9,.32,1), padding .3s cubic-bezier(.22,.9,.32,1); } .clay-root .clay-vtab[data-source="filing"] { --tint: #7a5af5; } .clay-root .clay-vtab[data-source="recommendation"] { --tint: #16a97e; } .clay-root .clay-vtab[data-source="rtx"] { --tint: #d68a2e; } .clay-root .clay-vtab:focus-visible { outline: 3px solid var(--lw-accent-soft); outline-offset: 2px; } .clay-root .clay-vdial { position: relative; width: 56px; height: 56px; flex: none; } /* width/height:100% lets the ring scale with the dial container (viewBox handles the math). */ .clay-root .clay-vdial .ringsvg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .clay-root .clay-vdial .rtrk { stroke: var(--lw-border); transition: stroke .3s; } /* The fill sweeps from empty to its value on load — a boot script (dashboard.html) resets each ring to empty then hands it the server value, so this transition animates the arc filling. */ .clay-root .clay-vdial .rfil { stroke: var(--tint); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.22,.9,.32,1), stroke .3s; } .clay-root .clay-vdial .core { position: absolute; inset: 7px; border-radius: 999px; display: grid; place-items: center; background: var(--lw-surface); color: var(--tint); box-shadow: var(--lw-shadow); transition: background .3s, color .3s, transform .16s cubic-bezier(.22,.9,.32,1); } .clay-root .clay-vdial .core svg { width: 22px; height: 22px; } .clay-root .clay-vtab:hover:not(.is-on) .clay-vdial .core { transform: scale(1.07); } .clay-root .clay-vlbl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: left; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; margin: 0; transition: max-width .34s cubic-bezier(.22,.9,.32,1), opacity .24s cubic-bezier(.22,.9,.32,1), margin .34s cubic-bezier(.22,.9,.32,1); } .clay-root .clay-vlbl .vn { font-size: 16px; font-weight: 900; letter-spacing: -.015em; color: #fff; } .clay-root .clay-vlbl .vs { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .8); } .clay-root .clay-vtab.is-on { padding: 4px 24px 4px 4px; background: linear-gradient(140deg, var(--tint), color-mix(in srgb, var(--tint) 72%, #000 22%)); box-shadow: 0 8px 20px -9px color-mix(in srgb, var(--tint) 60%, transparent); } /* min-width keeps every active tab the same width as the longest label ("Recommendation"), so the switcher doesn't resize as you move between Filing / Recommendation / RTX. */ .clay-root .clay-vtab.is-on .clay-vlbl { min-width: 150px; max-width: 300px; opacity: 1; margin-left: 3px; } .clay-root .clay-vtab.is-on .clay-vdial .rtrk { stroke: rgba(255, 255, 255, .28); } .clay-root .clay-vtab.is-on .clay-vdial .rfil { stroke: #fff; } .clay-root .clay-vtab.is-on .clay-vdial .core { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; } /* Narrow widths: drop the active label so the switcher never crowds the search box. */ @media (max-width: 900px) { .clay-root .clay-vtab.is-on { padding: 3px; background: transparent; box-shadow: none; } .clay-root .clay-vtab.is-on .clay-vlbl { min-width: 0; max-width: 0; opacity: 0; margin: 0; } .clay-root .clay-vtab.is-on .clay-vdial .rtrk { stroke: var(--lw-border); } .clay-root .clay-vtab.is-on .clay-vdial .rfil { stroke: var(--tint); } .clay-root .clay-vtab.is-on .clay-vdial .core { background: var(--lw-surface); color: var(--tint); box-shadow: var(--lw-shadow); } .clay-root .clay-vtab.is-on .clay-vdial { box-shadow: 0 0 0 2px var(--tint); border-radius: 999px; } } @media (prefers-reduced-motion: reduce) { .clay-root .clay-vtab, .clay-root .clay-vlbl, .clay-root .clay-vdial .core { transition: none; } .clay-root .clay-vdial .rfil { transition: none; } .clay-root .clay-route-grid tbody tr { animation: none; } } /* Route tables (Recommendation / RTX): rows enter with a short staggered fade-and-rise, echoing the dial sweep. Fresh DOM — a full page load or an HTMX #results swap — replays it on its own; Filing's grid is deliberately left static. Mirrors the design comp's row-swap animation. */ .clay-root .clay-route-grid tbody tr { animation: clayRowIn .32s cubic-bezier(.22,.9,.32,1) both; } .clay-root .clay-route-grid tbody tr:nth-child(2) { animation-delay: .02s; } .clay-root .clay-route-grid tbody tr:nth-child(3) { animation-delay: .04s; } .clay-root .clay-route-grid tbody tr:nth-child(4) { animation-delay: .06s; } .clay-root .clay-route-grid tbody tr:nth-child(5) { animation-delay: .08s; } .clay-root .clay-route-grid tbody tr:nth-child(6) { animation-delay: .10s; } .clay-root .clay-route-grid tbody tr:nth-child(n+7) { animation-delay: .12s; } @keyframes clayRowIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } /* ---- quick-filter chips (sidebar) ----------------------------------------- */ .clay-chip { display: flex; align-items: center; gap: 9px; width: 100%; height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--lw-border); background: var(--lw-surface-2); color: var(--lw-text-3); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .clay-chip .clay-chip-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--lw-text-4); flex: none; } .clay-chip .clay-chip-count { font-size: 11px; font-weight: 800; color: var(--lw-text-4); opacity: .85; } .clay-chip.is-active { background: var(--t-bg); color: var(--t-text); border-color: var(--t-ring); } .clay-chip.is-active .clay-chip-dot { background: var(--t-solid); } .clay-chip.is-active .clay-chip-count { color: var(--t-text); } /* ---- inline status dropdown (row editor) ---------------------------------- */ .clay-status-select { position: relative; width: 100%; max-width: 220px; } .clay-status-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 4px 0 11px; border: none; border-radius: 10px; background: var(--t-solid); color: #fff; cursor: pointer; font-family: inherit; font-weight: 800; font-size: calc(var(--lw-fs, 17px) - 3.5px); box-shadow: 0 1px 2px rgba(70, 80, 100, .14); } .clay-status-trigger .clay-status-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clay-status-trigger .clay-status-chev { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(0, 0, 0, .17); flex: none; } .clay-status-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px; background: var(--lw-surface); border: 1px solid var(--lw-border); border-radius: 14px; padding: 7px; box-shadow: 0 18px 40px -12px rgba(40, 45, 70, .3); display: flex; flex-direction: column; gap: 2px; } .clay-status-opt { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 11px; border: none; border-radius: 9px; background: transparent; color: var(--lw-text); cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px; text-align: left; transition: background .1s; } .clay-status-opt:hover { background: var(--lw-surface-2); } .clay-status-opt.is-current { background: var(--t-solid); color: #fff; font-weight: 800; } .clay-status-opt .clay-status-lead { width: 14px; display: grid; place-items: center; flex: none; } .clay-status-opt .clay-status-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--t-solid); } /* "Comment Details" popover — a dropdown anchored below the status control on a backward (send-back) move. JS (positionComment() in _row.html) sizes + positions it on open so it stays centred on the control yet clamped inside the viewport, never trimmed on small screens. The rules below are the pre-JS fallback: right-anchored + a viewport-capped width so even without JS it opens leftward and can't spill off the right edge. See _comment_popover.html. */ .clay-status-comment { position: absolute; top: calc(100% + 6px); z-index: 60; right: 0; width: min(540px, calc(100vw - 24px)); background: var(--lw-surface); border: 1px solid var(--lw-border); border-radius: 14px; padding: 12px; box-shadow: 0 18px 40px -12px rgba(40, 45, 70, .3); } .clay-status-comment-head { font-weight: 800; font-size: 13px; color: var(--lw-text); margin-bottom: 8px; } .clay-status-comment-input { width: 100%; resize: vertical; min-height: 80px; padding: 10px 14px; } .clay-status-comment-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .clay-status-opt.is-current .clay-status-dot { background: rgba(255, 255, 255, .92); } .clay-status-opt .clay-status-label { flex: 1; white-space: nowrap; } /* ---- sort-key pills (sidebar) --------------------------------------------- */ .clay-pill { display: inline-flex; align-items: center; height: 33px; padding: 0 13px; border: 1px solid var(--lw-border); border-radius: 9px; background: var(--lw-surface); color: var(--lw-text-3); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .clay-pill.is-active { background: var(--lw-accent); color: var(--lw-on-accent); font-weight: 800; border-color: transparent; box-shadow: 0 2px 6px -1px rgba(122, 90, 245, .4); } /* ---- pagination (grid view) — "Page X of Y" + Prev/Next, matching the audit log --- */ .clay-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 0 2px; } .clay-pagination-meta { font-size: 12.5px; font-weight: 500; color: var(--lw-text-3); } .clay-pagination-meta strong { font-weight: 700; color: var(--lw-text-2); } .clay-pagination-nav { display: flex; align-items: center; gap: 8px; } .clay-pagination-nav .clay-btn { height: 34px; padding: 0 14px; font-size: 12.5px; } /* ---- stat cards ----------------------------------------------------------- */ .clay-stat { text-align: left; background: var(--t-bg); border-radius: var(--lw-radius); border: 1px solid var(--t-ring); padding: 15px 16px; cursor: pointer; font-family: inherit; width: 100%; box-shadow: var(--lw-shadow); transition: transform .12s, box-shadow .12s; } .clay-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--t-solid) 40%, transparent); } .clay-stat .clay-stat-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--t-solid); } .clay-stat .clay-stat-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--t-text); opacity: .85; } .clay-stat .clay-stat-value { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin-top: 8px; line-height: 1; color: var(--t-text); } /* ---- status badge --------------------------------------------------------- */ .clay-badge { display: inline-flex; align-items: center; height: 23px; padding: 0 11px; border-radius: 99px; font-size: 11px; font-weight: 800; white-space: nowrap; background: var(--t-bg); color: var(--t-text); box-shadow: inset 0 0 0 1px var(--t-ring); } .clay-off-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 8px; font-size: 11px; font-weight: 700; background: var(--t-bg); color: var(--t-text); box-shadow: inset 0 0 0 1px var(--t-ring); } /* ---- owner avatar --------------------------------------------------------- */ .clay-avatar { flex: none; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--t-bg); color: var(--t-text); box-shadow: inset 0 0 0 1.5px var(--t-ring); } /* ---- numbered-checkpoint stepper ------------------------------------------ */ .clay-step { flex: none; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 13px; font-weight: 800; } .clay-step-done { background: var(--tone-emerald-solid); color: #fff; } .clay-step-current { background: var(--lw-accent); color: var(--lw-on-accent); } .clay-step-upcoming{ background: var(--lw-surface-2); color: var(--lw-text-4); box-shadow: inset 0 0 0 1px var(--lw-border); } .clay-step-line { flex: none; width: 14px; height: 2px; } .clay-step-line-filled { background: var(--lw-accent); } .clay-step-line-done { background: var(--tone-emerald-solid); } .clay-step-line-todo { background: var(--lw-border); } /* ---- mono reference link -------------------------------------------------- */ .clay-ref { font-family: var(--lw-mono); font-size: var(--lw-fs, 17px); font-weight: 700; color: var(--lw-text); letter-spacing: -.01em; text-decoration: none; } .clay-ref:hover { text-decoration: underline; } /* ---- serial-number column ------------------------------------------------- */ /* The count lives in a CSS counter (reset on the table, incremented per row) so it recomputes automatically when HTMX swaps a single row and numbers continuously across grouped sections. */ .clay-sno { padding: 14px 12px; vertical-align: top; text-align: right; white-space: nowrap; } .clay-sno::before { counter-increment: clay-sno; content: counter(clay-sno); font-size: calc(var(--lw-fs, 17px) - 3px); font-weight: 700; color: var(--lw-text-4); font-variant-numeric: tabular-nums; } /* ---- item detail side drawer ---------------------------------------------- */ .clay-drawer-blur { filter: blur(3px); pointer-events: none; user-select: none; transition: filter .2s; } .clay-drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(47, 52, 64, .18); backdrop-filter: blur(2px); } .clay-drawer { position: fixed; top: 0; right: 0; z-index: 50; width: min(720px, 55vw); height: 100vh; background: var(--lw-surface); border-left: 1px solid var(--lw-border); box-shadow: -12px 0 40px -12px rgba(70, 80, 100, .22); display: flex; flex-direction: column; } .clay-drawer-body { flex: 1; overflow-y: auto; padding: 0; } .clay-drawer-inner { padding: 32px 32px 40px; } .clay-drawer-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--lw-divider); } .clay-drawer-ref { font-family: var(--lw-mono); font-size: calc(var(--lw-fs, 17px) + 2px); font-weight: 700; color: var(--lw-text); letter-spacing: -.01em; margin: 0; } .clay-drawer-title { font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--lw-text); margin: 8px 0 0; } .clay-drawer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .clay-drawer-due { font-size: 15px; font-weight: 600; color: var(--lw-text-3); } .clay-drawer .clay-badge { height: 28px; padding: 0 14px; font-size: 13px; } .clay-drawer .clay-ref { font-size: var(--lw-fs, 17px); } .clay-drawer .clay-avatar { width: 34px; height: 34px; font-size: 13px; } .clay-drawer-close { flex: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--lw-border); background: var(--lw-surface-2); color: var(--lw-text-3); cursor: pointer; display: grid; place-items: center; transition: color .12s, background .12s; } .clay-drawer-close:hover { color: var(--lw-text); background: var(--lw-surface); } .clay-drawer-section { margin-bottom: 28px; } .clay-drawer-section .clay-eyebrow { font-size: 13px; margin-bottom: 14px; } .clay-drawer-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; margin: 0; } .clay-drawer-dl dt { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lw-text-4); margin: 0; } .clay-drawer-dl dd { font-size: 16px; font-weight: 600; color: var(--lw-text-2); margin: 4px 0 0; } /* File link spans the full drawer width and reads as a real (mono) link, not body text. It is NOT clickable (file:// can't be opened from an http(s) page — it just errors), so no pointer cursor / hover underline; the Copy button beside it is the action. */ .clay-drawer-dl .clay-filelink { grid-column: 1 / -1; min-width: 0; } .clay-filelink dd { display: flex; align-items: flex-start; gap: 6px; } .clay-filelink-path { display: inline-block; max-width: 100%; font-family: var(--lw-mono); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--lw-accent); text-decoration: none; cursor: default; word-break: break-all; overflow-wrap: anywhere; } .clay-drawer-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 2px solid var(--lw-divider); } .clay-drawer-tl-item { position: relative; padding: 0 0 18px 18px; display: flex; gap: 0; } .clay-drawer-tl-item:last-child { padding-bottom: 0; } .clay-drawer-tl-dot { position: absolute; left: -12px; top: 2px; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--tone-emerald-solid); box-shadow: 0 0 0 3px var(--lw-surface); } .clay-drawer-tl-dot-comment { background: var(--tone-red-solid); } /* Task-name / comment edits — accent dot with a pencil glyph. */ .clay-drawer-tl-dot-edit { background: var(--lw-accent); } /* Manual list moves (removed / restored) — amber dot with a swap glyph. */ .clay-drawer-tl-dot-move { background: var(--tone-amber-solid); } /* Moved to Deleted Items — slate dot with a trash glyph; a soft, recoverable delete. */ .clay-drawer-tl-dot-delete { background: var(--tone-slate-solid); } .clay-drawer-tl-label { font-size: 16px; font-weight: 700; color: var(--lw-text); margin: 0; } .clay-drawer-tl-meta { font-size: 14px; color: var(--lw-text-4); margin: 4px 0 0; line-height: 1.45; } .clay-drawer-tl-empty { font-size: 15px; color: var(--lw-text-4); padding-left: 20px; } .clay-drawer-comments { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .clay-drawer-comment { display: flex; align-items: flex-start; gap: 10px; } .clay-drawer-comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .clay-drawer-comment-author { font-size: 15px; font-weight: 700; color: var(--lw-text); } .clay-drawer-comment-time { font-size: 13px; font-weight: 600; color: var(--lw-text-4); } .clay-drawer-comment-body { font-size: 16px; line-height: 1.5; color: var(--lw-text-2); margin: 0; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; } /* Links pasted into comments (auto-linked by Django's urlize) */ .clay-drawer-comment-body a, .clay-comment-body a { color: var(--lw-accent, #6d5efc); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; } /* Ledged file link surfaced in the Task-comment cell (see LedgeItem.shows_ledged_link). Shown as non-clickable, link-styled text (file:// can't be opened from the browser) next to a Copy button; .clay-filelink-wrap keeps the two aligned. */ .clay-filelink-wrap { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; } .clay-cell-filelink { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; font-family: var(--lw-mono); font-size: calc(var(--lw-fs, 17px) - 3px); font-weight: 600; line-height: 1.4; color: var(--lw-accent); text-decoration: none; cursor: default; overflow-wrap: anywhere; word-break: break-all; } .clay-cell-filelink svg { flex: none; margin-top: 3px; opacity: .8; } /* Copy-path icon button (partials/_copy_path_button.html) — the actual action beside the non-clickable file path. Flips to a green check for ~1.5s on copy (.is-copied). */ .clay-copy-path { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--lw-text-4); cursor: pointer; transition: background .12s ease, color .12s ease; } .clay-copy-path:hover { background: rgba(122, 90, 245, .12); color: var(--lw-accent); } .clay-copy-path:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 1px; } .clay-copy-path.is-copied { color: var(--tone-emerald-text); } .clay-copy-path svg { display: block; } /* ---- inline edit of Task name / Task comment (hover pencil → ✓ / ✕) -------- */ /* Display wrapper: the value + a faded pencil that reveals on hover (JIRA-style). Block-level flex so the task-type / info-icon line still drops BELOW the task name (not beside it); the pencil sits right after the text, and the text child keeps wrapping via min-width:0. */ .clay-editable { display: flex; align-items: flex-start; gap: 6px; } .clay-editable > :first-child { min-width: 0; } .clay-edit-pencil { flex: none; display: grid; place-items: center; margin-top: 1px; width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--lw-text-4); cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease; } /* Reveal on hover of that field's own cell (so the name pencil and the comment pencil are independent), or when focused for keyboard users (mirrors the .clay-tip fade idiom). */ .clay-root td:hover .clay-edit-pencil, .clay-root .clay-edit-pencil:focus-visible { opacity: 1; } .clay-edit-pencil:hover { color: var(--lw-text-2); background: var(--lw-surface-2); } /* The inline editor: the field alongside a ✓ save / ✕ cancel pair. */ .clay-inline-form { display: flex; align-items: flex-start; gap: 6px; } .clay-inline-form-comment { flex-wrap: wrap; } .clay-inline-edit { flex: 1 1 auto; min-width: 0; padding: 5px 9px; font-size: calc(var(--lw-fs, 17px) - 1px); line-height: 1.35; } textarea.clay-inline-edit { min-height: 46px; resize: vertical; } .clay-inline-actions { display: inline-flex; gap: 6px; flex: none; } .clay-inline-save, .clay-inline-cancel { flex: none; display: grid; place-items: center; cursor: pointer; padding: 0; width: 30px; height: 30px; border-radius: 8px; transition: filter .12s, background .12s, color .12s, border-color .12s, transform .12s; } .clay-inline-save { border: none; background: var(--tone-emerald-solid); color: #fff; box-shadow: var(--lw-shadow); } .clay-inline-save:hover, .clay-inline-save:focus-visible { filter: brightness(.94); } .clay-inline-cancel { border: 1px solid var(--lw-divider); background: var(--lw-surface); color: var(--lw-text-3); } .clay-inline-cancel:hover, .clay-inline-cancel:focus-visible { color: var(--lw-text); border-color: var(--lw-text-4); } .clay-inline-save:active, .clay-inline-cancel:active { transform: scale(.94); } .clay-drawer-comment-form { display: flex; align-items: center; gap: 12px; } .clay-drawer-comment-form .clay-input { height: 46px; border-radius: 13px; font-size: 15px; padding: 0 16px; } .clay-drawer-comment-form .clay-btn { height: 46px; padding: 0 22px; font-size: 15px; } /* ---- "Ledged" cover-sheet pop-up (centred modal) -------------------------- */ .clay-modal-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(47, 52, 64, .28); backdrop-filter: blur(2px); /* Reset the row's cell typography so the form reads at its own scale. */ text-align: left; white-space: normal; } .clay-modal { width: min(640px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--lw-surface); border: 1px solid var(--lw-border); border-radius: 20px; box-shadow: 0 24px 60px -18px rgba(70, 80, 100, .4); padding: 26px 28px 24px; animation: claySlideIn .18s ease; } .clay-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .clay-modal-eyebrow { font-family: var(--lw-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lw-text-4); margin: 0; } .clay-modal-title { font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--lw-text); margin: 6px 0 0; } .clay-modal-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--lw-border); background: var(--lw-surface); color: var(--lw-text-4); cursor: pointer; transition: color .12s, border-color .12s; } .clay-modal-close:hover { color: var(--lw-text); border-color: var(--lw-text-4); } .clay-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .clay-field { display: flex; flex-direction: column; gap: 6px; } .clay-field-wide { grid-column: 1 / -1; } .clay-field-label { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--lw-text-2); } .clay-root .clay-field-input { height: 44px; border-radius: 12px; font-size: 14.5px; padding: 0 14px; } .clay-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lw-divider); } .clay-modal-foot .clay-btn { height: 44px; padding: 0 22px; font-size: 14.5px; } .clay-modal-foot .clay-btn-cancel { height: 44px; padding: 0 18px; } @media (max-width: 560px) { .clay-modal-grid { grid-template-columns: 1fr; } } /* ---- combobox (Ledged pop-up: Document Type / Case type · Grade) ---------- Free-text input with an always-visible faded caret matching the box, plus a suggestion list that drops BELOW the field, scrolls when long, and stays inside the modal (positioned relative to the field, not teleported). */ .clay-combo-wrap { position: relative; } /* leave room for the caret so typed text never runs under it */ .clay-root .clay-combo-input { padding-right: 40px; } .clay-combo-caret { position: absolute; top: 0; right: 0; height: 44px; width: 38px; /* matches .clay-field-input height */ display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--lw-text-4); /* faded — same tone as the native select chevron */ cursor: pointer; transition: color .12s; } .clay-combo-caret:hover { color: var(--lw-text-3); } .clay-combo-caret svg { width: 14px; height: 14px; transition: transform .15s ease; } .clay-combo-caret.is-open svg { transform: rotate(180deg); } .clay-combo-list { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 40; max-height: 232px; overflow-y: auto; /* scrollbar when the list is long */ padding: 5px; list-style: none; background: var(--lw-surface); border: 1px solid var(--lw-border); border-radius: 12px; box-shadow: 0 16px 34px -14px rgba(70, 80, 100, .38); } .clay-combo-opt { padding: 8px 11px; border-radius: 8px; font-size: 14px; color: var(--lw-text-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clay-combo-opt:hover { background: var(--lw-surface-2); color: var(--lw-text); } .clay-combo-opt.is-active { background: var(--lw-accent-soft); color: var(--lw-accent-soft-text); font-weight: 700; } /* ---- "Push & notify" email composer popup --------------------------------- */ .clay-modal-email { width: min(1200px, 100%); } .clay-composer-errors { margin-bottom: 16px; border-radius: 12px; padding: 10px 14px; background: var(--t-rose-bg, #fef2f2); color: var(--t-rose-text, #b91c1c); box-shadow: inset 0 0 0 1px var(--t-rose-ring, rgba(190, 24, 60, .25)); font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 3px; } /* Recipient chips — an editable "to" box that grows with the address list. */ .clay-recip-box { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 46px; padding: 8px 10px; border-radius: 12px; background: var(--lw-surface); border: 1px solid var(--lw-border); } .clay-recip-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; border-radius: 999px; background: var(--lw-accent-soft, #efeafe); color: var(--lw-text); font-size: 13px; font-weight: 600; line-height: 1; } .clay-recip-x { display: grid; place-items: center; width: 18px; height: 18px; border: none; border-radius: 999px; cursor: pointer; background: rgba(0, 0, 0, .06); color: var(--lw-text-2); transition: background .12s, color .12s; } .clay-recip-x:hover { background: rgba(0, 0, 0, .14); color: var(--lw-text); } .clay-recip-input { flex: 1; min-width: 160px; border: none; outline: none; background: transparent; font-size: 14px; color: var(--lw-text); padding: 4px 2px; } .clay-recip-input::placeholder { color: var(--lw-text-4); } /* Quill inside the clay modal — square the theme's corners to the field radius. */ .clay-modal-email .ql-toolbar.ql-snow { border: 1px solid var(--lw-border); border-bottom: none; border-radius: 12px 12px 0 0; background: var(--lw-surface); } .clay-modal-email .ql-container.ql-snow { border: 1px solid var(--lw-border); border-radius: 0 0 12px 12px; /* Match WAM's real emails (Aptos), with fallbacks that ship a semibold so the body's font-weight:600 renders. Kept in step with EMAIL_BODY_FONT in ledge/services.py, which wraps the sent email in the same stack (Quill spans don't carry a font-family). */ font-family: Aptos, "Segoe UI", system-ui, -apple-system, sans-serif; } .clay-modal-email #email-editor { min-height: 200px; max-height: 42vh; overflow-y: auto; } .clay-modal-email .ql-editor { font-size: 14.5px; line-height: 1.55; } /* Give the custom font / size picker items readable labels (Quill only ships labels for its own defaults; our whitelists need their own ::before content). */ .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before { content: "Arial"; font-family: Arial; } .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Georgia"]::before, .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Georgia"]::before { content: "Georgia"; font-family: Georgia; } .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times New Roman"]::before, .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times New Roman"]::before { content: "Times"; font-family: "Times New Roman"; } .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Courier New"]::before, .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Courier New"]::before { content: "Courier"; font-family: "Courier New"; } .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Verdana"]::before, .clay-modal-email .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Verdana"]::before { content: "Verdana"; font-family: Verdana; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8pt"]::before { content: "8"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9pt"]::before { content: "9"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10pt"]::before { content: "10"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11pt"]::before { content: "11"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12pt"]::before { content: "12"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14pt"]::before { content: "14"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16pt"]::before { content: "16"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18pt"]::before { content: "18"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20pt"]::before { content: "20"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24pt"]::before { content: "24"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28pt"]::before { content: "28"; } .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36pt"]::before, .clay-modal-email .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36pt"]::before { content: "36"; } /* ---- Kanban board view ---------------------------------------------------- */ .clay-board { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; min-height: 420px; } .clay-board-col { /* Share the row equally: grow to fill the width, never shrink below a readable minimum (horizontal scroll kicks in only when it truly won't fit). */ flex: 1 0 220px; min-width: 0; min-height: 120px; display: flex; flex-direction: column; gap: 10px; } .clay-board-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--t-bg); color: var(--t-text); box-shadow: inset 0 0 0 1px var(--t-ring); } .clay-board-col-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--t-solid); } .clay-board-col-label { flex: 1; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; } .clay-board-col-count { font-size: 11px; font-weight: 800; opacity: .75; } .clay-board-col-body { display: flex; flex-direction: column; gap: 10px; min-height: 48px; } .clay-board-empty { padding: 18px 12px; border-radius: 12px; text-align: center; font-size: 12px; font-weight: 600; color: var(--lw-text-4); background: var(--lw-surface-2); border: 1px dashed var(--lw-border); } .clay-board-card { display: flex; flex-direction: column; gap: 10px; padding: 13px 13px 12px; border-radius: 12px; background: var(--lw-surface); border: 1px solid var(--lw-border); box-shadow: var(--lw-shadow); transition: transform .12s, box-shadow .12s, border-color .12s; } .clay-board-card:hover { transform: translateY(-1px); border-color: var(--lw-text-4); box-shadow: 0 6px 16px -8px rgba(70, 80, 100, .28); } .clay-board-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .clay-board-card-due { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .clay-board-card-date { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--lw-text-2); } .clay-board-card-date.is-overdue { color: var(--lw-overdue); } .clay-board-card-date.is-today { color: var(--lw-today); } .clay-board-card-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 6px; font-size: 9.5px; font-weight: 800; background: var(--t-bg); color: var(--t-text); box-shadow: inset 0 0 0 1px var(--t-ring); } .clay-board-card-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--lw-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .clay-board-card-title:hover { color: var(--lw-accent); } .clay-board-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; } .clay-board-card-owner { display: flex; align-items: center; gap: 7px; min-width: 0; } .clay-board-card-owner-name { font-size: 11.5px; font-weight: 600; color: var(--lw-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clay-board-card-comments { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 10px; font-weight: 700; color: var(--lw-text-4); } .clay-board-card .clay-badge { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; height: 21px; padding: 0 8px; } /* ---- htmx loading indicator ----------------------------------------------- */ .htmx-indicator { opacity: 0; transition: opacity .2s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* ============================================================================ HEADBOARD — a neutral white hero card at the top of the results column. Same soft --lw-surface on every scope (no per-scope colour). The scope switcher (Same Day / Next Day / Filed) sits above it and reuses .clay-seg-hero; the Grid/Board view switch lives inside it on the right. The ring shows today's filing completion and is re-rendered out-of-band on row mutations. See _headboard.html and _headboard_ring.html. ============================================================================ */ /* whole header is centred on the page */ .clay-root .clay-headboard { display: flex; justify-content: center; margin: 0px 0 20px; } /* white card — a fixed, comfortable width (wider than its content so the three body zones can breathe, but deliberately narrower than the full-width table so it doesn't read as an elongated bar). Centred by the parent. The scope tabs are lifted above its top edge like a crown (see .clay-hb-scope). */ .clay-root .clay-hb-card { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 1600px; padding: 40px 40px 20px; border-radius: 20px; background: var(--lw-surface); border: 1px solid var(--lw-border); box-shadow: 0 16px 34px -20px rgba(60, 70, 95, .32), 0 2px 5px rgba(60, 70, 95, .05); } /* scope switcher — the four peer views, centred and bulging up above the card's top edge (a "crown"), still attached to it. Raised with its own shadow. */ .clay-root .clay-hb-scope { position: absolute; top: 0; left: 50%; transform: translate(-50%, -62%); display: flex; justify-content: center; z-index: 2; } .clay-root .clay-hb-scope .clay-seg { background: var(--lw-surface); box-shadow: 0 10px 22px -9px rgba(60, 70, 95, .4), 0 2px 6px rgba(60, 70, 95, .08); } /* body row, three zones: left lead (ring + title/date) · flexible centre (stage summary) · right controls. The centre grows to fill the width so nothing floats. */ .clay-root .clay-hb-body { display: flex; align-items: center; gap: 28px; } /* left zone: ring + title/date. Natural width — the centre zone takes the slack. */ .clay-root .clay-hb-lead { flex: none; min-width: 0; display: flex; align-items: center; gap: 18px; } /* centre zone: stage summary (or the sub line) — grows and centres in the gap between the title and the controls so the card fills instead of leaving a hole. */ .clay-root .clay-hb-mid { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; } .clay-root .clay-hb-lead-text { min-width: 0; display: flex; flex-direction: column; gap: 7px; } .clay-root .clay-hb-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .clay-root .clay-hb-title { margin: 0; font-size: 27px; font-weight: 900; letter-spacing: -.03em; line-height: 1.02; color: var(--lw-text); } .clay-root .clay-hb-date { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: 13px; font-weight: 800; color: var(--src-tint); background: color-mix(in srgb, var(--src-tint) 9%, var(--lw-surface)); border: 1px solid color-mix(in srgb, var(--src-tint) 22%, transparent); transition: color .3s, background .3s, border-color .3s; } .clay-root .clay-hb-date svg { opacity: .9; } .clay-root .clay-hb-sub { margin: 0; font-size: 13px; font-weight: 600; color: var(--lw-text-3); } .clay-root .clay-hb-sub strong { color: var(--lw-text); font-weight: 800; } /* Action KPIs — the four things needing action now, each a filter link with a big urgency number over a toned label. Empty metrics dim (.is-zero); the active filter is tinted (.is-active). --t-* come from the .tone-* class on each link. */ .clay-root .clay-hb-kpis { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; min-width: 220px; } /* Rec/RTX route KPIs — only three chips (All / Ledged / Pending). Spread them well apart and pull the group toward the left of the centre zone (margin-right:auto) rather than dead-centre. The chips are