" label
between the Edit button and the Ask-DrawIQ sort hint on the master
row of both surfaces. Muted gray, similar weight to the hint above
so it reads as tertiary chrome. Hide-in-edit-mode is JS-driven via
sortIndicator.hidden = true in editable_table.js, matching the
sort-hint pattern (.hidden attribute does display: none). */
.active-sort-indicator {
font-size: 0.8125rem;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
/* Coral arrival pulse applied to #copilot-panel for ~1.2s after the
hint is clicked. The 0% and 100% frames keep the panel's existing
-4px 0 16px depth shadow constant; the second comma-value ring
(0 0 0 6px coral) fades opacity 0 → 0.55 → 0 over each 600ms cycle,
2 cycles total. animation-iteration-count: 2 → 1.2s wall-clock,
then JS removes the class. box-shadow does not shift layout, so the
panel's slide-in (transform transition) and the pulse coexist
cleanly. rgba literal matches --color-accent-vibrant (#FF3158). */
@keyframes copilot-arrival-pulse {
0%, 100% {
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1),
0 0 0 0 rgba(255, 49, 88, 0);
}
50% {
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1),
0 0 0 6px rgba(255, 49, 88, 0.55);
}
}
.copilot-arrival-pulse {
animation: copilot-arrival-pulse 600ms ease-in-out 2;
}
/* Edit-mode visual on the items region. A 3px top accent strip
appears (border-top color flips from transparent), background
gets a subtle tint, and the items table's hover state is
suppressed so it doesn't compete with the per-cell affordances
below. The transition gives ~150ms ease so the mode change reads
as a deliberate state shift, not a flicker. */
/* Bundle B Phase 4 (2026-05-29) — generalized the edit-mode region
selector to [data-editable-table-surface] so the same styles apply
to BOTH #estimate-items-region (estimate surface) AND #pl-items-
region (price-list surface) without duplicating rules. */
[data-editable-table-surface] {
border-top: 3px solid transparent;
padding-top: 0;
transition: border-color 150ms ease, background 150ms ease;
}
[data-editable-table-surface].is-editing {
border-top-color: var(--color-accent-vibrant, #FF3158);
background: var(--color-surface-alt);
}
[data-editable-table-surface].is-editing .data-table tbody tr:hover {
background: transparent; /* per-cell affordance takes over */
}
/* Editable cells in edit mode — hover affordance: a subtle outline
appears + the text cursor signals "click to edit." Border-on-
hover is the discoverability cue Phase 2 turns into an input
swap. The current text color stays so the value remains
readable while hovering. */
.is-editing .data-table td.cell-editable {
cursor: text;
transition: box-shadow 100ms ease;
}
.is-editing .data-table td.cell-editable:hover {
box-shadow: inset 0 0 0 1px var(--color-text-primary);
background: white;
}
/* Locked cells in edit mode — visibly dimmed + not-allowed cursor
signals "this column can't be edited here." block_code, type,
line_value, source_page on the estimate side; only line_value
ends up locked on the price-list side (Phase 4). */
.is-editing .data-table td.cell-locked {
color: var(--color-text-muted);
cursor: not-allowed;
opacity: 0.7;
}
.is-editing .data-table td.cell-locked .code-label {
/* The code chip's background contrast looked off against the
dimmed cell. Mute it together. */
opacity: 0.85;
}
/* Bundle B Phase 2 (2026-05-29) — input swap when a cell is opened
for editing. The is server-
rendered on every row (so Copilot DOM refresh keeps the lockstep)
but hidden until .is-editing. Same for the per-group "+ Add line"
row + the row-actions table header. */
.row-actions,
.row-actions-head,
.items-add-line-row {
display: none;
}
/* Phase 4: generalized — applies to both estimate + PL surfaces. */
[data-editable-table-surface].is-editing .row-actions,
[data-editable-table-surface].is-editing .row-actions-head,
[data-editable-table-surface].is-editing .items-add-line-row {
display: table-cell;
}
[data-editable-table-surface].is-editing .items-add-line-row {
display: block;
padding: var(--space-sm) var(--space-md);
border-top: 1px solid var(--color-border-subtle);
background: var(--color-surface-alt);
}
[data-editable-table-surface].is-editing td.row-actions {
text-align: right;
white-space: nowrap;
padding-right: var(--space-md);
}
/* Per-row × and + and Undo buttons. Small + unobtrusive at rest,
coral on hover for the destructive (×) and accent for duplicate
(+). The Undo state is a single button replacing both. */
.row-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
background: white;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
margin-left: 4px;
transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.row-action-btn:hover { color: var(--color-text-primary); }
.row-action-btn--del:hover {
background: var(--color-error);
border-color: var(--color-error);
color: white;
}
.row-action-btn--dup:hover {
background: var(--color-text-primary);
border-color: var(--color-text-primary);
color: white;
}
.row-action-btn--undo {
font-size: 0.8125rem;
padding: 0 var(--space-sm);
color: var(--color-text-primary);
}
.row-action-btn--undo:hover {
background: var(--color-surface-alt);
}
/* Pending-delete row — dim + strikethrough. The cells stay readable
but visually telegraph "this row is going away." Undo button (in the
row-actions cell) restores. */
.is-editing .data-table tr.row--pending-delete td {
text-decoration: line-through;
color: var(--color-text-muted);
background: rgba(214, 36, 36, 0.04);
}
.is-editing .data-table tr.row--pending-delete td.row-actions {
text-decoration: none; /* the Undo button shouldn't be struck-through */
}
/* Pending-new row — slightly stronger tint than .row--pending to
distinguish "I just added this" from "I edited an existing row." */
.is-editing .data-table tr.row--pending-new {
background: rgba(255, 49, 88, 0.08);
}
.cell-empty-placeholder {
color: var(--color-text-muted);
font-style: italic;
}
/* Empty-state type-picker label + spacing for the master row's
"+ Add first line:" prefix. */
.items-edit-master__empty-label {
font-weight: 500;
color: var(--color-text-primary);
margin-right: var(--space-sm);
}
.code-label {
font-family: var(--font-mono);
font-size: 0.8125rem;
background: var(--color-surface-alt);
border: 1px solid var(--color-border-default);
border-radius: 3px;
padding: .1em .4em;
color: var(--color-text-primary);
white-space: nowrap;
}
/* VDP Step 13 (2026-05-17 → 18): the legacy .badge + 4 variants
block was deleted here. Replaced by .estimate-status-badge
(Step 10) — same pale-bg + deep-text pattern with modern tokens
+ dot prefix. Verified zero template/JS consumers before delete. */
/* =========================================================
UPLOAD ZONE
========================================================= */
/* VDP Step 13 — alias → canonical token migration. The hover/drag
accent is now --color-text-primary (black, restrained) instead of
--blue alias; --picked stays --color-success (visible confirmation
of a valid PDF selected). */
.upload-zone {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-xl);
border: 2px dashed var(--color-border-default);
border-radius: var(--radius);
cursor: pointer;
transition: border-color .15s, background .15s;
user-select: none;
}
.upload-zone:hover,
.upload-zone--drag { border-color: var(--color-text-primary); background: var(--color-surface-alt); }
.upload-zone--picked { border-color: var(--color-success); background: var(--color-success-bg); }
.upload-zone__icon { color: var(--color-text-muted); flex-shrink: 0; }
.upload-zone__text { display: flex; flex-direction: column; gap: var(--space-xs); }
.upload-zone__primary { font-weight: 500; color: var(--color-text-primary); }
.upload-zone__secondary { font-size: 0.8125rem; color: var(--color-text-muted); }
.upload-filename { font-size: 0.875rem; color: var(--color-success); font-weight: 500; margin-top: var(--space-sm); min-height: 1.2em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* VDP Step 13 (2026-05-17 → 18): the legacy .thumb-card* block
(CabinetIQ-ported pre-Step-8 thumbnail grid) was deleted here.
Replaced by .preview-thumb* (Step 8) — orientation-aware,
asymmetric grid, sparkle-icon checkbox, modern tokens. Verified
zero template/JS consumers before delete.
The legacy .preview-toolbar* block (pre-Step-8 estimate-preview
toolbar with sticky position + space-between layout) was also
deleted here. Replaced by .preview-pages__toolbar +
.preview-thumb-grid (Step 8). Verified zero consumers. */
/* =========================================================
PROGRESS BAR
VDP Step 9 (2026-05-15): tokens migrated to the new
design system. Class names preserved so analyzing.html's
JS (progress-fill width, aria-valuenow, etc.) keeps
working without modification.
========================================================= */
.progress-bar {
height: 8px;
background: var(--color-border-default);
border-radius: var(--radius-pill);
overflow: hidden;
}
.progress-bar__fill {
height: 100%;
background: var(--color-accent);
border-radius: var(--radius-pill);
transition: width .4s ease;
}
.progress-label {
font-size: 1rem;
font-weight: 500;
color: var(--color-text-primary);
min-height: 1.4em;
}
/* =========================================================
PER-PAGE STATUS LIST
VDP Step 9: token migration in-place. Dot state class
names (--waiting / --done / --sparse / --error) are
contracted with analyzing.js — NEVER rename them.
========================================================= */
.page-status-list {
text-align: left;
display: flex;
flex-direction: column;
gap: 2px;
}
.page-status {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: 0.875rem;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
background: transparent;
transition: background-color 0.1s ease-out;
}
.page-status:hover { background: var(--color-surface-alt); }
.page-status__dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
transition: background .2s;
}
/* Dot state classes — JS-contracted names. */
.page-status__dot--waiting { background: var(--color-text-muted); }
.page-status__dot--done { background: var(--color-success); }
.page-status__dot--sparse { background: var(--color-warning); }
.page-status__dot--error { background: var(--color-error); }
.page-status__label {
font-weight: 500;
min-width: 60px;
color: var(--color-text-primary);
}
.page-status__result {
color: var(--color-text-muted);
font-size: 0.8125rem;
margin-left: auto;
}
/* =========================================================
SUMMARY CARDS
VDP Step 10 (2026-05-17): token migration in-place. The shape
(.summary-cards > .summary-card[--total]) is mirrored inside
copilot_dom_refresh.js, so class names stay; colors migrate to
the new system. The Total card was navy-bordered in V1;
Matterport-restrained palette uses a slightly heavier border
weight instead of color emphasis.
========================================================= */
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
margin: var(--space-xl) 0 0;
}
.summary-card {
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
padding: var(--space-lg);
}
.summary-card--total {
border-color: var(--color-border-strong);
}
.summary-card__label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-text-muted);
margin-bottom: var(--space-xs);
}
.summary-card__value {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.summary-card--total .summary-card__value {
font-size: 1.75rem;
font-weight: 700;
}
.summary-card--total .summary-card__value { color: var(--color-accent); }
/* =========================================================
PASSWORD STRENGTH METER
========================================================= */
.pwd-strength {
margin-top: var(--space-sm);
}
.pwd-strength__bar {
height: 4px;
background: var(--color-border-default);
border-radius: 2px;
overflow: hidden;
margin-bottom: var(--space-xs);
}
.pwd-strength__fill {
height: 100%;
border-radius: 2px;
width: 0%;
transition: width 0.3s ease, background 0.3s ease;
}
.pwd-strength__fill--weak { width: 33%; background: var(--color-error); }
.pwd-strength__fill--medium { width: 66%; background: var(--color-warning); }
.pwd-strength__fill--strong { width: 100%; background: var(--color-success); }
.pwd-strength__label {
font-size: 0.75rem;
font-weight: 600;
min-height: 1.2em;
margin-bottom: var(--space-sm);
}
.pwd-strength__label--weak { color: var(--color-error); }
.pwd-strength__label--medium { color: var(--color-warning); }
.pwd-strength__label--strong { color: var(--color-success); }
/* Password requirements list — VDP Step 3 visual fix.
- 4px (--space-xs) gap between items horizontally + vertically
- 14px text (--text-body-small) instead of 12.5px for legibility
- 10px circle icons (was 8px) for better presence
- Text stays gray on match; the COLOR cue is the icon green-fill, so
unmet items still read at the same gray contrast as met items.
- At >=768px the list splits into 2 columns (5 reqs distribute 3+2)
so it doesn't dominate the form vertically. Per VDP Step 3 user
clarification. */
.pwd-requirements {
list-style: none;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xs);
margin: var(--space-sm) 0 0 0;
padding: 0;
}
@media (min-width: 768px) {
.pwd-requirements { grid-template-columns: 1fr 1fr; }
}
.pwd-req {
font-size: 0.875rem;
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: var(--space-sm);
line-height: 1.4;
transition: color 0.15s;
}
.pwd-req::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid var(--color-text-muted);
background: transparent;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.pwd-req--met {
color: var(--color-text-secondary);
}
.pwd-req--met::before {
background: var(--color-success);
border-color: var(--color-success);
}
/* =========================================================================
PRICE LIST VIEW TOGGLE (detail.html)
========================================================================= */
.pl-view-toolbar {
display: flex;
gap: .5rem;
align-items: center;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
/* Active state on the price-list view toggle. Overrides the subtle
hover/active states from .btn-secondary--subtle so the active toggle
reads as a filled-dark button (clear contrast with inactive). */
.pl-view-btn.is-active {
background: var(--color-accent);
color: var(--color-text-inverse);
border-color: var(--color-accent);
}
.pl-view-btn.is-active:hover {
background: var(--color-accent-hover);
color: var(--color-text-inverse);
border-color: var(--color-accent-hover);
}
.pl-view {
display: none;
}
.pl-view.is-active {
display: block;
}
.pl-view-saved-msg {
color: var(--color-success);
font-size: .85rem;
margin-left: .5rem;
}
/* =========================================================================
SETTINGS PAGE — sub-tab nav + body
========================================================================= */
/* VDP Step 12 (2026-05-17): token migration in-place + new classes
for the per-page H2 title, sidebar separator (workspace/billing
grouping), and Usage stat row. Mobile breakpoint bumped to 768px
for system consistency with Steps 7/8/10/11. */
.settings-shell {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--space-xl);
align-items: start;
}
.settings-tabs {
display: flex;
flex-direction: column;
gap: 2px;
position: sticky;
top: var(--space-md);
}
.settings-tab {
display: block;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
border-left: 2px solid transparent;
transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
.settings-tab:hover {
background: var(--color-surface-alt);
color: var(--color-text-primary);
text-decoration: none;
}
.settings-tab.is-active {
background: var(--color-surface-alt);
color: var(--color-text-primary);
font-weight: 600;
border-left-color: var(--color-text-primary);
}
/* Visual divider between the Workspace group (Account/Prefs/Company)
and the Billing group (Usage/Subscription). Subtle 1px line, no
label — telegraphs the grouping without heading clutter. */
.settings-tab--separator {
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-sm) var(--space-sm);
border: 0;
padding: 0;
}
.settings-body {
min-width: 0; /* allow flex children to shrink correctly */
}
/* Usage page stat row (label above value) — refreshed from the prior
inline "Total analyses run: N " paragraph. */
.settings-stat-row {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.settings-stat-row__label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.settings-stat-row__value {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
/* Subtle divider between logical field groups inside a panel.
Used on Company page between identity fields and the new tax
disclaimer field. */
.settings-section-divider {
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-lg) 0;
border: 0;
}
/* FASE 4 — currency symbol-position radios (Settings → Company). */
.currency-position-group {
display: flex;
gap: var(--space-md);
align-items: center;
}
.currency-position-option {
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (max-width: 768px) {
.settings-shell {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.settings-tabs {
flex-direction: row;
flex-wrap: wrap;
position: static;
gap: var(--space-xs);
}
.settings-tab {
border-left: none;
border-bottom: 2px solid transparent;
}
.settings-tab.is-active {
border-bottom-color: var(--color-text-primary);
border-left-color: transparent;
}
/* The workspace/billing visual divider doesn't make sense in a
horizontal-wrap layout — hide it on mobile. */
.settings-tab--separator { display: none; }
}
/* Logo in topbar — replaces the D-mark when tenant has uploaded one */
.app-topbar__logo-img {
max-height: 32px;
max-width: 140px;
object-fit: contain;
}
/* Subscription tier cards (Settings → Subscription).
VDP Step 12 (2026-05-17): token migration in-place + current-plan
border switched to explicit --color-text-primary per Phase A Q4.
Matterport-restrained palette (no coral, no brand alias). */
.tier-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-lg);
}
.tier-card {
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
padding: var(--space-lg);
background: var(--color-surface);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.tier-card--current {
border-color: var(--color-text-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-text-primary), transparent 88%);
}
.tier-card__name { font-size: 1rem; color: var(--color-text-primary); font-weight: 600; }
.tier-card__price { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); margin: var(--space-xs) 0; font-variant-numeric: tabular-nums; }
.tier-card__blurb { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; flex: 1; margin-bottom: var(--space-md); }
.tier-card__includes { color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.4; margin: 0 0 var(--space-sm); }
/* (Former Day 15a "DESTRUCTIVE BUTTON" section consolidated into the
main BUTTONS section above in VDP Step 4. .btn-danger now has a full
state matrix and red focus ring alongside the rest of the button
variants.) */
/* =========================================================
DAY 15a — "More actions" dropdown (native )
========================================================= */
.more-actions {
position: relative;
margin: 0;
}
/* Hide the default disclosure triangle on the summary */
.more-actions__summary {
list-style: none;
cursor: pointer;
user-select: none;
}
.more-actions__summary::-webkit-details-marker { display: none; }
.more-actions__summary::marker { content: ''; }
.more-actions__menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 180px;
margin: 0;
padding: 4px;
list-style: none;
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
z-index: 60; /* above sticky footer (z=50) */
}
/* VDP Step 10 (2026-05-17): upward variant for dropdowns anchored
in the sticky footer. Flips vertical positioning (bottom: 100%+gap
instead of top: 100%+gap) and inverts the shadow direction so the
visual lift points upward. Applied via class on the menu — the
sticky-footer template sets it; other consumers (header dropdowns)
keep default downward open. */
.more-actions__menu--up {
top: auto;
bottom: calc(100% + 4px);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.more-actions__item {
display: block;
width: 100%;
text-align: left;
background: transparent;
color: var(--color-text-primary);
/* Menu items can be OR (e.g. the Export CSV downloads).
Anchors otherwise inherit the global a:hover underline — suppress it
here (+ on :hover, which must out-specify a:hover) so every item
behaves the same: gray-bg hover, no underline. */
text-decoration: none;
border: none;
padding: var(--space-sm) var(--space-md);
font: inherit;
font-size: 0.875rem;
font-family: var(--font-sans);
border-radius: 4px;
cursor: pointer;
}
.more-actions__item:hover {
background: var(--color-border-default); /* #E5E5E5 — clear hover, was --color-surface-alt #FAFAFA (too light) */
text-decoration: none;
}
/* VDP Step 10 — destructive variant (red text, error-bg hover).
Mirrors .estimates-kebab-item--danger from Step 7. */
.more-actions__item--danger {
color: var(--color-error);
}
.more-actions__item--danger:hover {
background: var(--color-error-bg);
color: var(--color-error);
}
/* =========================================================
DAY 15a — Re-analyze PDF confirmation dialog ()
========================================================= */
/* VDP Step 13 (2026-05-17 → 18): in-place token migration. Class
names preserved — JS contracts (#reanalyze-dialog, #cancel-reanalyze,
etc.) untouched. Backdrop uses the canonical --color-overlay-darker. */
.reanalyze-dialog {
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
padding: 0;
background: var(--color-surface);
color: var(--color-text-primary);
box-shadow: var(--shadow-lg);
max-width: min(440px, 92vw);
font: inherit;
}
.reanalyze-dialog::backdrop {
background: var(--color-overlay-darker);
}
.reanalyze-dialog form {
padding: var(--space-xl) var(--space-xl) var(--space-lg);
margin: 0;
}
.reanalyze-dialog__title {
margin: 0 0 var(--space-md) 0;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-text-primary);
}
.reanalyze-dialog__body {
color: var(--color-text-secondary);
font-size: 0.875rem;
margin: 0 0 var(--space-lg) 0;
line-height: 1.5;
}
.reanalyze-dialog__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 20px;
}
/* =========================================================
DAY 15a — Copilot edit toast (top-right of viewport)
========================================================= */
.copilot-toast-container {
position: fixed;
top: 24px;
right: 24px;
z-index: 1002; /* above launcher (1000), below panel header */
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none; /* container is invisible; toasts re-enable */
}
/* VDP Step 13 — token migration in-place. Left-border accent uses
--color-accent (black) instead of the dead --brand/#4361EE coral-
era blue. Refresh button uses the system primary recipe. */
.copilot-toast {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
background: var(--color-surface);
color: var(--color-text-primary);
border: 1px solid var(--color-border-default);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
font-size: 0.875rem;
box-shadow: var(--shadow-md);
pointer-events: auto;
transform: translateX(20px);
opacity: 0;
transition: transform 180ms ease-out, opacity 180ms ease-out;
}
.copilot-toast--open {
transform: translateX(0);
opacity: 1;
}
.copilot-toast__icon {
font-size: 1.1rem;
}
.copilot-toast__text {
flex: 0 1 auto;
}
.copilot-toast__refresh {
background: var(--color-accent);
color: var(--color-accent-text);
border: none;
border-radius: var(--radius-pill);
padding: 4px var(--space-md);
font: inherit;
font-size: 0.8125rem;
cursor: pointer;
}
.copilot-toast__refresh:hover {
background: var(--color-accent-hover);
}
.copilot-toast__close {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1.2rem;
line-height: 1;
padding: 0 4px;
}
.copilot-toast__close:hover {
color: var(--color-text-primary);
}
@media (prefers-reduced-motion: reduce) {
.copilot-toast { transition: none !important; }
}
@media (max-width: 640px) {
.copilot-toast-container {
top: 16px;
right: 16px;
left: 16px;
}
.copilot-toast { width: 100%; }
}
/* =========================================================
DAY 15b commit 1 — Preview modal for LARGE Copilot tools
========================================================= */
/* VDP Step 13 — token migration in-place. Class names preserved
(JS contracts: #preview-dialog, #close-preview-dialog, etc.). */
.preview-dialog {
/* Centering: see global `dialog[open] { margin: auto }` rule near
.visually-hidden (Bundle Estética/UX item 1, 2026-05-31). */
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
padding: 0;
background: var(--color-surface);
color: var(--color-text-primary);
box-shadow: var(--shadow-lg);
max-width: min(720px, 92vw);
max-height: 80vh;
font: inherit;
overflow: hidden; /* inner element handles scroll */
}
.preview-dialog::backdrop {
background: var(--color-overlay-darker);
}
.preview-dialog__inner {
display: flex;
flex-direction: column;
max-height: 80vh; /* matches dialog cap */
}
.preview-dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--color-border-subtle);
flex: 0 0 auto;
}
.preview-dialog__title {
margin: 0;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-text-primary);
}
.preview-dialog__close {
background: transparent;
border: none;
font-size: 1.5rem;
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
padding: 0 6px;
border-radius: 4px;
}
.preview-dialog__close:hover { color: var(--color-text-primary); }
.preview-dialog__body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--space-lg) var(--space-xl);
max-height: 60vh;
}
.preview-dialog__error {
margin: 0 var(--space-xl) var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-error-bg);
border: 1px solid color-mix(in srgb, var(--color-error), white 75%);
color: var(--color-error);
border-radius: var(--radius-sm);
font-size: 0.875rem;
flex: 0 0 auto;
}
.preview-dialog__error[hidden] { display: none; }
.preview-dialog__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl) var(--space-lg);
border-top: 1px solid var(--color-border-subtle);
flex: 0 0 auto;
}
/* Totals header — shown above the diff table */
.preview-totals-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px var(--space-lg);
padding: var(--space-md) var(--space-lg);
background: var(--color-surface-alt);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
margin-bottom: var(--space-lg);
font-size: 0.875rem;
}
.preview-totals-header__label { color: var(--color-text-muted); }
.preview-totals-header__value {
text-align: right;
font-variant-numeric: tabular-nums;
}
.preview-totals-header__value--total { font-weight: 600; color: var(--color-text-primary); }
.preview-totals-header__arrow { color: var(--color-text-muted); margin: 0 4px; }
.preview-totals-header__new { color: var(--color-success); font-weight: 500; }
/* Value-diff table (4 LARGE tools) */
.preview-value-diff {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.preview-value-diff thead th {
text-align: left;
font-weight: 600;
color: var(--color-text-muted);
padding: 8px 10px;
border-bottom: 1px solid var(--color-border-default);
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.preview-value-diff tbody td {
padding: 8px 10px;
border-bottom: 1px solid var(--color-border-default);
vertical-align: top;
}
.preview-value-diff tbody tr:hover td { background: var(--color-surface-alt); }
.preview-value-diff__code { font-family: 'SF Mono', Menlo, monospace; font-size: 0.8125rem; }
.preview-value-diff__desc { color: var(--color-text-muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-value-diff__current { text-align: right; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.preview-value-diff__after {
text-align: right;
font-variant-numeric: tabular-nums;
background: var(--color-success-bg);
color: #065F46;
font-weight: 500;
}
.preview-value-diff__after--unchanged {
background: transparent;
color: var(--color-text-muted);
font-weight: 400;
}
.preview-value-diff__footer-note {
padding: 10px 0 4px 0;
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-muted);
font-style: italic;
}
/* Generic / reorder-fallback */
.preview-generic {
padding: 24px 12px;
text-align: center;
}
.preview-generic__summary {
font-size: 1rem;
color: var(--color-text-primary);
margin-bottom: 12px;
}
.preview-generic__list {
list-style: none;
padding: 0;
margin: 12px auto 0 auto;
max-width: 420px;
text-align: left;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.preview-generic__list li {
padding: 4px 0;
border-bottom: 1px dashed var(--color-border-default);
}
.preview-generic__list li:last-child { border-bottom: none; }
/* ===========================================================================
Reorder diff renderer (Day 15b commit 2) — reorder_items LARGE tool
=========================================================================== */
.preview-reorder {
font-size: 0.875rem;
}
.preview-reorder__header {
padding: 10px 12px;
background: var(--color-surface-alt);
border-radius: var(--radius-sm);
margin-bottom: 8px;
color: var(--color-text-primary);
}
.preview-reorder__header-label {
color: var(--color-text-muted);
font-weight: 500;
}
.preview-reorder__header-value {
font-family: 'SF Mono', Menlo, monospace;
font-size: 0.8125rem;
}
.preview-reorder__header-direction {
color: var(--color-text-muted);
}
.preview-reorder__summary {
color: var(--color-text-muted);
font-size: 0.8125rem;
margin-bottom: 12px;
}
.preview-reorder__list {
list-style: none;
padding: 0;
margin: 0;
}
.preview-reorder__item {
display: grid;
grid-template-columns: 28px 80px 1fr;
gap: 12px;
padding: 6px 8px;
border-bottom: 1px solid var(--color-border-default);
align-items: center;
}
.preview-reorder__item:last-child { border-bottom: none; }
.preview-reorder__direction {
font-weight: 600;
font-size: 1.1rem;
text-align: center;
font-variant-numeric: tabular-nums;
}
.preview-reorder__position {
color: var(--color-text-muted);
font-family: 'SF Mono', Menlo, monospace;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
text-align: right;
}
.preview-reorder__desc {
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-reorder__item--up .preview-reorder__direction {
color: var(--color-success);
}
.preview-reorder__item--down .preview-reorder__direction {
/* --warning not yet in main.css (tracked in V2 polish backlog).
Inline amber fallback keeps the renderer working today; when the
token lands the renderer picks it up automatically. */
color: var(--warning);
}
.preview-reorder__item--unchanged {
opacity: 0.5;
}
.preview-reorder__item--unchanged .preview-reorder__direction {
color: var(--color-text-muted);
font-weight: 400;
}
.preview-reorder__footer-note {
padding: 10px 0 4px 0;
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-muted);
font-style: italic;
}
@media (max-width: 640px) {
.preview-reorder__item {
grid-template-columns: 24px 64px 1fr;
gap: 8px;
}
.preview-reorder__position { font-size: 0.75rem; }
}
/* Apply button spinner */
.preview-apply-spinner {
display: inline-block;
animation: preview-spin 0.8s linear infinite;
}
@keyframes preview-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.preview-apply-spinner { animation: none !important; }
}
@media (max-width: 640px) {
.preview-dialog { max-width: 100vw; max-height: 100vh; border-radius: 0; }
.preview-dialog__inner { max-height: 100vh; }
.preview-dialog__body { padding: 12px; }
.preview-value-diff__desc { max-width: 140px; }
}
/* ===========================================================================
Destructive confirmation dialog (Day 15b commit 4)
Wired by app/static/js/copilot.js (openConfirmDialog) when a DESTRUCTIVE
Copilot tool returns a confirmation_token via SSE. Visually distinct from
the LARGE preview-dialog: smaller (no large data table to show), red
accent border + ⚠ icon to signal irreversibility, no × close affordance
(force explicit Cancel-or-Confirm). Reuses the .copilot-undo-toast--error
red palette from commit 3 (visual-language consistency: red = destructive
or error). Backdrop click is a deliberate no-op — see openConfirmDialog
comment for rationale.
=========================================================================== */
/* VDP Step 13 — token migration in-place. Class names preserved
(JS contracts: #confirm-dialog, #confirm-destructive, etc.). */
.confirm-dialog {
/* Centering: see global `dialog[open] { margin: auto }` rule near
.visually-hidden (Bundle Estética/UX item 1, 2026-05-31).
Phase F polish: dropped the heavy 2px red frame for a clean 1px card —
severity now reads from the tidy icon badge + the red verb button, not an
alarming border. */
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
padding: 0;
width: min(440px, 92vw);
max-width: 440px;
font: inherit;
}
.confirm-dialog::backdrop {
background: var(--color-overlay-dark);
}
.confirm-dialog__inner {
padding: var(--space-xl) var(--space-xl) var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.confirm-dialog__icon {
/* Phase F polish: a tidy circular badge instead of a bare 2rem glyph. */
width: 44px;
height: 44px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-error-bg);
color: var(--color-error);
font-size: 1.375rem;
line-height: 1;
/* Subtle pulse on open. Honors prefers-reduced-motion below. */
animation: confirm-icon-pulse 0.4s ease-out;
}
.confirm-dialog__title {
margin: 0;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-text-primary);
text-align: center;
line-height: 1.4;
}
.confirm-dialog__warning {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.5;
text-align: center;
padding: 0 var(--space-sm);
}
/* In-modal error banner — appears when POST /api/copilot/confirm
returns 410 / 404 / 500 or network error. Same shape as the
preview-dialog__error. */
.confirm-dialog__error {
margin: 4px 0 0 0;
padding: var(--space-sm) var(--space-md);
background: var(--color-error-bg);
border: 1px solid color-mix(in srgb, var(--color-error), white 75%);
border-radius: var(--radius-sm);
color: var(--color-error);
font-size: 0.8125rem;
line-height: 1.4;
}
.confirm-dialog__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
margin-top: var(--space-sm);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-subtle);
}
/* Phase E (Price List Data Integrity, 2026-05-19). The CSV import
conflict modal wraps three forms (Cancel / Skip / Update); on
narrow viewports they stack vertically rather than crowding the
row. Each button stays full-width when stacked so the labels
stay readable. */
.confirm-dialog__actions--multi {
flex-wrap: wrap;
}
.confirm-dialog__actions--multi > form {
flex: 0 0 auto;
}
@media (max-width: 540px) {
.confirm-dialog__actions--multi {
flex-direction: column-reverse;
align-items: stretch;
}
.confirm-dialog__actions--multi > form {
width: 100%;
}
.confirm-dialog__actions--multi > form > .btn {
width: 100%;
}
}
/* Wider dialog variant for the CSV-conflict preview, which needs to
fit a 5-column table of changes. Caps at 720px so the modal still
feels contained, not a takeover. */
.confirm-dialog.confirm-dialog--wide {
width: min(720px, 95vw);
max-width: 720px;
}
/* =========================================================
PL CATEGORY MINI-MODAL — Estética/UX item #2 C-3.5 (2026-06-01)
Inline-editor type-cell picker. Replaces the failed in-cell
where the datalist popup works reliably + the category list
scales to many custom categories.
========================================================= */
.pl-cat-modal {
width: min(480px, 95vw);
max-width: 480px;
padding: 0;
border: none;
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-lg);
background: var(--color-bg);
}
.pl-cat-modal::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.pl-cat-modal__inner {
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.pl-cat-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.pl-cat-modal__title {
margin: 0;
font-size: 1.0625rem;
font-weight: 600;
}
.pl-cat-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pl-cat-modal__close:hover {
background: var(--color-surface-alt);
color: var(--color-text-primary);
border-color: var(--color-border-default);
}
.pl-cat-modal__close:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: 2px;
}
.pl-cat-modal__context {
margin: 0;
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-alt);
border-radius: var(--radius-sm);
font-size: 0.875rem;
color: var(--color-text-primary);
}
.pl-cat-modal__context-label {
color: var(--color-text-muted);
font-weight: 500;
margin-right: var(--space-xs);
}
.pl-cat-modal__field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.pl-cat-modal__field-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.pl-cat-modal__input {
height: var(--height-input);
padding: 0 var(--space-md);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 1rem;
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text-primary);
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.pl-cat-modal__input:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
.pl-cat-modal__hint {
margin: 0;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.pl-cat-modal__list-wrap {
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
max-height: 240px;
overflow-y: auto;
}
.pl-cat-modal__list-empty {
margin: 0;
padding: var(--space-md);
font-size: 0.875rem;
color: var(--color-text-muted);
text-align: center;
}
.pl-cat-modal__list-empty strong {
color: var(--color-text-primary);
font-weight: 600;
}
.pl-cat-modal__list {
list-style: none;
margin: 0;
padding: 0;
}
.pl-cat-modal__list-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
width: 100%;
padding: var(--space-sm) var(--space-md);
background: transparent;
border: none;
border-bottom: 1px solid var(--color-border-subtle);
text-align: left;
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--color-text-primary);
cursor: pointer;
transition: background 120ms ease;
}
.pl-cat-modal__list-item:last-child {
border-bottom: none;
}
.pl-cat-modal__list-item:hover,
.pl-cat-modal__list-item:focus-visible {
background: var(--color-surface-alt);
outline: none;
}
.pl-cat-modal__list-item.is-current {
background: color-mix(in srgb, var(--color-text-primary), white 95%);
font-weight: 500;
}
.pl-cat-modal__list-item-name {
flex: 1 1 auto;
}
.pl-cat-modal__list-item-current-marker {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-left: var(--space-xs);
}
.pl-cat-modal__list-item-count {
flex: 0 0 auto;
font-size: 0.8125rem;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.pl-cat-modal__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
}
/* =========================================================
EDITABLE-TABLE ERROR TOAST — Estética/UX item #2 C-5
(2026-06-01)
Visible validation-error surface for the inline editor.
Replaces the prior hover-only `title` tooltip on .cell-error,
which was invisible on touch devices. Toast appears above the
editable region when a save returns 400 with errors[]; per-cell
.cell-error markers remain as secondary detail on desktop.
========================================================= */
.editable-table-error-toast {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-md);
background: var(--color-error-bg);
color: var(--color-error);
border: 1px solid color-mix(in srgb, var(--color-error), white 70%);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
line-height: 1.4;
}
.editable-table-error-toast__text {
margin: 0;
flex: 1 1 auto;
/* Allow long messages with code/type names to wrap cleanly */
word-break: break-word;
}
.editable-table-error-toast__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: -4px -4px -4px 0; /* tighten visual + keep tap target */
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--color-error);
cursor: pointer;
font-size: 0.875rem;
line-height: 1;
transition: background 120ms ease, border-color 120ms ease;
}
.editable-table-error-toast__close:hover {
background: color-mix(in srgb, var(--color-error), white 85%);
border-color: color-mix(in srgb, var(--color-error), white 60%);
}
.editable-table-error-toast__close:focus-visible {
outline: 2px solid var(--color-error);
outline-offset: 2px;
}
/* =========================================================
MANAGE-CATEGORIES dialog — Estética/UX item #2 C-7b
(2026-06-01)
Central modal reached from the "Manage categories" button in
the PL detail header. Separate component from the pick-mode
.pl-cat-modal (per-cell picker); shares only the data blobs
+ title-casing helper. Three internal states (LIST / RENAME /
DELETE) swapped via [data-cmgmt-state] + the [hidden] attribute.
========================================================= */
.category-mgmt-dialog {
width: min(560px, 95vw);
max-width: 560px;
padding: 0;
border: none;
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-lg);
background: var(--color-bg);
}
.category-mgmt-dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.category-mgmt-dialog__inner {
padding: var(--space-lg);
}
.category-mgmt-dialog__panel {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.category-mgmt-dialog__panel[hidden] { display: none; }
.category-mgmt-dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.category-mgmt-dialog__title {
margin: 0;
font-size: 1.0625rem;
font-weight: 600;
}
.category-mgmt-dialog__title-target {
font-weight: 500;
color: var(--color-text-secondary);
}
.category-mgmt-dialog__back {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-sm);
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.875rem;
cursor: pointer;
font-family: var(--font-sans);
transition: color 120ms ease, background 120ms ease;
}
.category-mgmt-dialog__back:hover {
color: var(--color-text-primary);
background: var(--color-surface-alt);
}
.category-mgmt-dialog__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
flex-shrink: 0;
}
.category-mgmt-dialog__close:hover {
background: var(--color-surface-alt);
color: var(--color-text-primary);
border-color: var(--color-border-default);
}
.category-mgmt-dialog__close:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: 2px;
}
.category-mgmt-dialog__intro {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.45;
}
/* LIST: rows + per-row actions */
.category-mgmt-dialog__list {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
max-height: 320px;
overflow-y: auto;
}
.category-mgmt-dialog__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border-subtle);
font-size: 0.9375rem;
}
.category-mgmt-dialog__row:last-child { border-bottom: none; }
.category-mgmt-dialog__row-name {
flex: 1 1 auto;
font-weight: 500;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.category-mgmt-dialog__row-count {
flex: 0 0 auto;
font-size: 0.8125rem;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.category-mgmt-dialog__row-actions {
flex: 0 0 auto;
display: flex;
gap: var(--space-xs);
}
.category-mgmt-dialog__empty {
margin: 0;
padding: var(--space-md);
font-size: 0.875rem;
color: var(--color-text-muted);
text-align: center;
border: 1px dashed var(--color-border-default);
border-radius: var(--radius-sm);
}
.category-mgmt-dialog__placeholder {
margin: var(--space-md) 0;
padding: var(--space-md);
font-size: 0.875rem;
color: var(--color-text-muted);
background: var(--color-surface-alt);
border-radius: var(--radius-sm);
text-align: center;
}
/* RENAME state additions (C-7b-2) ------------------------------------ */
.category-mgmt-dialog__source-line {
margin: 0;
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-alt);
border-radius: var(--radius-sm);
font-size: 0.875rem;
color: var(--color-text-primary);
}
.category-mgmt-dialog__source-label {
color: var(--color-text-muted);
margin-right: var(--space-xs);
}
.category-mgmt-dialog__source-count {
color: var(--color-text-muted);
margin-left: var(--space-xs);
font-size: 0.8125rem;
}
.category-mgmt-dialog__field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.category-mgmt-dialog__field-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.category-mgmt-dialog__input {
height: var(--height-input);
padding: 0 var(--space-md);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 1rem;
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text-primary);
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.category-mgmt-dialog__input:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
.category-mgmt-dialog__hint {
margin: 0;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.category-mgmt-dialog__list-wrap {
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
max-height: 200px;
overflow-y: auto;
}
.category-mgmt-dialog__list--scrollable {
/* In rename/delete contexts the list lives inside .list-wrap which
gives it scroll + border. The base .category-mgmt-dialog__list
(in LIST state) is itself the scroll container. */
border: 0;
border-radius: 0;
max-height: none;
overflow: visible;
}
.category-mgmt-dialog__row--pickable {
cursor: pointer;
transition: background 120ms ease;
}
.category-mgmt-dialog__row--pickable:hover,
.category-mgmt-dialog__row--pickable:focus-visible {
background: var(--color-surface-alt);
outline: none;
}
.category-mgmt-dialog__list-empty {
margin: 0;
padding: var(--space-md);
font-size: 0.8125rem;
color: var(--color-text-muted);
text-align: center;
border-top: 1px solid var(--color-border-subtle);
}
.category-mgmt-dialog__warning {
margin: 0;
padding: var(--space-sm) var(--space-md);
font-size: 0.875rem;
line-height: 1.45;
background: var(--color-warning-bg, #fef6e7);
color: var(--color-warning, #8a5a00);
border: 1px solid color-mix(in srgb, var(--color-warning, #c98a00), white 70%);
border-radius: var(--radius-sm);
}
.category-mgmt-dialog__warning strong {
display: block;
margin-bottom: 2px;
font-weight: 600;
}
/* C-7b-2 FIX 1 (2026-06-01) — plain-language summary line above the
detailed merge-collision breakdown. Bolder weight + slight bottom
margin separates it visually from the detailed text below. */
.category-mgmt-dialog__warning-plain {
margin: 0 0 var(--space-sm) 0;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.45;
}
/* DELETE state additions (C-7b-3 — 2026-06-01) ----------------------- */
.category-mgmt-dialog__radio-group {
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
padding: var(--space-md);
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.category-mgmt-dialog__radio-group > .category-mgmt-dialog__field-label {
/* legend rendering — uppercase-style header above the options */
display: block;
margin-bottom: var(--space-xs);
padding: 0;
}
.category-mgmt-dialog__radio-option {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-xs) 0;
font-size: 0.9375rem;
color: var(--color-text-primary);
cursor: pointer;
}
.category-mgmt-dialog__radio-option input[type="radio"] {
margin-top: 3px; /* align with first line of label text */
flex-shrink: 0;
}
.category-mgmt-dialog__radio-label {
flex: 1 1 auto;
line-height: 1.4;
}
.category-mgmt-dialog__radio-detail {
margin: 0 0 var(--space-xs) var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.category-mgmt-dialog__select {
height: var(--height-input);
padding: 0 var(--space-md);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text-primary);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-md) center;
padding-right: var(--space-3xl);
}
.category-mgmt-dialog__select:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
/* Destructive variant of the warning block — red-tinted for cascade-
delete (vs amber for the rename/reassign merge-collision case). */
.category-mgmt-dialog__warning--destructive {
background: var(--color-error-bg);
color: var(--color-error);
border-color: color-mix(in srgb, var(--color-error), white 70%);
}
.category-mgmt-dialog__warning--destructive strong {
color: var(--color-error);
}
.category-mgmt-dialog__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
}
/* =========================================================
TYPE-PICKER button — Estética/UX item #2 C-4 (2026-06-01)
The item_form.html Type field is a button styled like a
normal field input + a caret, opening the shared category
mini-modal. Matches .field input height/border/padding for
visual consistency in the form. Hidden #type input adjacent
carries the actual submitted value.
========================================================= */
.type-picker {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
width: 100%;
height: var(--height-input);
padding: 0 var(--space-lg);
background: var(--color-bg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 1rem;
font-family: var(--font-sans);
color: var(--color-text-primary);
cursor: pointer;
text-align: left;
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.type-picker:hover {
border-color: var(--color-text-muted);
}
.type-picker:focus-visible {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
.type-picker__label {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.type-picker__caret {
flex: 0 0 auto;
color: var(--color-text-muted);
font-size: 0.875rem;
line-height: 1;
}
/* Scrollable preview area inside the wide CSV-conflict modal. Caps
table height so a 200-row collision doesn't push the action buttons
off-screen. */
.csv-conflict-preview {
max-height: 40vh;
overflow: auto;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
}
.csv-conflict-preview .data-table {
margin: 0;
}
/* Spinner inside the destructive verb button — mirrors
.preview-apply-spinner from commit 1. Same keyframe + same
speed (0.8s linear) for visual consistency across modals. */
.confirm-verb-spinner {
display: inline-block;
animation: confirm-verb-spin 0.8s linear infinite;
}
@keyframes confirm-verb-spin {
to { transform: rotate(360deg); }
}
@keyframes confirm-icon-pulse {
0% { transform: scale(0.8); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.confirm-dialog__icon { animation: none; }
.confirm-verb-spinner { animation: none !important; }
}
@media (max-width: 640px) {
.confirm-dialog {
width: 92vw;
max-width: none;
border-radius: var(--radius);
}
.confirm-dialog__inner { padding: 20px 18px 14px 18px; }
.confirm-dialog__title { font-size: 1rem; }
}
/* =========================================================
DAY 15b commit 1 — Undo toast (top-right, below edit toast)
========================================================= */
.copilot-undo-toast-container {
position: fixed;
top: 80px; /* below edit toast (top: 24px + ~48px height) */
right: 24px;
z-index: 1003; /* above panel (1001), above edit toast (1002) */
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.copilot-undo-toast {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-surface);
color: var(--color-text-primary);
border: 1px solid var(--color-border-default);
border-left: 4px solid var(--color-success);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 0.875rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
pointer-events: auto;
transform: translateX(20px);
opacity: 0;
transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.copilot-undo-toast--open {
transform: translateX(0);
opacity: 1;
}
.copilot-undo-toast__icon { font-size: 1rem; }
.copilot-undo-toast__text { flex: 0 1 auto; }
.copilot-undo-toast__undo {
background: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-border-default);
border-radius: 14px;
padding: 4px 12px;
font: inherit;
font-size: 0.8125rem;
cursor: not-allowed; /* enabled when backend available (commit 3+) */
opacity: 0.55;
/* VDP Step 4: transition + full-inversion hover (matches .btn-secondary
pattern) so the Undo button reads as a black-inversion CTA when
enabled, instead of the prior color-only enabled state. Pill shape
(14px radius) preserved — only the hover behavior shifts. */
transition:
background-color 0.15s ease-out,
color 0.15s ease-out,
border-color 0.15s ease-out;
}
/* Enabled state matches .btn-primary visual language — black solid bg
default + red hover. Undo is time-critical and deserves the brand-
identity flash on hover rather than the .btn-secondary inversion
treatment. Pill shape (14px radius) preserved. */
.copilot-undo-toast__undo:not(:disabled) {
cursor: pointer;
opacity: 1;
background: var(--color-text-primary);
color: var(--color-text-inverse);
border-color: var(--color-text-primary);
}
.copilot-undo-toast__undo:not(:disabled):hover {
background: var(--color-accent-vibrant);
color: var(--color-text-inverse);
border-color: var(--color-accent-vibrant);
}
.copilot-undo-toast__undo:not(:disabled):active {
background: #D62150;
border-color: #D62150;
}
/* Error state — Day 15b commit 3. Shown when /api/copilot/undo returns
410 / 404 / 500 / network error. Replaces the success ✓ icon with ⚠
in JS; here we re-color the toast border + background to make the
error visually distinct from the success state. */
.copilot-undo-toast--error {
border-color: var(--color-error);
background: var(--color-error-bg);
}
.copilot-undo-toast--error .copilot-undo-toast__icon {
color: var(--color-error);
}
.copilot-undo-toast__close {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1.2rem;
line-height: 1;
padding: 0 4px;
}
.copilot-undo-toast__close:hover { color: var(--color-text-primary); }
@media (prefers-reduced-motion: reduce) {
.copilot-undo-toast { transition: none !important; }
}
@media (max-width: 640px) {
.copilot-undo-toast-container { top: 70px; right: 16px; left: 16px; }
.copilot-undo-toast { width: 100%; }
}
/* ===========================================================================
Auto-DOM-refresh region flash (Day 15b commit 5)
200ms subtle background fade applied to #estimate-summary-region and
#estimate-items-region after copilot_dom_refresh.js patches them in
place. Peripheral "this just changed" affordance — the user-initiated
action (Apply / Undo / Confirm / SMALL tool) is the primary signal.
Honors prefers-reduced-motion (animation suppressed; class becomes
a no-op).
=========================================================================== */
.copilot-region-flash {
animation: copilot-region-flash 200ms ease-out;
}
@keyframes copilot-region-flash {
0% { background-color: var(--surface-highlight); }
100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.copilot-region-flash { animation: none; }
}
/* ===========================================================================
DASHBOARD — VDP Step 5
Single-column dashboard with stacked sections: header → stats →
quick actions → dynamic section (Get Started in empty state /
Recent Estimates + Support footer in has-data state).
Whole-card / whole-row click affordance via wrappers — cursor
pointer, hover lift on actionable surfaces.
Responsive: 4-col stats at ≥1024 (2×2 ≥768, 1-col below), 2-col
quick actions at ≥768, 3-col Get Started at ≥1024 (1-col below).
=========================================================================== */
/* ----- Header ----- */
.dashboard-header {
margin-bottom: var(--space-2xl);
}
.dashboard-header__title {
font-family: var(--font-sans);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--color-text-primary);
margin: 0 0 var(--space-xs);
}
.dashboard-header__subtitle {
font-size: 0.875rem;
color: var(--color-text-muted);
margin: 0;
}
/* ----- Stats (3 compact cards — VDP Step 5 adjustment: dropped 4th
token card; reduced padding for denser visual presence) ----- */
.dashboard-stats {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-3xl);
}
@media (min-width: 768px) {
.dashboard-stats { grid-template-columns: repeat(3, 1fr); }
}
.dashboard-stat-card {
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--space-md) var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.dashboard-stat-card__label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.dashboard-stat-card__value {
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
/* ----- Actions row (VDP Step 5 adjustment: 50/50 split — left column
stacks 2 Quick Action cards, right column hosts a single full-height
Setup Assistance hero card). Below 1024px, both columns stack. ----- */
.dashboard-actions-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
}
@media (min-width: 1024px) {
.dashboard-actions-row {
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
}
.dashboard-actions-row__quick {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* Each Quick Action card fills equal height in its column */
.dashboard-actions-row__quick .dashboard-action-card {
flex: 1;
}
/* Quick Action card — horizontal layout: text-left + icon-circle right.
VDP Step 5 adjustment per user feedback ("cards look too empty"):
prominent coral icon circle on the right gives each card iconic
presence at compact heights (~120-140px). */
.dashboard-action-card {
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-lg) var(--space-xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
min-height: 120px;
color: var(--color-text-primary);
text-decoration: none;
cursor: pointer;
transition:
transform 0.15s ease-out,
box-shadow 0.15s ease-out,
border-color 0.15s ease-out;
}
.dashboard-action-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
text-decoration: none;
color: var(--color-text-primary);
}
.dashboard-action-card:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12), var(--shadow-sm);
}
.dashboard-action-card__body {
display: flex;
flex-direction: column;
gap: var(--space-xs);
flex: 1;
min-width: 0;
}
.dashboard-action-card__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
}
.dashboard-action-card__desc {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.45;
}
/* Coral circle on the right side of each Quick Action card.
--color-accent-vibrant-bg (#FFE8EE) base + coral stroke icon. */
.dashboard-action-card__icon-circle {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-accent-vibrant-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent-vibrant);
}
/* ----- Setup Assistance hero card (50/50 row right column) -----
Photo + dark-overlay + white-text mode per VDP Step 5 adjustment.
When app/static/images/setup-assistance.jpg lands, the inline-style
background-image swaps the placeholder gray for the photo; overlay
+ content stay the same. Placeholder "IMAGE" badge in top-right
marks the awaiting-photo state. ----- */
.dashboard-setup-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 280px;
background-color: #F5F5F5;
background-size: cover;
background-position: center;
border: 1px solid var(--color-border-default);
color: var(--color-text-inverse);
text-decoration: none;
cursor: pointer;
transition:
transform 0.15s ease-out,
box-shadow 0.15s ease-out,
border-color 0.15s ease-out;
}
.dashboard-setup-card::before {
content: '';
position: absolute;
inset: 0;
background: rgba(17, 17, 17, 0.60);
z-index: 1;
}
.dashboard-setup-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
text-decoration: none;
color: var(--color-text-inverse);
}
.dashboard-setup-card:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12), var(--shadow-sm);
}
/* Placeholder badge — small uppercase label in top-right, white-30%
opacity. Visible faintly over the dark overlay as a marker that
this is awaiting an image. Remove the .placeholder markup once a
real photo is in place. */
.dashboard-setup-card__placeholder {
position: absolute;
top: var(--space-md);
right: var(--space-md);
z-index: 2;
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.30);
pointer-events: none;
}
.dashboard-setup-card__content {
position: relative;
z-index: 2;
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dashboard-setup-card__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-inverse);
margin: 0;
line-height: 1.3;
}
.dashboard-setup-card__desc {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.55;
margin: 0;
}
.dashboard-setup-card__cta {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-accent-vibrant);
margin-top: var(--space-xs);
}
/* ----- Get Started (empty state — 3 onboarding cards) ----- */
.dashboard-get-started {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
}
@media (min-width: 1024px) {
.dashboard-get-started { grid-template-columns: repeat(3, 1fr); }
}
/* ----- Onboarding card (empty state Get Started — 3 cards) -----
Photo background + dark overlay + white circle (top-left) with icon
+ white text content at bottom. VDP Step 5 adjustment: all 3 cards
use the same hero treatment (was: icon + photo mixed). White circle
carries a stroke icon that previews the card's topic. Placeholder
"IMAGE" badge top-right marks the awaiting-photo state. ----- */
.dashboard-onboarding-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 240px;
background-color: #F5F5F5;
background-size: cover;
background-position: center;
border: 1px solid var(--color-border-default);
color: var(--color-text-inverse);
text-decoration: none;
cursor: pointer;
transition:
transform 0.15s ease-out,
box-shadow 0.15s ease-out,
border-color 0.15s ease-out;
}
.dashboard-onboarding-card::before {
content: '';
position: absolute;
inset: 0;
background: rgba(17, 17, 17, 0.55);
z-index: 1;
}
.dashboard-onboarding-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
text-decoration: none;
color: var(--color-text-inverse);
}
.dashboard-onboarding-card:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12), var(--shadow-sm);
}
/* White circle (~56px) holding the stroke icon. Sits top-left over the
photo + overlay. Icon stroke is --color-text-primary (dark) so it
reads on the white circle. */
.dashboard-onboarding-card__icon-circle {
position: absolute;
top: var(--space-lg);
left: var(--space-lg);
z-index: 2;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-text-inverse);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
}
.dashboard-onboarding-card__placeholder {
position: absolute;
top: var(--space-md);
right: var(--space-md);
z-index: 2;
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.30);
pointer-events: none;
}
.dashboard-onboarding-card__content {
position: relative;
z-index: 2;
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dashboard-onboarding-card__title {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-text-inverse);
margin: 0;
line-height: 1.3;
}
.dashboard-onboarding-card__desc {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.55;
margin: 0;
}
.dashboard-onboarding-card__cta {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-accent-vibrant);
margin-top: var(--space-xs);
}
/* ----- Recent Estimates (has-data state) ----- */
.dashboard-recent-estimates {
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: var(--space-2xl);
}
.dashboard-recent-estimates__list {
display: flex;
flex-direction: column;
}
.dashboard-estimate-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border-subtle);
color: var(--color-text-primary);
text-decoration: none;
transition: background-color 0.15s ease-out;
}
.dashboard-estimate-item:last-child {
border-bottom: none;
}
.dashboard-estimate-item:hover {
background: var(--color-surface-alt);
text-decoration: none;
color: var(--color-text-primary);
}
.dashboard-estimate-item:focus-visible {
outline: none;
background: var(--color-surface-alt);
box-shadow: inset 0 0 0 2px var(--color-text-primary);
}
.dashboard-estimate-item__main {
flex: 1;
min-width: 0;
}
.dashboard-estimate-item__project {
font-size: 1rem;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-estimate-item__status {
font-size: 0.875rem;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.dashboard-estimate-item__time {
font-size: 0.875rem;
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
/* Per-status inline color cues (no badges — text-only color cue
keeps the row visually quiet per VDP Step 5 user decision). */
.estimate-status--done { color: var(--color-success); font-weight: 500; }
.estimate-status--analyzing { color: var(--color-info); font-weight: 500; }
/* Pending bumped muted->warning amber (2026-06-10) so the dashboard matches the
project-list status colors app-wide. Cancelled stays muted (de-emphasized). */
.estimate-status--pending { color: var(--color-warning); font-weight: 500; }
.estimate-status--cancelled { color: var(--color-text-muted); }
.estimate-status--error { color: var(--color-error); font-weight: 500; }
.dashboard-recent-estimates__footer {
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--color-border-subtle);
text-align: right;
}
.dashboard-recent-estimates__view-all {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-accent-vibrant);
text-decoration: none;
}
.dashboard-recent-estimates__view-all:hover {
color: color-mix(in srgb, var(--color-accent-vibrant), black 12%);
text-decoration: none;
}
/* (VDP Step 5 adjustment: .dashboard-support-footer removed.
Setup Assistance now lives in the actions-row right column as a
tall hero card, not as a small footer band. The empty-state
onboarding still surfaces it as Card 1 of Get Started, but only
inside Get Started — no second instance below the Recent Estimates
list in has-data state.) */
/* =========================================================
VDP STEP 6 — PROJECTS INDEX (2026-05-15)
Container-wrapped projects list with toolbar (search + sort) and
a 2-column grid of project cards. Each card has an absolutely-
positioned kebab menu that reveals on hover (desktop) or stays
visible (mobile/tablet). Kebab dropdown provides Edit + Delete
which reuse the Day 17 shared edit modal + confirm-dialog form
infrastructure.
The new card block is .projects-grid-card (NOT .project-card)
to avoid stepping on price_lists/index.html's reuse of the
legacy .project-card BEM tree. Price Lists migrates to the
new pattern in VDP Step 11.
========================================================= */
.projects-container {
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--space-xl);
}
/* ----- Toolbar (search + sort) ----- */
.projects-toolbar {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.projects-toolbar__search { flex: 1 1 60%; min-width: 0; }
.projects-toolbar__sort { flex: 0 0 auto; }
.projects-search {
position: relative;
display: block;
}
.projects-search__icon {
position: absolute;
left: var(--space-lg);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
pointer-events: none;
display: flex;
}
.projects-search__input {
width: 100%;
height: 40px;
padding: 0 var(--space-lg) 0 var(--space-3xl);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-family: var(--font-sans);
color: var(--color-text-primary);
background: var(--color-bg);
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.projects-search__input:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
.projects-search__input::placeholder { color: var(--color-text-muted); }
.projects-search__input:disabled {
background: var(--color-surface-alt);
color: var(--color-text-disabled);
cursor: not-allowed;
}
.projects-search__input:disabled + .projects-search__icon,
.projects-search__input:disabled ~ .projects-search__icon {
color: var(--color-text-disabled);
}
.projects-sort {
height: 40px;
padding: 0 var(--space-3xl) 0 var(--space-lg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-family: var(--font-sans);
color: var(--color-text-primary);
background: var(--color-bg);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-lg) center;
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.projects-sort:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
.projects-sort:disabled {
background-color: var(--color-surface-alt);
color: var(--color-text-disabled);
cursor: not-allowed;
}
/* ----- Divider between toolbar and grid ----- */
.projects-divider {
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-lg) 0;
border: 0;
}
/* ----- Grid of cards ----- */
.projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.projects-grid-card {
position: relative;
background: var(--color-card-tint); /* soft warm lift (Phase F polish) */
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
transition:
transform 0.15s ease-out,
box-shadow 0.15s ease-out,
border-color 0.15s ease-out;
/* Bundle Estética/UX item 6 Layer 2 sub-step 2b-4 (2026-05-31):
Grid items default to min-width: auto (won't shrink below
content's intrinsic min-content). Without this override, an
unbreakable child (long project name, long PL block_code) would
push the grid item past viewport at narrow widths even though
the grid restacks to 1fr at <=768px. Same pattern as Layer 1's
.app-content { min-width: 0 }. Applies to both surfaces using
this card (projects index + PL index via shared .projects-grid). */
min-width: 0;
}
.projects-grid-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
}
.projects-grid-card__body-link {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-lg);
padding-right: var(--space-3xl); /* leave room for kebab corner */
text-decoration: none;
color: var(--color-text-primary);
}
.projects-grid-card__body-link:hover { text-decoration: none; }
.projects-grid-card__name {
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.projects-grid-card__client {
font-size: 0.875rem;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.projects-grid-card__stats {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--space-md);
}
.projects-grid-card__count {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
}
.projects-grid-card__date {
font-size: 0.75rem;
color: var(--color-text-muted);
letter-spacing: 0.01em;
}
/* ----- Kebab button (top-right corner of card) -----
Hover treatment polish (2026-05-15): black-by-default for
discoverability (instead of muted gray), light-gray CIRCULAR
background on direct hover for clear "this is clickable"
affordance, and a darker active state. border-radius 50% is
constant so the focus outline + hover halo are circular.
Shared visual treatment with .estimate-row__kebab (Step 7). */
.projects-grid-card__kebab {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
color: var(--color-text-primary);
cursor: pointer;
opacity: 1;
transition: opacity 0.3s ease, background-color 0.15s ease-out;
z-index: 2;
}
.projects-grid-card__kebab:hover {
background: var(--color-border-subtle); /* #F0F0F0 — soft gray halo */
}
.projects-grid-card__kebab:active {
background: var(--color-border-default); /* #E5E5E5 — slightly darker on press */
}
.projects-grid-card__kebab:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: 1px;
}
/* Desktop: kebab fades in on card hover. Tablet/mobile: always visible
(no hover state available with touch input). */
@media (min-width: 1024px) {
.projects-grid-card__kebab { opacity: 0; }
.projects-grid-card:hover .projects-grid-card__kebab,
.projects-grid-card__kebab:focus-visible,
.projects-grid-card__kebab[aria-expanded="true"] { opacity: 1; }
}
/* ----- Kebab dropdown menu ----- */
.projects-grid-card__dropdown {
position: absolute;
top: calc(var(--space-sm) + 28px + 4px);
right: var(--space-sm);
min-width: 140px;
background: var(--color-bg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: var(--space-xs);
z-index: 10;
display: none;
}
.projects-grid-card__dropdown.is-open { display: block; }
/* Pinear tarjetas Commit 2 (2026-06-08) — open-kebab clipping fix.
The card's :hover transform (translateY) creates a stacking context
that traps the dropdown's z-index, so a later-in-DOM sibling card
paints over the open menu (Delete vanishes under the next card).
Raising the card itself WHILE its dropdown is open lifts the whole
subtree above neighboring cards. Hooks the existing JS-toggled
.is-open (no JS change). :has() is an established pattern here
(logo-remove, icon picker, copilot-launcher offset). Shared BEM tree
-> fixes the same latent bug on the Projects index too. */
.projects-grid-card:has(.projects-grid-card__dropdown.is-open) {
z-index: 20;
}
.projects-kebab-item {
display: block;
width: 100%;
padding: var(--space-sm) var(--space-md);
background: transparent;
border: 0;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
font-family: var(--font-sans);
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
transition: background-color 0.1s ease;
}
.projects-kebab-item:hover { background: var(--color-surface-alt); }
.projects-kebab-item:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: -2px;
}
.projects-kebab-item--danger { color: var(--color-error); }
.projects-kebab-item--danger:hover { background: var(--color-error-bg); }
.projects-kebab-divider {
height: 1px;
background: var(--color-border-subtle);
margin: 2px 0;
border: 0;
}
/* ----- Empty + no-results states (inside container) ----- */
.projects-empty,
.projects-no-results {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-3xl) var(--space-lg);
gap: var(--space-lg);
}
.projects-empty__icon {
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: center;
}
.projects-empty__title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
color: var(--color-text-primary);
}
.projects-empty__desc {
font-size: 1rem;
line-height: 1.55;
color: var(--color-text-secondary);
max-width: 460px;
}
.projects-no-results__message {
font-size: 1rem;
color: var(--color-text-secondary);
}
.projects-no-results__message strong {
color: var(--color-text-primary);
font-weight: 600;
}
/* The container hides itself when an inline empty/no-results state is
active so the toolbar still sits inside the same envelope card. */
.projects-grid.is-hidden { display: none; }
/* ----- Responsive ----- */
@media (max-width: 1023px) {
/* Tablet: grid stays 2-col, kebab is always visible (already the
default outside the >=1024 media query above). */
}
@media (max-width: 767px) {
.projects-toolbar {
flex-direction: column;
align-items: stretch;
gap: var(--space-md);
}
.projects-toolbar__search,
.projects-toolbar__sort { flex: 0 0 auto; width: 100%; }
.projects-sort { width: 100%; }
.projects-grid { grid-template-columns: 1fr; }
.projects-container { padding: var(--space-lg); }
}
/* =========================================================
VDP STEP 7 — PROJECT DETAIL (2026-05-15)
Page-level layout: project header sits OUTSIDE a container card
(full-width, page-bg), followed by an estimates container card
mirroring the Step 6 toolbar + list pattern. Each estimate row
shows a status dot + filename + status/total + items/time, with
a hover-revealed kebab corner offering View detail / Re-analyze /
Delete.
Has-estimates: "Upload PDF" header button opens an overlay modal
containing the existing upload-zone form. Empty-estimates: the
container body is replaced by the inline upload form; the header
Upload button is hidden so the dropzone is the only affordance.
The new estimate row uses its own .estimate-row* BEM tree. The
toolbar / search / sort recipes echo Step 6 with a fresh
.estimates-* namespace (per Phase A Q4) so this commit doesn't
refactor Step 6.
========================================================= */
/* ----- Project header (outside the container) ----- */
.project-detail-header { margin-bottom: var(--space-2xl); }
.project-detail-header__client {
font-size: 1rem;
color: var(--color-text-muted);
margin-top: var(--space-xs);
}
.project-detail-header__description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-top: var(--space-md);
font-size: 0.875rem;
line-height: 1.55;
color: var(--color-text-secondary);
max-width: 720px;
}
.project-detail-header__dates {
margin-top: var(--space-md);
font-size: 0.75rem;
color: var(--color-text-muted);
letter-spacing: 0.01em;
}
.project-detail-header__dates-sep {
margin: 0 var(--space-sm);
color: var(--color-border-strong);
}
/* VDP Step 7 retrofit (2026-05-17 → 18): the prior
.project-detail-header__total + .project-detail-header__actions
rules were removed here. Total estimated + the 3 action buttons
migrated to the new .project-detail-footer (sticky) per the
sticky-footer pattern decision captured at 1bc1e8e (already
applied to Step 10 + Step 11). */
/* ----- Project detail content wrapper (Step 7 retrofit) ----- */
.project-detail-content--has-footer { padding-bottom: 100px; }
/* ----- Project detail sticky footer ----- */
.project-detail-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
background: var(--color-bg);
border-top: 1px solid var(--color-border-default);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
padding: var(--space-md) var(--space-2xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
min-height: 64px;
}
.project-detail-footer__total {
display: inline-flex;
align-items: baseline;
gap: var(--space-sm);
min-width: 0;
}
.project-detail-footer__total-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
}
.project-detail-footer__total-amount {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.project-detail-footer__total--empty {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
}
.project-detail-footer__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
flex-shrink: 0;
}
@media (max-width: 767px) {
.project-detail-footer {
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
}
.project-detail-footer__total { justify-content: center; }
.project-detail-footer__actions { width: 100%; justify-content: center; }
.project-detail-content--has-footer { padding-bottom: 160px; }
}
/* ----- Estimates container (same shell as .projects-container) ----- */
.estimates-container {
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--space-xl);
}
.estimates-container__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--space-lg);
}
/* ----- Toolbar (search + sort) — namespaced parallel of .projects-toolbar ----- */
.estimates-toolbar {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.estimates-toolbar__search { flex: 1 1 60%; min-width: 0; }
.estimates-toolbar__sort { flex: 0 0 auto; }
.estimates-search { position: relative; display: block; }
.estimates-search__icon {
position: absolute;
left: var(--space-lg);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
pointer-events: none;
display: flex;
}
.estimates-search__input {
width: 100%;
height: 40px;
padding: 0 var(--space-lg) 0 var(--space-3xl);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-family: var(--font-sans);
color: var(--color-text-primary);
background: var(--color-bg);
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.estimates-search__input:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
.estimates-search__input::placeholder { color: var(--color-text-muted); }
.estimates-sort {
height: 40px;
padding: 0 var(--space-3xl) 0 var(--space-lg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-family: var(--font-sans);
color: var(--color-text-primary);
background: var(--color-bg);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-lg) center;
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.estimates-sort:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
.estimates-divider {
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-lg) 0;
border: 0;
}
/* ----- Estimates list ----- */
.estimates-list { display: flex; flex-direction: column; }
.estimate-row {
position: relative;
border-bottom: 1px solid var(--color-border-subtle);
transition: background-color 0.1s ease-out;
}
.estimate-row:last-child { border-bottom: 0; }
.estimate-row:hover { background: var(--color-surface-alt); }
/* Bundle A #11 (2026-05-28) — body-link is flex-ROW with the cover
thumbnail on the LEFT (fixed 120×90) and the text wrapper on the
right (flex:1 1 0 + min-width:0 so the filename ellipsis-truncates
instead of pushing the thumb off-axis). Kebab stays absolute
top-right via .estimate-row's position:relative — unaffected by
this layout change. */
.estimate-row__body-link {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
padding-right: var(--space-3xl); /* room for kebab corner */
text-decoration: none;
color: var(--color-text-primary);
}
.estimate-row__body-link:hover { text-decoration: none; }
/* Text wrapper — holds the existing name/meta/footer as a flex-column
so they keep their 2px tight stacking even though the parent is
now flex-row. min-width:0 is the critical bit for filename ellipsis
to work inside a flex item (default min-width:auto would block it). */
.estimate-row__text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 0;
min-width: 0;
}
/* PDF cover thumbnail (page 0). Fixed 4:3 landscape slot, 120×90px.
Cover JPEG generated by PDFProcessor at upload time; the route
resolves duplicate rows to the original sibling's thumb URL.
object-fit:contain letterboxes portrait covers cleanly inside the
landscape box (vertical bars top/bottom) and lets landscape covers
fill closer to edge — never stretched, never forced. Subtle border
+ surface-alt background lets the letterbox bars read as
intentional rather than broken. */
.estimate-row__cover-thumb {
flex: 0 0 120px;
width: 120px;
height: 90px;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
background: var(--color-surface-alt);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.estimate-row__cover-thumb-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.estimate-row__cover-thumb-placeholder {
color: var(--color-text-muted);
line-height: 0;
opacity: 0.7;
}
.estimate-row__cover-thumb-placeholder svg { display: block; }
/* Line 1 — status dot + filename */
.estimate-row__name {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
min-width: 0;
}
.estimate-row__name-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.estimate-status-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-text-muted);
}
.estimate-status-dot--done { background: var(--color-success); }
.estimate-status-dot--analyzing { background: var(--color-info); }
/* Pending bumped muted->warning (2026-06-10) so the dot agrees with the
amber status label below. */
.estimate-status-dot--pending { background: var(--color-warning); }
.estimate-status-dot--cancelled { background: var(--color-text-muted); }
.estimate-status-dot--error { background: var(--color-error); }
/* Semantic estimate-status LABEL colors (2026-06-10) — the status word in the
project-detail estimate list. Sober colored text (house deep-foreground
tokens), matching the dots; the dollar total stays secondary gray (it sits
OUTSIDE this span). Mirrors the dashboard's .estimate-status--* scheme. */
.estimate-status-text { font-weight: 600; }
.estimate-status-text--done { color: var(--color-success); }
.estimate-status-text--analyzing { color: var(--color-info); }
.estimate-status-text--pending { color: var(--color-warning); }
.estimate-status-text--cancelled { color: var(--color-text-muted); }
.estimate-status-text--error { color: var(--color-error); }
/* Line 2 — status text + total amount */
.estimate-row__meta {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
margin-left: calc(8px + var(--space-md)); /* align with name text */
}
/* Line 3 — items count · updated time · creator, all flush-left.
Roles "created by": a third segment (creator) joined the original
two, so the old justify-content:space-between (a 2-end split) spread
them into left/center/right. Switched to a flush-left flowing line
with `·` separators + column-gap, matching .projects-grid-card__stats
so the metadata reads consistently across cards. flex-wrap lets it
drop cleanly on narrow/mobile viewports instead of overflowing. */
.estimate-row__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-xs);
font-size: 0.75rem;
color: var(--color-text-muted);
letter-spacing: 0.01em;
margin-left: calc(8px + var(--space-md));
margin-top: 2px;
}
/* ----- Kebab corner on estimate rows -----
Matches the Step 6 .projects-grid-card__kebab treatment for
consistency: black-by-default, light-gray circular hover halo,
darker active state. See that block above for rationale. */
.estimate-row__kebab {
position: absolute;
top: var(--space-md);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
color: var(--color-text-primary);
cursor: pointer;
opacity: 1;
transition: opacity 0.3s ease, background-color 0.15s ease-out;
z-index: 2;
}
.estimate-row__kebab:hover {
background: var(--color-border-subtle); /* #F0F0F0 */
}
.estimate-row__kebab:active {
background: var(--color-border-default); /* #E5E5E5 */
}
.estimate-row__kebab:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: 1px;
}
/* Desktop hover-reveal. Tablet/mobile keep kebab visible (no hover). */
@media (min-width: 1024px) {
.estimate-row__kebab { opacity: 0; }
.estimate-row:hover .estimate-row__kebab,
.estimate-row__kebab:focus-visible,
.estimate-row__kebab[aria-expanded="true"] { opacity: 1; }
}
.estimate-row__dropdown {
position: absolute;
top: calc(var(--space-md) + 28px + 4px);
right: var(--space-sm);
min-width: 160px;
background: var(--color-bg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: var(--space-xs);
z-index: 60; /* above the z-50 fixed .project-detail-footer (was 10 — the
downward dropdown's lower items got covered by the footer
on bottom rows); matches .more-actions__menu's z-60 */
display: none;
}
.estimate-row__dropdown.is-open { display: block; }
.estimates-kebab-item {
display: block;
width: 100%;
padding: var(--space-sm) var(--space-md);
background: transparent;
border: 0;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
font-family: var(--font-sans);
color: var(--color-text-primary);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background-color 0.1s ease;
}
.estimates-kebab-item:hover {
background: var(--color-surface-alt);
text-decoration: none;
color: var(--color-text-primary);
}
.estimates-kebab-item:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: -2px;
}
.estimates-kebab-item--danger { color: var(--color-error); }
.estimates-kebab-item--danger:hover {
background: var(--color-error-bg);
color: var(--color-error);
}
.estimates-kebab-divider {
height: 1px;
background: var(--color-border-subtle);
margin: 2px 0;
border: 0;
}
/* Hide the list when search filters all rows out; the no-results
panel toggles visible in its place. */
.estimates-list.is-hidden { display: none; }
/* ----- Empty + no-results states (inside container) ----- */
.estimates-empty {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.estimates-empty__helper {
font-size: 0.875rem;
color: var(--color-text-muted);
max-width: 560px;
line-height: 1.55;
}
.estimates-no-results {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-3xl) var(--space-lg);
gap: var(--space-lg);
}
.estimates-no-results__message {
font-size: 1rem;
color: var(--color-text-secondary);
}
.estimates-no-results__message strong {
color: var(--color-text-primary);
font-weight: 600;
}
/* ----- Upload PDF modal (has-estimates state) ----- */
.upload-pdf-dialog {
border: 0;
padding: 0;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
background: var(--color-bg);
max-width: 560px;
width: 92%;
}
.upload-pdf-dialog::backdrop {
background: rgba(17, 17, 17, 0.45);
}
.upload-pdf-dialog__inner { padding: var(--space-2xl); }
.upload-pdf-dialog__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: var(--space-lg);
}
.upload-pdf-dialog__actions {
margin-top: var(--space-lg);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
}
/* ----- Responsive ----- */
@media (max-width: 767px) {
.estimates-toolbar {
flex-direction: column;
align-items: stretch;
gap: var(--space-md);
}
.estimates-toolbar__search,
.estimates-toolbar__sort { flex: 0 0 auto; width: 100%; }
.estimates-sort { width: 100%; }
.estimates-container { padding: var(--space-lg); }
/* Step 7 retrofit — project-detail-header__actions stack rule
deleted; the actions row migrated to .project-detail-footer
which has its own mobile stack handling. */
}
/* =========================================================
VDP STEP 8 — ESTIMATE PREVIEW (2026-05-15)
Page header sits outside two stacked container cards (Pages,
Price list). A sticky bottom bar holds the live page-selection
counter + Analyze button. The Analyze button lives OUTSIDE the
form and submits it via the HTML form="previewForm" attribute,
so Enter on the select still submits naturally.
Thumbnails render at the largest practical size for each
breakpoint (4 / 3 / 2 / 1 columns) so the user can verify the
PDF content before sending to analysis. Selected state uses a
2px black border + subtle surface tint — restrained, no coral
(coral is reserved for sparing brand moments per Step 1 spec).
========================================================= */
/* ----- Page header ----- */
.preview-header { margin-bottom: var(--space-2xl); }
.preview-header__subtitle {
font-size: 0.875rem;
color: var(--color-text-muted);
margin-top: var(--space-xs);
letter-spacing: 0.01em;
}
.preview-header__subtitle-sep {
margin: 0 var(--space-sm);
color: var(--color-border-strong);
}
/* ----- Container cards (Pages, Price list) ----- */
.preview-card {
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--space-xl);
}
.preview-card + .preview-card { margin-top: var(--space-lg); }
.preview-card__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
}
.preview-card__divider {
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-lg) 0;
border: 0;
}
/* ----- Pages card toolbar (Select all / Deselect all) ----- */
.preview-pages__toolbar {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
flex-wrap: wrap;
}
/* ----- Thumbnail grid -----
align-items: start so each card takes its intrinsic height and
stays top-aligned within its row. With mixed portrait/landscape
PDFs this leaves any gap BETWEEN rows rather than inside cards
(which is the honest asymmetric look the user picked over a
forced-uniform aspect ratio). */
.preview-thumb-grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 768px) { .preview-thumb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .preview-thumb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .preview-thumb-grid { grid-template-columns: repeat(4, 1fr); } }
/* ----- Thumbnail card ----- */
.preview-thumb {
position: relative;
background: var(--color-bg);
border: 2px solid transparent;
border-radius: var(--radius);
cursor: pointer;
user-select: none;
transition:
transform 0.15s ease-out,
box-shadow 0.15s ease-out,
border-color 0.15s ease-out,
background-color 0.15s ease-out;
overflow: hidden;
}
.preview-thumb:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.preview-thumb:hover:not(.preview-thumb--selected) {
border-color: var(--color-border-strong);
}
/* Hide the actual checkbox; the visible square is a sibling span. */
.preview-thumb__input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
/* Visible checkbox-style indicator at top-left of the card. */
.preview-thumb__check {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
width: 24px;
height: 24px;
border-radius: 4px;
border: 1.5px solid var(--color-border-strong);
background: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
color: transparent;
z-index: 2;
transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.preview-thumb__check svg { display: block; }
/* Selected state — applied to the card. */
.preview-thumb--selected {
border-color: var(--color-text-primary);
background: var(--color-surface-alt);
}
.preview-thumb--selected .preview-thumb__check {
background: var(--color-text-primary);
border-color: var(--color-text-primary);
color: var(--color-text-inverse);
}
/* Image frame — orientation-aware (Step 8 V2 fix).
PyMuPDF's pixmap respects the page's native orientation, so each
thumbnail JPEG already has the right aspect ratio. The frame
defers entirely to the image's intrinsic dimensions: landscape
pages render landscape, portrait portrait, asymmetric grids OK.
The grid uses a single fixed column width per breakpoint and
each cell expands vertically to fit its image — natural and
honest. */
.preview-thumb__image-frame {
background: #F4F4F4;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.preview-thumb__image {
width: 100%;
height: auto; /* intrinsic — page orientation preserved */
display: block;
transition: opacity 0.15s ease-out;
}
/* Deselected fade applies to the IMAGE only — keep the card chrome
crisp so the user can still read the page label and reconsider. */
.preview-thumb:not(.preview-thumb--selected) .preview-thumb__image { opacity: 0.55; }
/* Placeholder fallback (no thumbnail URL available). Without an
intrinsic image to set height, give the frame an explicit
portrait-ish min-height so the card isn't a flat strip. */
.preview-thumb__placeholder {
font-size: 2rem;
color: var(--color-text-muted);
padding: 3rem 0;
}
.preview-thumb__label {
padding: var(--space-sm) var(--space-md);
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary);
text-align: center;
border-top: 1px solid var(--color-border-subtle);
}
.preview-thumb--selected .preview-thumb__label {
color: var(--color-text-primary);
}
/* ----- Inline error states inside cards ----- */
.preview-empty-pages,
.preview-empty-pricelist {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-sm);
background: var(--color-warning-bg);
border: 1px solid var(--color-warning);
border-left-width: 3px;
}
.preview-empty-pages__title,
.preview-empty-pricelist__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
}
.preview-empty-pages__body,
.preview-empty-pricelist__body {
font-size: 0.875rem;
line-height: 1.55;
color: var(--color-text-secondary);
max-width: 560px;
}
.preview-empty-pages__action,
.preview-empty-pricelist__action {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
align-self: flex-start;
}
/* ----- Price-list select wrapper ----- */
.preview-pricelist__field {
max-width: 480px;
}
.preview-pricelist__field select {
width: 100%;
height: var(--height-input);
padding: 0 var(--space-3xl) 0 var(--space-lg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 1rem;
font-family: var(--font-sans);
color: var(--color-text-primary);
background: var(--color-bg);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-lg) center;
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.preview-pricelist__field select:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}
/* ----- Sticky footer ----- */
.preview-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
background: var(--color-bg);
border-top: 1px solid var(--color-border-default);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
padding: var(--space-md) var(--space-2xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
min-height: 64px;
}
/* Cancel + Analyze grouped on the right; counter stays left (footer is
space-between, so this keeps it two children). */
.preview-footer__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.preview-footer__counter {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
}
.preview-footer__counter-icon { display: inline-flex; }
/* Counter color states — JS sets data-state on the counter span. */
.preview-footer__counter[data-state="none"] { color: var(--color-warning); }
.preview-footer__counter[data-state="partial"] { color: var(--color-text-secondary); }
.preview-footer__counter[data-state="all"] { color: var(--color-text-primary); }
/* Push the page content above the sticky footer so the last
thumbnail row isn't hidden when scrolled to the bottom. */
.preview-content--has-footer { padding-bottom: 100px; }
/* ----- Responsive ----- */
@media (max-width: 767px) {
.preview-card { padding: var(--space-lg); }
.preview-footer {
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
}
.preview-footer__counter { justify-content: center; }
.preview-footer .btn { width: 100%; }
.preview-content--has-footer { padding-bottom: 140px; }
}
/* =========================================================
VDP STEP 9 — ESTIMATE ANALYZING (2026-05-15)
Visual migration only. All SSE/JS contracts preserved:
- #progress-fill width updated by JS (SSE progress)
- #progress-label textContent replaced by JS
- #analysis-hint textContent replaced by JS on cancel/stuck
(initially empty after Step 9 — the misleading "leave the
page" copy was removed; element retained so JS can still
write Cancel/Stuck messages)
- #cancel-analysis-btn click handler unchanged
- #reset-analysis-row.hidden flipped false by JS on stuck
- #page-row-N → .page-status__dot states (--waiting / --done /
--sparse / --error) class swaps by JS
- #page-result-N textContent set by JS
Layout: page header outside the card, container card centered
max-width 720px. No sticky footer (transitional page; Cancel
lives inside the card with Reset alongside when revealed).
========================================================= */
.analyzing-header {
text-align: center;
margin: var(--space-2xl) auto 0;
max-width: 720px;
padding: 0 var(--space-lg);
}
.analyzing-header__breadcrumb {
display: inline-block;
text-align: left;
margin-bottom: var(--space-md);
}
.analyzing-header__subtitle {
font-size: 0.875rem;
color: var(--color-text-muted);
margin-top: var(--space-xs);
letter-spacing: 0.01em;
}
.analyzing-header__subtitle-sep {
margin: 0 var(--space-sm);
color: var(--color-border-strong);
}
.analyzing-card {
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--space-2xl);
margin: var(--space-xl) auto var(--space-2xl);
max-width: 720px;
text-align: left;
}
/* M1 (2026-05-18, Regression Sprint): .analyzing-status wrapper
removed — the spinner now lives in the same row as the progress
bar + percent, and the status label moved to the sticky footer. */
/* Progress bar row: spinner + bar + percentage number */
.analyzing-progress {
display: flex;
align-items: center;
gap: var(--space-md);
}
.analyzing-progress .progress-bar { flex: 1 1 auto; }
.analyzing-progress__percent {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
min-width: 3.5em;
text-align: right;
font-variant-numeric: tabular-nums; /* prevent digit-width jitter */
}
/* Spinner — CSS-only rotation. Hidden via the [hidden] attribute
set by JS on terminal states (cancelled, error, done). */
.analyzing-spinner {
display: inline-flex;
width: 18px;
height: 18px;
color: var(--color-text-primary);
animation: analyzing-spin 1s linear infinite;
flex-shrink: 0;
}
.analyzing-spinner svg { display: block; }
@keyframes analyzing-spin {
to { transform: rotate(360deg); }
}
/* Card-internal dividers */
.analyzing-card__divider {
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-lg) 0;
border: 0;
}
/* M1: .analyzing-hint + .analyzing-actions blocks removed. The
#analysis-hint element was deleted (its messages consolidate
into #progress-label in the sticky footer). The actions row
migrated to the sticky footer (.analyzing-footer__actions). */
/* ----- M1 sticky footer (2026-05-18, Regression Sprint) -----
Mirrors .estimate-footer / .price-list-footer / .project-detail-
footer recipes. Same fixed-bottom + white-bg + upward-shadow
pattern. No Copilot-shrink rule (Copilot doesn't mount on the
analyzing page). */
.analyzing-content--has-footer { padding-bottom: 100px; }
.analyzing-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
background: var(--color-bg);
border-top: 1px solid var(--color-border-default);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
padding: var(--space-md) var(--space-2xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
min-height: 64px;
}
/* Footer status (left) — formerly the inline #progress-label.
Inherits the Step 9 .progress-label font-size + weight rule.
The min-height keeps the footer height stable when the text
is empty mid-transition. */
.analyzing-footer__status {
flex: 1 1 auto;
min-width: 0;
min-height: 1.4em;
overflow-wrap: anywhere; /* "Error: " wraps cleanly */
}
.analyzing-footer__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
flex-shrink: 0;
}
@media (max-width: 767px) {
.analyzing-card { padding: var(--space-lg); }
.analyzing-footer {
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
}
.analyzing-footer__status { text-align: center; }
.analyzing-footer__actions { width: 100%; justify-content: center; }
.analyzing-footer__actions .btn { flex: 1 1 0; min-width: 0; }
.analyzing-content--has-footer { padding-bottom: 160px; }
}
/* =========================================================
VDP STEP 10 — ESTIMATE DETAIL (2026-05-17)
Highest-traffic page. Header outside containers carries the
breadcrumb, name, status pill, subtitle, and timestamps row.
Items region preserves the .panel + .data-table shape because
copilot_dom_refresh.js re-renders it after Copilot mutations —
any class rename there breaks auto-DOM-refresh. Same for the
.summary-cards shape inside #estimate-summary-region.
Sticky footer carries the always-visible total + Refresh /
Download / More actions ▾. Footer shrinks (right: 480px) when
the Copilot panel is open via body.copilot-open. Tax disclaimer
sits between the summary cards and the footer; clicking it
opens an inline 2-option dropdown that POSTs to
/estimates//tax-disclaimer and updates the visible text
without a page reload.
Copilot affordance state machine (driven from copilot.js by
toggling body classes):
- no class: launcher visible (never-opened)
- copilot-was-open: tab visible
- copilot-open: both hidden
On mobile (<768px) the floating tab is suppressed and the
bottom-right launcher serves the re-open role.
========================================================= */
/* ----- Page header ----- */
.estimate-detail-header {
margin-bottom: var(--space-2xl);
}
/* Batch 6 Group 3 (D) — timestamps + Duplicate button share one row, matching
PL: button right-aligned on the Created/Updated line (no extra row below). */
.estimate-detail-header__timestamps-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
margin-top: var(--space-xs);
}
.estimate-detail-header__actions {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
}
.estimate-detail-header__title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
margin-top: var(--space-xs);
}
.estimate-detail-header__title-row h1 {
margin: 0;
flex: 1 1 auto;
min-width: 0;
/* Filename can be long — wrap rather than overflow. */
overflow-wrap: anywhere;
}
.estimate-detail-header__subtitle {
font-size: 0.875rem;
color: var(--color-text-muted);
margin-top: var(--space-md);
letter-spacing: 0.01em;
}
.estimate-detail-header__subtitle-sep {
margin: 0 var(--space-sm);
color: var(--color-border-strong);
}
.estimate-detail-header__timestamps {
font-size: 0.75rem;
color: var(--color-text-muted);
margin: 0; /* Group 3 (D): spacing moved to .estimate-detail-header__timestamps-row */
letter-spacing: 0.01em;
}
/* ----- Status pill ----- */
.estimate-status-badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 2px var(--space-md);
border-radius: var(--radius-pill);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.estimate-status-badge::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.estimate-status-badge--done {
background: var(--color-success-bg);
color: var(--color-success);
}
.estimate-status-badge--analyzing {
background: var(--color-info-bg);
color: var(--color-info);
}
.estimate-status-badge--pending,
.estimate-status-badge--cancelled {
background: var(--color-surface-alt);
color: var(--color-text-muted);
}
.estimate-status-badge--error {
background: var(--color-error-bg);
color: var(--color-error);
}
/* Batch 6 Group 2 — yellow "trial/limited" badge variant (reuses the badge
recipe; only the colorway is new). Used for trial/freemium plan state. */
.estimate-status-badge--trial {
background: var(--color-warning-bg);
color: var(--color-warning);
}
/* Batch 6 Group 3 — blue "workspace context" variant. text-transform:none so
the workspace proper name keeps its typed case (e.g. "DrawIQ", not "DRAWIQ"). */
.estimate-status-badge--workspace {
background: var(--color-info-bg);
color: var(--color-info);
text-transform: none;
}
/* Settings/Account meta rows — role/plan pills + workspace/invited-by, aligned. */
.account-meta {
margin-top: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.account-meta__row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.account-meta__label {
min-width: 92px;
color: var(--color-text-muted);
font-size: 0.875rem;
}
.account-meta__value {
font-weight: 600;
color: var(--color-text-primary);
}
/* Batch 6 Group 3 (#4b) — unsaved-changes cue + dirty Save emphasis. */
.form-dirty-cue {
color: var(--color-warning);
font-size: 0.85rem;
font-weight: 500;
margin-left: var(--space-md);
}
.btn.is-dirty {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning), transparent 80%);
}
/* Batch 6 Group 3 (#9) — clear-staged-logo X (Preferences + Branding slot). */
.settings-logo-clear {
border: none;
background: none;
cursor: pointer;
color: var(--color-error);
font-size: 1.25rem;
line-height: 1;
padding: 0 6px;
border-radius: 4px;
}
.settings-logo-clear:hover { background: var(--color-error-bg); }
/* Anchor variant — used by Settings > Usage's plan-name badge
(clickable → /settings/subscription). Suppress the global anchor
underline + add subtle hover dim. Color is inherited from the
colorway modifier (--done / --analyzing / etc.). */
a.estimate-status-badge {
text-decoration: none;
transition: filter 0.1s ease-out;
}
a.estimate-status-badge:hover {
text-decoration: none;
filter: brightness(0.95);
}
/* === TEAM (Roles Commit 4) === */
/* Role badge — pill mirroring .estimate-status-badge's geometry. Colorways:
owner = solid dark accent (top role), member = info-blue, viewer = neutral
grey. Uppercase, nowrap, flex-shrink:0 so it never collapses next to a
long email. */
.role-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-md);
border-radius: var(--radius-pill);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.role-badge--owner {
background: var(--color-accent);
color: var(--color-accent-text);
}
.role-badge--member {
background: var(--color-info-bg);
color: var(--color-info);
}
.role-badge--viewer {
background: var(--color-surface-alt);
color: var(--color-text-muted);
border: 1px solid var(--color-border-default);
}
/* Members list — one row per person. Identity (name + email) takes the
flexible left; meta (badge + status) is fixed-width on the right. The
identity column has min-width:0 so the email ellipsis-truncates instead
of pushing the badge off-screen — the load-bearing bit for ~375px mobile
(no wide table, no horizontal scroll). */
.team-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--color-border-subtle);
}
.team-member {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-md) 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.team-member__identity {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0; /* lets the email truncate inside the flex item */
}
.team-member__name {
font-weight: 500;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-member__email {
font-size: 0.8125rem;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-member__meta {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0; /* badge + status never get squeezed */
}
.team-member__status {
font-size: 0.75rem;
color: var(--color-text-muted);
}
/* Pending-invite rows carry extra actions (Resend / Revoke) on the meta
side. Allow the row to wrap so on ~375px the action group drops below the
email instead of overflowing; the identity keeps the flexible top line. */
.team-member--invite {
flex-wrap: wrap;
row-gap: var(--space-sm);
}
.team-member--invite .team-member__identity {
flex: 1 1 12rem;
}
.team-member__meta--actions {
flex-wrap: wrap;
gap: var(--space-sm);
}
/* Active-member rows carry the role select + Deactivate. The row NEVER wraps:
the identity shrinks and truncates (name + email both ellipsis) while the
controls keep a fixed width on the right and are never pushed off-screen. */
.team-member--member {
flex-wrap: nowrap;
}
.team-member--member .team-member__identity {
flex: 1 1 auto;
min-width: 0; /* lets BOTH name and email ellipsis-truncate */
}
.team-role-form { display: inline; }
.team-role-select {
font-size: 0.8125rem;
padding: 4px var(--space-sm);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm, 6px);
background: var(--color-surface, #fff);
color: var(--color-text-primary);
}
.team-role-select:disabled {
background: var(--color-surface-alt);
color: var(--color-text-muted);
cursor: not-allowed;
}
/* Mobile (≤640px): stack the role select ABOVE the Deactivate button on the
right, both right-aligned, fixed width. The identity column (name + email,
both truncating) takes the rest. Member rows only — pending/invite rows
keep their own wrap behavior. Desktop is untouched (rule is gated below the
breakpoint). */
@media (max-width: 640px) {
.team-member--member .team-member__meta--actions {
flex-direction: column;
align-items: flex-end;
flex-wrap: nowrap;
gap: var(--space-xs);
}
}
/* ----- Tax disclaimer + inline dropdown ----- */
.estimate-tax-disclaimer {
position: relative;
text-align: right;
margin: var(--space-md) 0 0;
}
.estimate-tax-disclaimer__toggle {
background: none;
border: 0;
padding: var(--space-xs) var(--space-sm);
font-size: 0.8125rem;
font-family: var(--font-sans);
color: var(--color-text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
transition: color 0.1s ease-out, background-color 0.1s ease-out;
}
.estimate-tax-disclaimer__toggle:hover {
color: var(--color-text-secondary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: var(--color-border-strong);
}
.estimate-tax-disclaimer__toggle:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: 2px;
}
.estimate-tax-dropdown {
position: absolute;
top: calc(100% + 4px);
right: var(--space-sm);
min-width: 200px;
background: var(--color-bg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: var(--space-xs);
z-index: 30;
display: none;
text-align: left;
}
.estimate-tax-dropdown.is-open { display: block; }
.estimate-tax-dropdown__item {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-sm) var(--space-md);
background: transparent;
border: 0;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
font-family: var(--font-sans);
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
transition: background-color 0.1s ease;
}
.estimate-tax-dropdown__item:hover { background: var(--color-surface-alt); }
.estimate-tax-dropdown__item:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: -2px;
}
.estimate-tax-dropdown__radio {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid var(--color-border-strong);
flex-shrink: 0;
}
.estimate-tax-dropdown__item[aria-checked="true"] .estimate-tax-dropdown__radio {
border-color: var(--color-text-primary);
}
.estimate-tax-dropdown__item[aria-checked="true"] .estimate-tax-dropdown__radio::after {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-text-primary);
}
/* ----- Sticky footer -----
In-place token migration of .panel / .data-table / .summary-cards /
.code-label / .row--unmatched lives at their original locations
(the older PROGRESS BAR / SUMMARY CARDS sections higher up in this
file). copilot_dom_refresh.js depends on those class names, so the
migration is colors-only — same names, new tokens. ----- */
.estimate-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
background: var(--color-bg);
border-top: 1px solid var(--color-border-default);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
padding: var(--space-md) var(--space-2xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
min-height: 64px;
transition: right 0.25s ease-out;
}
/* Footer shrinks to make room for the open Copilot panel (desktop).
right MUST match .copilot-panel width (copilot.css) — flat 480px,
no computed sync. */
body.copilot-open .estimate-footer { right: 480px; }
.estimate-footer__total {
display: inline-flex;
align-items: baseline;
gap: var(--space-sm);
min-width: 0;
}
.estimate-footer__total-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
}
.estimate-footer__total-amount {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
/* === ESTIMATE VIEW MODES (estimate / neutral) ===
The mode is STORED on the estimate (estimate.view_mode) and
server-rendered onto data-view-mode — on the .estimate-view-scope
wrapper (detail page, covers footer/modals/Copilot) and per-row on
list/dashboard cards. So it's identical across every browser/device.
Source of truth for what each mode shows is app/view_modes.py; this is
its on-screen expression (the PDF reads the same flags server-side).
Phase 2 adds COUNT rules (hide value columns + totals) under this same
selector. */
/* Money symbol — a hideable span around the literal '$' so Neutral can
drop the currency without re-rendering. (Phase 4's currency selector
will fill this span from tenant config.) */
.money-sym { /* visible by default; no rule needed in Estimate mode */ }
/* Dual header/footer labels: show the money wording by default; the
neutral wording is hidden until neutral/count. */
.vm-label--neutral { display: none; }
/* Neutral AND Count both de-monetize: drop the $, the tax notice, and
swap price->value labels. (Count = strict superset; it adds the
column/total hides below.) */
[data-view-mode="neutral"] .money-sym,
[data-view-mode="count"] .money-sym { display: none; }
[data-view-mode="neutral"] .estimate-tax-disclaimer,
[data-view-mode="count"] .estimate-tax-disclaimer { display: none; }
[data-view-mode="neutral"] .vm-label--money,
[data-view-mode="count"] .vm-label--money { display: none; }
[data-view-mode="neutral"] .vm-label--neutral,
[data-view-mode="count"] .vm-label--neutral { display: inline; }
/* COUNT only — hide the value columns + all totals, keeping the listing
(Code/Description/Qty/Unit/Page) + items count. CSS hide only; the
shape-locked #estimate-summary-region / #estimate-footer-total stay in
the DOM so copilot_dom_refresh.js keeps patching them.
Value cells key on the existing data-cell-field; value headers on the
.vm-label spans they (uniquely) carry; ) get implicit
height-bounding from CSS-table's max-of-cells row algorithm and can
safely render full content_html (embedded /
all included). The center branch has NO equivalent natural bound —
its block stack sums children heights and previously broke the slot.
Fix: drop embedded HTML in the center body (template emits plain
text via {{ body }} = striptags|trim) AND bound the center container
tight with flex column + 2-line text clamp. The logo is flex-shrink:0
so it CAN'T be cropped by the flex algorithm — the only thing that
can clip is the bottom of overflowing text via -webkit-line-clamp:2. */
.asset-card-preview__center {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6pt;
}
.asset-card-preview__center-img {
max-height: 60pt;
max-width: 100%;
width: auto;
height: auto;
flex-shrink: 0; /* whole logo always visible — flex can't shrink it */
object-fit: contain;
display: block;
}
/* Plain text below logo in center branch. 2-line clamp keeps stack
bounded; ellipsis truncates anything beyond. text-align:center
matches the centered logo above. */
.asset-card-preview__center-text {
font-size: 10pt;
line-height: 1.4;
color: #333;
text-align: center;
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-wrap: break-word;
}
/* Solo logo (no body) — position respected via text-align */
.asset-card-preview__solo-logo--left { text-align: left; }
.asset-card-preview__solo-logo--center { text-align: center; }
.asset-card-preview__solo-logo--right { text-align: right; }
.asset-card-preview__solo-logo img {
max-width: 200pt;
max-height: 60pt;
object-fit: contain;
display: inline-block;
}
/* Text block — matches PDF .header-block tone. Safety overflow guards
for content_html (Trix output can contain wide images / long words). */
.asset-card-preview__text {
font-size: 10pt;
color: #333;
word-wrap: break-word;
}
/* Trix content_html is rendered WITHOUT a .trix-content ancestor in the
card, so Trix's own vendor CSS (max-width:100%, neutralized margins,
etc.) doesn't apply. Every cap below is a hard override of:
- HTML width/height attrs on anchor Trix wraps around for click-to-
open
- the with .attachment__name
+ .attachment__size spans
Selector scoped to .asset-card-preview so it touches the card preview
ONLY — no leak to the editor, the asset detail page, or anywhere else
trix-rendered HTML is shown. */
/* ALL images in the preview (logo cells, center logo, solo logo, AND
embedded body images). width:auto + height:auto force the img to
compute its own size from the intrinsic ratio (instead of obeying
the HTML width/height attrs); max-width + max-height then constrain
aspect-preserving. 60pt height cap matches the logo cap so the
visual scale stays uniform regardless of source. */
.asset-card-preview img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 60pt !important;
object-fit: contain !important;
}
/* Trix's wraps embedded
images. Reset margins + cap dimensions so the figure can't be taller
than the image it holds + can't add extra vertical space. */
.asset-card-preview figure,
.asset-card-preview .attachment,
.asset-card-preview .attachment--preview {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
max-height: 60pt !important;
overflow: hidden !important;
line-height: 1 !important;
}
/* The Trix wraps around inside the figure. */
.asset-card-preview .attachment a,
.asset-card-preview figure a {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
/* Hide the whole caption stack (figcaption + name span + size span).
Mirrors the PDF macro's behavior (default.html.j2:217). */
.asset-card-preview figcaption,
.asset-card-preview .attachment__caption,
.asset-card-preview .attachment__name,
.asset-card-preview .attachment__size {
display: none !important;
}
/* Genuinely-empty asset — same fixed slot height as the filled
preview, slightly muted surface bg + centered muted hint. Reads as
an intentional empty state (not a broken/empty bordered box). The
hint is OUTSIDE the scale wrapper so it renders at natural UI size,
not scaled-down preview size. */
.asset-card-preview--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-alt);
}
.asset-card-preview__empty-hint {
font-size: 0.8125rem;
color: var(--color-text-muted);
font-style: italic;
}
/* ----- Kebab button (top-right corner) ----- */
.reports-grid-card__kebab {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
color: var(--color-text-primary);
cursor: pointer;
opacity: 1;
transition: opacity 0.3s ease, background-color 0.15s ease-out;
z-index: 2;
}
.reports-grid-card__kebab:hover { background: var(--color-border-subtle); }
.reports-grid-card__kebab:active { background: var(--color-border-default); }
.reports-grid-card__kebab:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: 1px;
}
/* Desktop: kebab fades in on card hover. Tablet/mobile: always visible. */
@media (min-width: 1024px) {
.reports-grid-card__kebab { opacity: 0; }
.reports-grid-card:hover .reports-grid-card__kebab,
.reports-grid-card__kebab:focus-visible,
.reports-grid-card__kebab[aria-expanded="true"] { opacity: 1; }
}
/* ----- Kebab dropdown ----- */
.reports-grid-card__dropdown {
position: absolute;
top: calc(var(--space-sm) + 28px + 4px);
right: var(--space-sm);
min-width: 140px;
background: var(--color-bg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: var(--space-xs);
z-index: 10;
display: none;
}
.reports-grid-card__dropdown.is-open { display: block; }
/* Pinear tarjetas Commit 4 (2026-06-08) — open-kebab clipping fix, same
mechanism + same approach as .projects-grid-card (Commit 2). The card's
:hover transform (line ~7272) creates a stacking context that traps the
dropdown's z-index; adding the Pin item lengthens the menu enough to
overhang the next card, so a later sibling paints over Delete. Raising
the card while its dropdown is open lifts the whole subtree above
neighbors. Reports-scoped class — does not touch PL/Projects. */
.reports-grid-card:has(.reports-grid-card__dropdown.is-open) {
z-index: 20;
}
.reports-kebab-item {
display: block;
width: 100%;
padding: var(--space-sm) var(--space-md);
background: transparent;
border: 0;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
font-family: var(--font-sans);
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
transition: background-color 0.1s ease;
}
.reports-kebab-item:hover { background: var(--color-surface-alt); }
.reports-kebab-item:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: -2px;
}
.reports-kebab-item--danger { color: var(--color-error); }
.reports-kebab-item--danger:hover { background: var(--color-error-bg); }
.reports-kebab-divider {
height: 1px;
background: var(--color-border-subtle);
margin: 2px 0;
border: 0;
}
/* Per-card inline duplicate form — display: contents removes the
form element from layout flow so the button sits flush inside the
dropdown like the delete button (FLAG D). */
.reports-kebab-form {
display: contents;
margin: 0;
}
/* ----- Responsive ----- */
@media (max-width: 767px) {
.reports-container { padding: var(--space-lg); }
.reports-grid { grid-template-columns: 1fr; }
.reports-toolbar { justify-content: stretch; }
.reports-toolbar .btn { flex: 1 1 auto; }
}
/* ===============================================
Reports — logo slot (Phase F, F23/F27/F35)
Asset editor's structured logo field on header
and footer forms. Stacked layout in V1
(heading → preview/remove → file → position
toggles); the fancier two-column right-panel
layout is post-F polish per backlog.
=============================================== */
.logo-slot {
background: var(--color-surface-alt);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md, 8px);
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* Item 1 UX (Bundle A, 2026-05-27): the individual-logo wrap is one
flex child of .logo-slot — recreate the flex-column / --space-md gap
internally so its children keep their spacing. is-disabled dims +
blocks pointer events when "use company logo" is on (asset_logo.js
also flips `disabled` on buttons + the file input for accessibility;
hidden inputs stay submittable so the user's previous position
survives a flag round-trip). */
.logo-slot__own {
display: flex;
flex-direction: column;
gap: var(--space-md);
transition: opacity 0.15s ease;
}
.logo-slot__own.is-disabled {
opacity: 0.45;
pointer-events: none;
user-select: none;
}
/* Item 1 UX (Bundle A, 2026-05-27): scoped checkbox reset for the
logo slot. Without this, .field input (main.css:596 — height:
var(--height-input); padding; width:100%) pumps the checkbox to a
full-width row-height input box. Mirrors the established
.field-checkbox 18×18 + accent-color reset. */
.logo-slot input[type="checkbox"] {
width: 18px;
height: 18px;
padding: 0;
border: 0;
cursor: pointer;
accent-color: var(--color-accent);
flex-shrink: 0;
}
.logo-slot__heading {
/* Reuse the field-label weight/color; logo-slot is a labeled
group rather than a single labeled input. */
font-weight: 500;
color: var(--color-text-primary);
margin: 0;
}
.logo-slot__preview {
display: flex;
align-items: center;
gap: var(--space-md);
}
/* Item 7 (Bundle A, 2026-05-28): unified preview-box dimensions —
tenant-logo preview (top-right) + per-asset logo preview (below)
render at the SAME size (200×80, 5:2) regardless of source image
aspect. object-fit:contain letterboxes the image inside; the box
itself stays consistent so the two read as a coherent pair. */
.logo-slot__preview-img {
width: 200px;
height: 80px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
background: white;
object-fit: contain;
}
.logo-slot__remove {
background: none;
border: none;
padding: 0;
color: var(--color-error);
cursor: pointer;
font-size: 0.875rem;
text-decoration: underline;
}
.logo-slot__remove:hover { color: #8b1a14; }
/* Item 7 (Bundle A, 2026-05-28) — 2-column layout.
LEFT col = source pill + position picker (controls).
RIGHT col = tenant preview + per-asset block (preview/upload/remove).
Collapses to a single column under 640px (small tablet / mobile). */
.logo-slot__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-lg);
align-items: start;
}
.logo-slot__col {
display: flex;
flex-direction: column;
gap: var(--space-md);
min-width: 0;
}
/* Field group inside a column — small caption above the control.
align-items: flex-start so child controls (pill, position-toggle)
shrink to their content width instead of stretching to fill the
column. The narrow-viewport media queries below explicitly set
width:100% where they want full-bleed (position-toggle <480px). */
.logo-slot__field {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs, 4px);
}
.logo-slot__field-label {
color: var(--color-text-muted);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
}
.logo-slot__hint {
margin: var(--space-xs, 4px) 0 0 0;
}
/* Source pill — segmented two-segment control replacing the original
checkbox + inline-label row. Drives the hidden #logo_use_tenant
input via asset_logo.js; wire format unchanged ('1' or empty). */
.logo-slot__pill {
display: inline-flex;
border: 1px solid var(--color-border-default);
border-radius: 999px;
overflow: hidden;
background: white;
align-self: flex-start;
}
.logo-slot__pill-segment {
background: transparent;
border: none;
padding: var(--space-sm) var(--space-lg);
cursor: pointer;
font-size: 0.875rem;
color: var(--color-text-primary);
transition: background 120ms ease, color 120ms ease;
}
.logo-slot__pill-segment + .logo-slot__pill-segment {
border-left: 1px solid var(--color-border-default);
}
/* Hover on the INACTIVE segment: gray bg per the menu/dropdown
convention (--color-border-default #E5E5E5, NOT the near-white
--color-surface-alt #FAFAFA which left text washed out). Text color
is RE-asserted so nothing inherited (button defaults, a:hover) can
wash it. Same class of fix as the Copilot UX Polish dropdown-hover. */
.logo-slot__pill-segment:hover:not(:disabled):not(.is-active) {
background: var(--color-border-default);
color: var(--color-text-primary);
}
.logo-slot__pill-segment:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: -2px;
color: var(--color-text-primary);
}
.logo-slot__pill-segment.is-active {
background: var(--color-text-primary);
color: white;
}
/* Active + hover/focus: keep dark bg + white text (no wash). */
.logo-slot__pill-segment.is-active:hover,
.logo-slot__pill-segment.is-active:focus-visible {
background: var(--color-text-primary);
color: white;
}
.logo-slot__pill-segment:disabled {
cursor: not-allowed;
color: var(--color-text-muted);
}
/* 3-button segmented position picker (F38) — Left | Center | Right.
NOT a dropdown: 3 visible affordances so the choice is obvious.
Active button uses primary-color background; the divider between
buttons is the border-right on every btn except the last. */
.position-toggle {
display: inline-flex;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
overflow: hidden;
background: white;
}
.position-toggle__btn {
background: transparent;
border: none;
border-right: 1px solid var(--color-border-default);
padding: var(--space-sm) var(--space-lg);
cursor: pointer;
font-size: 0.875rem;
color: var(--color-text-primary);
transition: background 120ms ease, color 120ms ease;
}
.position-toggle__btn:last-child { border-right: none; }
.position-toggle__btn:hover { background: var(--color-surface-alt); }
.position-toggle__btn:focus-visible {
outline: 2px solid var(--color-text-primary);
outline-offset: -2px;
}
.position-toggle__btn.is-active {
background: var(--color-text-primary);
color: white;
}
/* Item 7 (Bundle A, 2026-05-28): grid + position-toggle narrow stacking.
Below 640px the 2-col grid collapses to single-column (handled by
.logo-slot__grid above). The position-toggle goes full-width
segmented under 480px (see breakpoint below). */
/* ===============================================
Reports — logo-slot polish (Phase G, G12)
Replaces the dated native file input with a
styled over a visually-hidden input,
adds responsive behavior at 480px viewport.
The original .logo-slot rules above remain in
force; these additions extend them.
=============================================== */
/* Visually hidden but focusable input — pointer-events:none so the
takes all clicks, opacity:0 so it's invisible, 1px
dimensions keep it focusable for keyboard nav + screen readers.
Do NOT use display:none (breaks form submit on some browsers +
makes the control invisible to assistive tech). */
/* Bundle Estética/UX item 6 Layer 2 sub-step 2b-13 (2026-05-31):
!important on width/height/position/opacity to beat the
.field input { width: 100% } cascade. Without it, the file input
inside the .logo-slot (which is wrapped in .field) is rendered at
100% of its containing block — 344px instead of 1px — extending
165px past viewport at 375 mobile and producing horizontal page-
scroll. position-absolute keeps it removed from flow; opacity 0
keeps it invisible; the styled .logo-slot__upload label is the
visible clickable surface. The intent was always 1×1; only the
specificity was wrong. */
.logo-slot__upload-input {
position: absolute !important;
opacity: 0 !important;
pointer-events: none;
width: 1px !important;
height: 1px !important;
}
/* Modern dashed-border affordance. Clicking anywhere in this block
opens the native file picker via the for=logo_file binding. */
.logo-slot__upload {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border: 1.5px dashed var(--color-border-default);
border-radius: var(--radius-md, 8px);
background: white;
color: var(--color-text-primary);
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
}
.logo-slot__upload:hover {
border-color: var(--color-text-primary);
background: var(--color-surface-alt);
}
.logo-slot__upload:focus-within {
outline: 2px solid var(--color-text-primary);
outline-offset: 2px;
}
/* Item 10 Part B (Bundle A, 2026-05-28) — drag-over feedback.
asset_logo.js toggles this class on dragenter/dragleave/drop. Swaps
the resting dashed-border-on-white look for a solid-border-with-
tint look so the drop target reads as "ready to accept" rather than
"click to upload". Part A (notes drag-drop reorder) deferred to
V1.5+ — see DEFERRED_BACKLOG.md. */
.logo-slot__upload.is-drag-over {
border-style: solid;
border-color: var(--color-text-primary);
background: var(--color-surface-alt);
}
.logo-slot__upload-icon {
font-size: 1.25rem;
line-height: 1;
font-weight: 500;
}
.logo-slot__upload-text {
font-size: 0.9375rem;
/* Truncate a long picked filename to one line inside the dashed box
(it's a flex item of .logo-slot__upload, flex-wrap:wrap — min-width:0
lets it shrink below content, max-width:100% pins it to the box so a
30-char name ellipsis-truncates instead of spilling past the edge on
mobile). Same pattern as .team-member__name. JS sets a title with the
full name for hover/long-press. The short default prompt is unaffected. */
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Confirmation state — asset_logo.js adds this when a logo file is
picked. Same --color-success token as the upload-modal filenames and
.upload-zone--picked, so "file selected" reads consistently everywhere.
This editor has no inline preview of the picked file, so the green is
the only "your selection took" signal. Placed BEFORE --error so an
error-flash (which can briefly coexist with a prior pick) still wins. */
.logo-slot__upload-text--picked {
color: var(--color-success);
font-weight: 500;
}
/* Brief inline error state for the soft drop validation (wrong file
extension). asset_logo.js sets this for ~2.5s then restores. */
.logo-slot__upload-text--error {
color: var(--color-error);
font-weight: 500;
}
.logo-slot__upload-hint {
color: var(--color-text-muted);
font-size: 0.8125rem;
margin-left: auto;
}
/* Bundle Estética/UX item 6 Layer 2 sub-step 2b-13 (2026-05-31):
Mobile restack of the entire .logo-slot section at ≤767px.
- 2-col grid → single column (the old comment claimed this already
happened at 640px, but no such rule existed — column-collapse
wasn't actually wired; this rule fills the gap)
- Pill switches to vertical-stack with horizontal separator instead
of left separator (so 2 segments share the column at full width
without text cramping or wrapping mid-label)
- Position toggle goes full-width with 3 equal-flex buttons
- Upload box goes full-width, hint wraps to its own row
Replaces the prior @media (max-width: 480px) block — 480 was too
narrow (cramping persists at 481-767). The 767 breakpoint matches
the rest of the app's mobile @media queries. */
@media (max-width: 767px) {
.logo-slot__grid { grid-template-columns: 1fr; }
.logo-slot__pill {
flex-direction: column;
width: 100%;
border-radius: var(--radius-sm);
}
.logo-slot__pill-segment { width: 100%; text-align: center; }
.logo-slot__pill-segment + .logo-slot__pill-segment {
border-left: 0;
border-top: 1px solid var(--color-border-default);
}
.position-toggle { width: 100%; display: flex; }
.position-toggle__btn { flex: 1; }
.logo-slot__upload { width: 100%; justify-content: flex-start; }
.logo-slot__upload-hint {
margin-left: 0;
margin-top: 2px;
display: block;
flex-basis: 100%;
}
}
/* ===============================================
Reports — associate view (Phase G)
The full-page composer for Header / Footer /
Notes selection per estimate.
=============================================== */
.associate-form {
max-width: 720px;
margin: 0 auto var(--space-3xl);
}
.associate-form__copy {
margin-bottom: var(--space-xl);
}
.associate-section {
background: white;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin-bottom: var(--space-lg);
}
.associate-section h2 {
margin: 0 0 var(--space-md) 0;
font-size: 1.0625rem;
font-weight: 600;
}
.associate-section__hint {
font-weight: 400;
font-size: 0.875rem;
color: var(--color-text-muted);
margin-left: var(--space-sm);
}
/* Bundle A #9 (2026-05-28) — section heading + "+ Create new" button
share a row so the action sits at the natural top-right of each
section without disrupting the existing h2 baseline. The h2's own
margin-bottom is suppressed (the row provides spacing via
margin-bottom on the head wrapper). */
.associate-section__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.associate-section__head h2 {
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.associate-select {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
background: white;
font-size: 0.9375rem;
color: var(--color-text-primary);
}
.associate-select:focus {
outline: 2px solid var(--color-text-primary);
outline-offset: -1px;
}
.associate-empty {
color: var(--color-text-muted);
font-size: 0.9375rem;
margin: 0;
}
.associate-empty a {
color: var(--color-text-primary);
font-weight: 500;
text-decoration: underline;
}
/* Notes list — ordered selected entries with per-row controls. */
.notes-selected {
list-style: none;
padding: 0;
margin: 0 0 var(--space-md) 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.notes-selected__row {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-alt);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
}
.notes-selected__name {
flex: 1;
font-size: 0.9375rem;
}
.notes-selected__controls {
display: flex;
gap: var(--space-xs);
}
/* Small icon-only buttons used inside the notes list + dialogs. */
.icon-btn {
background: transparent;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-primary);
font-size: 0.875rem;
line-height: 1;
transition: background 120ms ease, border-color 120ms ease;
}
.icon-btn:hover { background: var(--color-surface-alt); }
.icon-btn:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 1px; }
.icon-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.notes-selected__remove { color: var(--color-error); }
.notes-add {
margin-top: var(--space-md);
}
.associate-footer {
position: sticky;
bottom: 0;
background: white;
border-top: 1px solid var(--color-border-default);
padding: var(--space-md) var(--space-xl);
margin: var(--space-2xl) calc(var(--space-xl) * -1) 0;
display: flex;
gap: var(--space-md);
justify-content: flex-end;
align-items: center;
}
.page-header__subtle {
color: var(--color-text-muted);
font-weight: 400;
font-size: 0.875em;
}
@media (max-width: 640px) {
.associate-form { max-width: 100%; }
.associate-section { padding: var(--space-lg); }
.associate-footer {
flex-direction: column-reverse;
align-items: stretch;
}
.associate-footer .btn { width: 100%; }
}
/* ===============================================
Reports — Generate-PDF confirmation modal
(Phase G, G1) — informational, NOT destructive.
Distinct from .confirm-dialog (destructive).
=============================================== */
.generate-dialog {
border: none;
border-radius: var(--radius-lg);
padding: 0;
max-width: 420px;
width: 90%;
background: white;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.generate-dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.generate-dialog__inner {
padding: var(--space-xl);
position: relative;
}
.generate-dialog__close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 32px;
height: 32px;
font-size: 1.25rem;
}
.generate-dialog__title {
margin: 0 0 var(--space-md) 0;
font-size: 1.125rem;
font-weight: 600;
}
.generate-dialog__intro {
margin: 0 0 var(--space-md) 0;
color: var(--color-text-muted);
font-size: 0.9375rem;
}
.generate-dialog__summary {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-sm) var(--space-md);
margin: 0 0 var(--space-xl) 0;
font-size: 0.9375rem;
}
.generate-dialog__summary dt {
color: var(--color-text-muted);
font-weight: 500;
}
.generate-dialog__summary dd {
margin: 0;
color: var(--color-text-primary);
}
.generate-dialog__actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
flex-wrap: wrap;
}
/* Family 3 (f) commit 3 (2026-06-03) — Ungroup checkbox styling.
Discreet, smaller-than-body label + breathing room above the
action buttons row so the checkbox doesn't crowd them. */
.generate-dialog__option {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.8125rem;
color: var(--color-text-secondary);
margin: var(--space-md) 0 var(--space-lg);
}
.generate-dialog__option input[type="checkbox"] {
margin: 0;
}
/* ===============================================
Email Share — share dialog (Commit B, 2026-05-23)
Two-tab modal (Create + Manage). Parallel to
.generate-dialog shape; wider (560px) for the
URL input + manage list rows.
=============================================== */
.share-dialog {
border: none;
border-radius: var(--radius-lg);
padding: 0;
max-width: 560px;
width: 92%;
background: white;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.share-dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.share-dialog__inner {
padding: var(--space-xl);
position: relative;
}
.share-dialog__close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 32px;
height: 32px;
font-size: 1.25rem;
}
.share-dialog__title {
margin: 0 0 var(--space-xs) 0;
font-size: 1.125rem;
font-weight: 600;
padding-right: 40px; /* clear of × button */
}
.share-dialog__subtitle {
margin: 0 0 var(--space-md) 0;
color: var(--color-text-muted);
font-size: 0.875rem;
}
.share-dialog__tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--color-border);
margin: 0 0 var(--space-md) 0;
}
.share-dialog__tab {
background: transparent;
border: none;
padding: var(--space-sm) var(--space-md);
color: var(--color-text-muted);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.share-dialog__tab.is-active {
color: var(--color-text-primary);
border-bottom-color: var(--color-text-primary);
}
.share-dialog__tab-count {
display: inline-block;
background: var(--color-border-default);
color: var(--color-text-muted);
font-size: 0.75rem;
padding: 1px 6px;
border-radius: 8px;
margin-left: 4px;
min-width: 18px;
text-align: center;
}
.share-dialog__pane {
min-height: 200px;
}
.share-dialog__state {
/* States are toggled via [hidden]; no per-state visibility CSS. */
}
.share-dialog__intro {
margin: 0 0 var(--space-md) 0;
color: var(--color-text-primary);
font-size: 0.9375rem;
line-height: 1.5;
}
.share-dialog__intro--success {
color: var(--color-success);
}
.share-dialog__hint {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9375rem;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.share-dialog__error {
margin: 0 0 var(--space-md) 0;
color: var(--color-error);
font-size: 0.9375rem;
}
.share-dialog__spinner {
display: inline-block;
animation: generating-spin 1.2s linear infinite;
color: var(--color-text-muted);
font-size: 1.25rem;
}
.share-dialog__ttl {
border: none;
padding: 0;
margin: 0 0 var(--space-xl) 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.share-dialog__ttl-legend {
margin: 0 0 var(--space-sm) 0;
font-weight: 500;
font-size: 0.875rem;
color: var(--color-text-primary);
}
.share-dialog__ttl-option {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) 0;
cursor: pointer;
font-size: 0.9375rem;
}
.share-dialog__url-row {
display: flex;
gap: var(--space-sm);
margin: 0 0 var(--space-xs) 0;
}
.share-dialog__url-input {
flex: 1;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: #f9fafb;
color: var(--color-text-primary);
}
.share-dialog__copied-msg {
margin: 0 0 var(--space-md) 0;
color: var(--color-success);
font-size: 0.875rem;
}
.share-dialog__actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
flex-wrap: wrap;
margin-top: var(--space-md);
}
.share-dialog__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-height: 320px;
overflow-y: auto;
}
.share-dialog__row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"url actions"
"meta actions";
gap: 2px var(--space-md);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fdfdfe;
}
.share-dialog__row-url {
grid-area: url;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.8125rem;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.share-dialog__row-meta {
grid-area: meta;
color: var(--color-text-muted);
font-size: 0.8125rem;
}
.share-dialog__row-actions {
grid-area: actions;
display: flex;
gap: var(--space-sm);
align-items: center;
}
/* ===============================================
Reports — Generating interstitial (Phase G, G4)
Auto-submitting page shown between
"Save & generate PDF" and the streamed PDF
download. Resolves F21 (loading state).
=============================================== */
.generating-page {
max-width: 480px;
margin: var(--space-4xl) auto;
text-align: center;
padding: var(--space-2xl);
}
.generating-page__spinner {
font-size: 2.5rem;
display: inline-block;
animation: generating-spin 1.2s linear infinite;
color: var(--color-text-muted);
margin-bottom: var(--space-md);
}
@keyframes generating-spin {
to { transform: rotate(360deg); }
}
.generating-page__title {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 var(--space-sm) 0;
}
.generating-page__hint {
color: var(--color-text-muted);
font-size: 0.9375rem;
margin: 0 0 var(--space-xl) 0;
}
.generating-page__noscript {
color: var(--color-error);
margin-bottom: var(--space-md);
}
.generating-page__back {
margin-top: var(--space-2xl);
font-size: 0.875rem;
color: var(--color-text-muted);
}
.generating-page__back a {
color: var(--color-text-primary);
text-decoration: underline;
}
/* Phase G fix #2 — done-state + error-state styles + large Back button.
The default state is spinner; JS toggles [hidden] on the three
sibling .generating-page__state blocks based on fetch lifecycle. */
.generating-page__state[hidden] { display: none; }
.generating-page__check {
font-size: 3rem;
line-height: 1;
color: var(--color-success, #16745F);
margin-bottom: var(--space-md);
display: inline-block;
}
.generating-page__error-icon {
font-size: 2.25rem;
line-height: 1;
color: var(--color-error);
background: var(--color-error-bg);
width: 64px;
height: 64px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: var(--space-md);
}
/* Large "Back to " button — primary CTA in the done/error
states. Wider + taller than .btn-sm so the user can't miss it,
matching the "make it a real done-state, not a flicker" intent. */
.generating-page__back-btn {
margin-top: var(--space-xl);
min-width: 260px;
height: 48px;
padding: 0 var(--space-xl);
font-size: 1rem;
}
/* Batch 6 — the 260px min-width overflows narrow phones; full-width on mobile
so the back button always fits the viewport (label is generic + short now). */
@media (max-width: 480px) {
.generating-page__back-btn { min-width: 0; width: 100%; }
}
.generating-page__noscript-hint {
color: var(--color-text-muted);
margin: var(--space-md) 0;
}
.generating-page__noscript-form {
margin-top: var(--space-xl);
}
/* ===============================================
Duplicate Sprint (2026-05-22) — one-time
refresh-totals alert dialog. Informational
(neutral styling, NOT destructive red),
distinct from _confirm_dialog.html (destructive)
and _generate_confirm_dialog.html (Phase G
generate-PDF). Reuses the Phase G dialog
patterns + tokens for visual consistency.
=============================================== */
.dup-refresh-dialog {
border: none;
border-radius: var(--radius-lg);
padding: 0;
max-width: 420px;
width: 90%;
background: white;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.dup-refresh-dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.dup-refresh-dialog__inner {
padding: var(--space-xl);
position: relative;
}
.dup-refresh-dialog__close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 32px;
height: 32px;
font-size: 1.25rem;
}
.dup-refresh-dialog__title {
margin: 0 0 var(--space-md) 0;
font-size: 1.125rem;
font-weight: 600;
}
.dup-refresh-dialog__body {
margin: 0 0 var(--space-xl) 0;
font-size: 0.9375rem;
color: var(--color-text-primary);
line-height: 1.5;
}
.dup-refresh-dialog__actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
flex-wrap: wrap;
}
/* ===============================================
Duplicate Sprint name modal (2026-05-22 addition)
"Rename or accept" dialog, OS-file-manager-style.
Editable text input pre-filled with the suggested
name; Accept submits, Cancel closes no-op.
Neutral styling (NOT destructive).
=============================================== */
.dup-name-dialog {
border: none;
border-radius: var(--radius-lg);
padding: 0;
max-width: 440px;
width: 90%;
background: white;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.dup-name-dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.dup-name-dialog__inner {
padding: var(--space-xl);
position: relative;
}
.dup-name-dialog__close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 32px;
height: 32px;
font-size: 1.25rem;
}
.dup-name-dialog__title {
margin: 0 0 var(--space-md) 0;
font-size: 1.125rem;
font-weight: 600;
}
.dup-name-dialog__body {
margin: 0 0 var(--space-md) 0;
font-size: 0.9375rem;
color: var(--color-text-muted);
}
.dup-name-dialog__actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
flex-wrap: wrap;
}
/* ===============================================
Estimate Comparator (Sprint A — Mode 1, 2026-05-22)
Selection view + result view + per-field red.
Mode 2 retrofit (Sprint B) adds asymmetric
styles; this block is the Mode 1 foundation.
=============================================== */
.comparator-body { padding-bottom: var(--space-3xl); }
/* ----- Selection view ----- */
.comparator-selection {
/* Workflow view, not a form — paired two-slot layout needs room
to breathe. 1080px is the sweet spot between the form-width
(720px feels cramped here, post-smoke feedback 2026-05-22) and
full app-content width (1600px, which leaves an absurd gap
between the slots on wide screens). The slots already collapse
to single-column below 640px via @media below — desktop
spacious, mobile sane. */
max-width: 1080px;
margin: 0 auto;
}
.comparator-selection__search {
margin-bottom: var(--space-xl);
}
.comparator-selection__search input {
width: 100%;
padding: var(--space-md) var(--space-lg);
font-size: 1rem;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md, 8px);
background: white;
}
.comparator-selection__results {
position: relative;
margin-bottom: var(--space-xl);
max-height: 360px;
overflow-y: auto;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md, 8px);
background: white;
}
/* Bottom scroll-fade affordance REMOVED — Bundle Estética/UX item 6
Layer 2 sub-step 2b-10 (2026-05-31). The ::after gradient + inset
box-shadow (added 2026-05-28) was reading as a stray shadow
landing on the bordered list card rather than as a scroll cue at
the page level. The native scrollbar on the overflow:auto list is
sufficient affordance for "more rows below"; the visual fade was
superfluous and visually noisy inside the card. comparator_select.js
still toggles the .has-overflow-bottom class on scroll / resize /
results-refresh — harmless CSS no-op now, kept so the JS doesn't
need a paired change for a pure visual revert. */
.comparator-selection__empty {
padding: var(--space-xl);
text-align: center;
color: var(--color-text-muted);
font-size: 0.9375rem;
}
.comparator-result-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border-subtle);
transition: background 100ms ease;
}
.comparator-result-card:last-child { border-bottom: none; }
.comparator-result-card:hover { background: var(--color-surface-alt); }
.comparator-result-card__main { flex: 1; min-width: 0; }
.comparator-result-card__name {
font-weight: 500;
color: var(--color-text-primary);
font-size: 0.9375rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.comparator-result-card__meta {
color: var(--color-text-muted);
font-size: 0.8125rem;
margin-top: 2px;
}
/* Two slots side-by-side. */
.comparator-selection__slots {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.comparator-slot {
background: var(--color-surface-alt);
border: 1.5px dashed var(--color-border-default);
border-radius: var(--radius-md, 8px);
padding: var(--space-md) var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-md);
min-height: 64px;
}
.comparator-slot--filled {
background: white;
border-style: solid;
}
.comparator-slot__label {
font-weight: 600;
font-size: 0.875rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.comparator-slot__content {
flex: 1;
font-size: 0.9375rem;
color: var(--color-text-primary);
min-width: 0;
word-break: break-word;
}
.comparator-slot__remove {
flex-shrink: 0;
}
.comparator-selection__actions {
display: flex;
justify-content: center;
}
/* Recent comparisons list (post-smoke 2026-05-22). Rendered by JS
below the Compare CTA. Hidden by default; revealed when at least
one entry exists in localStorage for this tenant.
Final-tweak post-smoke: title bumped from muted-gray to primary
text + slightly larger so users notice it (Gus almost missed the
recents existed). Container is viewport-safe via max-width: 100%
and items use overflow-wrap: anywhere so long PDF filenames
wrap cleanly inside the link instead of overflowing. */
.comparator-recent {
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--color-border-subtle);
max-width: 100%;
box-sizing: border-box;
}
.comparator-recent__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 var(--space-md) 0;
/* Drop the uppercase-+-letter-spacing styling — too quiet.
Plain primary text reads as a section heading users notice. */
}
.comparator-recent__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
max-width: 100%;
}
.comparator-recent__item {
padding: 0;
max-width: 100%;
}
.comparator-recent__link {
display: block;
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-alt);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
font-size: 0.9375rem;
text-decoration: none;
/* Long filenames wrap inside the link instead of overflowing the
container — viewport-safe even on narrow screens. */
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
box-sizing: border-box;
transition: background 100ms ease;
}
.comparator-recent__link:hover {
background: white;
border-color: var(--color-border-default);
text-decoration: none;
}
@media (max-width: 640px) {
.comparator-selection__slots {
grid-template-columns: 1fr;
}
}
/* ----- Result view: two-card header ----- */
.comparator-headers {
display: grid;
/* Match the table's column widths so each header card sits exactly
over its column. Empty spacer takes the leftmost 18% above the
Code/Type column (which needs no header card). Post-smoke
feedback 2026-05-22 — earlier 1fr 1fr split was 50/50 across
full width and didn't align with the 18%/41%/41% table columns. */
grid-template-columns: 18% 41% 41%;
gap: 0;
margin-bottom: var(--space-xl);
}
.comparator-headers__spacer { /* intentionally empty — visual gutter */ }
.comparator-header {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md, 8px);
/* Slight inset so the two color cards don't touch each other at
the seam — visual breathing room WITHOUT breaking the
header-over-column alignment (the box's outer position still
spans the column; only the visible card is inset). */
margin: 0 4px;
/* Bumped to 1.5px solid + darker border-color per fix #3 — the
1px subtle border was visually invisible against the tinted
background. Per-side border-color comes from --a/--b variants
below. */
border: 1.5px solid;
}
/* CC10: blue for A, amber for B. Neutral tints — don't fight the
red diff highlight in the table below. Darker border-color +
print-color-adjust:exact ensures backgrounds render in browser
print + WeasyPrint PDF (which otherwise strips background-color).
Post-smoke 2026-05-22: previous border colors (#C6DDF1 / #ECD7A4)
were too close to the background; eye lost the box edges. */
.comparator-header--a {
background: #EEF4FB;
border-color: #6FA8D1;
/* WeasyPrint + browser print: force background to render */
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.comparator-header--b {
background: #FBF3E0;
border-color: #C9A14A;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.comparator-header__label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: 2px;
}
.comparator-header__mode {
font-size: 0.7rem;
font-weight: 500;
color: var(--color-text-muted);
margin-bottom: 6px;
}
.comparator-header__name {
font-weight: 600;
font-size: 1rem;
margin-bottom: 4px;
word-break: break-word;
}
.comparator-header__meta {
color: var(--color-text-muted);
font-size: 0.875rem;
}
.comparator-header__sep {
margin: 0 4px;
}
@media (max-width: 640px) {
.comparator-headers { grid-template-columns: 1fr; }
}
/* ----- Result view: comparison table ----- */
.comparator-table {
width: 100%;
/* Item 6 post-smoke 2026-05-22: switched from default collapse
to separate + zero spacing so the thead A/B cells can carry
border-radius (rounded corners). Body rows still read as a
continuous list because adjacent cells touch at zero spacing.
Border-bottom on cells remains the visible row divider. */
border-collapse: separate;
border-spacing: 0;
font-size: 0.9375rem;
margin-bottom: var(--space-xl);
}
/* Table header — only the "Code / Type" label survives. The A and B
cells render as inert empty space. The big ESTIMATE A blue /
ESTIMATE B amber cards ABOVE the table already identify which
column is which; an "A / B" sub-strip was visual redundancy.
No background, no border, no border-radius — tightened vertical
padding brings the first item row closer to the top header cards
(less dead space). Cleanup applied 2026-05-22 (post-Mode-1
strip removal). */
.comparator-table thead th {
font-weight: 600;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
padding: var(--space-xs) var(--space-md);
text-align: left;
border: none;
background: transparent;
}
.comparator-table tbody td {
/* Item 2 post-smoke 2026-05-22: tighter vertical padding + darker
row divider — pushes the visual from "spaced cards" to
"scannable list". Horizontal padding unchanged. */
padding: var(--space-sm) var(--space-md);
vertical-align: top;
border-bottom: 1px solid var(--color-border-default);
}
.comparator-table__code {
width: 18%;
}
.comparator-table__side {
width: 41%;
}
/* Bundle Estética/UX item 6 Layer 2 sub-step 2b-9 (2026-05-31):
A / B column labels for the table header — hidden at desktop
(the big ESTIMATE A / B header cards above the table already
identify columns), shown at ≤767px where the cards stack
vertically above and lose proximity to the table rows.
Colors use the SAME saturated border tokens as the header
cards (#6FA8D1 / #C9A14A) rather than the pale card
backgrounds (#EEF4FB / #FBF3E0) so the labels read clearly
on the white table-header background. Hardcoded literals
(not tenant brand color) so A stays blue + B stays amber
regardless of which tenant brand color is set in Settings. */
.comparator-table__side-label {
display: none;
}
@media (max-width: 767px) {
.comparator-table__side-label {
display: inline;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.04em;
}
.comparator-table__side-label--a { color: #4D87B5; }
.comparator-table__side-label--b { color: #A6852E; }
}
.comparator-row__code {
font-weight: 600;
display: block;
}
.comparator-row__type {
display: block;
font-size: 0.8125rem;
color: var(--color-text-muted);
text-transform: lowercase;
margin-top: 2px;
}
/* Cell — 2-line compact list. Line 1 = description (no label),
line 2 = "Qty: N" + tab-gap + "U.Price: $X.XX". Labels are
muted gray (sibling spans, NOT inside the diff-affected value
span — so labels stay gray even when the value is red).
Decimal alignment via tabular-nums + min-width on .price.
Tighter margin between desc and qty-price line per post-Mode-1
polish tweak (2026-05-22). */
.comparator-cell__desc {
font-size: 0.9375rem;
color: var(--color-text-primary);
margin-bottom: 2px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.comparator-cell__qty-price {
display: flex;
align-items: baseline;
gap: var(--space-xl); /* tab-like gap between qty-group and price-group */
flex-wrap: wrap; /* mobile safety: wraps before overflowing */
font-size: 0.9375rem;
font-variant-numeric: tabular-nums;
}
.comparator-cell__qty-group,
.comparator-cell__price-group {
display: inline-flex;
align-items: baseline;
gap: 4px; /* tight gap between label and value */
}
.comparator-cell__label {
color: var(--color-text-muted);
font-size: 0.8125rem;
font-weight: 400;
}
.comparator-cell__qty {
/* Left-anchored; no min-width — width hugs the digits. */
}
.comparator-cell__price {
text-align: right;
/* Wide enough for prices up to ~$9,999.99 to right-align cleanly.
Larger amounts wrap (acceptable edge case). */
min-width: 88px;
}
.comparator-cell__empty-dash { color: var(--color-text-muted); }
.comparator-cell__placeholder {
color: var(--color-text-muted);
font-style: italic;
font-size: 0.875rem;
}
/* CC7: per-field red. Applied to .comparator-cell__desc /
__qty / __price when the row's `diffs` set contains that field.
.comparator-diff is the modifier class. */
.comparator-diff {
color: var(--color-error);
font-weight: 600;
}
/* Red-diff caption (2026-06-10) — sober explanatory line under the result
header cards: the highlighted differences in the table are shown in red.
Breathing room above + below; matches the diff red token. */
.comparator-diff-note {
margin: var(--space-lg) 0;
text-align: center;
font-size: 0.875rem;
color: var(--color-error);
}
/* The ▲ marker (CC6 / MC7) — color-independent diff signal for
B/W printing + color-blind users. Inline with the value. */
.comparator-diff__marker {
display: inline-block;
margin-left: 4px;
font-size: 0.75rem;
color: var(--color-error);
vertical-align: text-top;
}
/* Cell that has no content on its side (only_a row's B cell, or
only_b row's A cell). Subtle visual cue without screaming "bug". */
.comparator-table__cell--empty {
background: var(--color-surface-alt);
}
/* Totals + diff footer. */
.comparator-totals-row td {
font-weight: 600;
border-top: 2px solid var(--color-text-primary);
padding-top: var(--space-md);
}
/* Mixed view-mode notice in place of an apples+oranges combined total
(one estimate priced, the other neutral/count). Muted + italic — an
informational caption, not an error. Shared by the table tfoot td and
the sticky-footer span. */
.comparator-totals-note {
font-weight: 400;
font-style: italic;
color: var(--color-text-secondary);
}
.comparator-diff-row td {
border-bottom: none;
}
.comparator-diff-row__value {
font-weight: 700;
font-size: 1.0625rem;
}
.comparator-empty-state {
padding: var(--space-2xl);
text-align: center;
color: var(--color-text-muted);
}
/* ----- Result view: sticky bar + branding modal -----
Post-smoke 2026-05-22: replaced the inline branding form with
a Phase-F/G-style sticky footer (~64px non-duplicating) + a
modal containing the full branding picker. The result page is
now JUST the comparison; configuration lives in a focused
modal that opens on Generate click. Pattern reuses Phase G's
fetch+Blob+done-state machine, in-modal instead of as a
separate interstitial page. */
/* Sticky footer — matches the .estimate-footer pattern shape +
spacing. Anchored at viewport bottom; result page gains
padding-bottom to compensate. */
.comparator-sticky-footer {
position: sticky;
bottom: 0;
z-index: 10;
background: white;
border-top: 1px solid var(--color-border-default);
padding: var(--space-md) var(--space-xl);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
margin: var(--space-2xl) calc(var(--space-xl) * -1) 0;
}
.comparator-sticky-footer__totals {
display: flex;
align-items: baseline;
gap: var(--space-sm);
font-size: 0.9375rem;
flex-wrap: wrap;
}
.comparator-sticky-footer__total {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-variant-numeric: tabular-nums;
}
.comparator-sticky-footer__label {
color: var(--color-text-muted);
font-size: 0.875rem;
}
.comparator-sticky-footer__sep {
color: var(--color-text-muted);
}
.comparator-sticky-footer__diff strong {
font-size: 1rem;
}
/* Below 640px the bar stacks vertically (matching Phase F/G
mobile collapse pattern). Button goes full-width on top, totals
below — keeps the primary action thumb-reachable. */
@media (max-width: 640px) {
.comparator-sticky-footer {
flex-direction: column-reverse;
align-items: stretch;
padding: var(--space-sm) var(--space-md);
gap: var(--space-sm);
}
.comparator-sticky-footer .btn { width: 100%; }
.comparator-sticky-footer__totals { justify-content: center; }
}
/* Desktop (≥641px): switch from sticky → fixed so the bar is
pinned to the viewport bottom on short comparisons too, matching
.estimate-footer / .price-list-footer / project-detail footer.
Mobile (≤640px) above keeps position: sticky so the existing
mobile layout is untouched. .comparator-body padding-bottom: 96px
already clears the bar. */
@media (min-width: 641px) {
.comparator-sticky-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
margin: 0;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}
}
/* Body padding so the sticky bar doesn't overlap the last row of
the comparison table. Applied to .comparator-body (the section
wrapper in templates/comparator/layout.html). */
.comparator-body {
/* Already has padding-bottom: var(--space-3xl); — overrides any
conflicting rule below. Bar height ~64px desktop / ~120px mobile;
space-3xl is 48px so add extra. */
padding-bottom: 96px;
}
/* ============================================================
Comparator Mode 2 (Sprint B Phase B.3, 2026-05-23)
============================================================
New surfaces:
.comparator-toggle — segmented control (vs-est | vs-plan)
.comparator-slot--plan — variant of comparator-slot for the
plan-upload partial
.comparator-plan-upload — file-input + filename pill
.comparator-plan-pl-checkbox — "Apply a price list?" row
.comparator-plan-pl-dropdown — conditional PL select
.comparator-mode-banner — "Estimate vs Plan — …" banner
at the top of the result view
All token-based so the design tokens (color/space/radius) keep
these aligned with the rest of the app.
*/
/* ----- Segmented toggle (vs-est | vs-plan) ----- */
.comparator-toggle {
display: inline-flex;
margin: var(--space-lg) 0;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md, 8px);
overflow: hidden;
background: var(--color-surface);
}
.comparator-toggle__option {
padding: var(--space-sm) var(--space-lg);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
border-right: 1px solid var(--color-border-default);
transition: background 0.15s, color 0.15s;
}
.comparator-toggle__option:last-child { border-right: none; }
.comparator-toggle__option:hover {
background: var(--color-surface-alt);
color: var(--color-text-primary);
text-decoration: none;
}
.comparator-toggle__option.is-active {
background: var(--color-text-primary);
color: var(--color-surface);
font-weight: 600;
}
.comparator-toggle__option:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ----- Slot B in vs-plan mode ----- */
.comparator-slot--plan {
/* Inherits .comparator-slot's base layout (dashed border, padding,
radius). The override is just to align the inner form's spacing
since the form replaces the slot's content/remove children. */
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.comparator-plan-form {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin: 0;
}
.comparator-plan-upload {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.comparator-plan-upload__pick {
/* The styled as a button — clicking opens the hidden file input. */
cursor: pointer;
margin: 0;
}
.comparator-plan-upload__filename {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-sm);
background: var(--color-surface-alt);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
color: var(--color-success);
font-weight: 500;
max-width: min(320px, 100%); /* 320px desktop cap, but never wider than the box (mobile) */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.comparator-plan-upload__clear {
/* Inherits .btn .btn-secondary .btn-sm — nothing extra needed. */
}
.comparator-plan-pl-checkbox {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.875rem;
color: var(--color-text-primary);
cursor: pointer;
}
.comparator-plan-pl-checkbox input { margin: 0; }
.comparator-plan-pl-dropdown {
/* Indent under the checkbox to visually anchor it as a sub-option. */
margin-left: var(--space-lg);
max-width: 360px;
}
/* ----- Mode banner (result view, Mode 2) ----- */
.comparator-mode-banner {
background: var(--color-surface-alt);
border-left: 3px solid var(--color-text-muted);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-lg);
font-size: 0.9375rem;
color: var(--color-text-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.comparator-mode-banner__hint {
display: block;
margin-top: 2px;
color: var(--color-text-muted);
font-size: 0.8125rem;
}
/* ----- Plan analyzing shell (Mode 2) -----
Reuses .analyzing-* classes from the existing
estimates/analyzing.html stack (.analyzing-content--has-footer,
.analyzing-header, .analyzing-card, .analyzing-progress,
.analyzing-spinner, .progress-bar, .page-status*,
.analyzing-footer). No comparator-specific overrides needed —
the SSE client pattern is shared. */
/* ----- Comparator PDF modal ----- */
.comparator-pdf-dialog {
border: none;
border-radius: var(--radius-lg);
padding: 0;
max-width: 560px;
width: 92%;
background: white;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.comparator-pdf-dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.comparator-pdf-dialog__inner {
padding: var(--space-xl);
position: relative;
}
.comparator-pdf-dialog__inner--centered {
text-align: center;
padding: var(--space-2xl) var(--space-xl);
}
.comparator-pdf-dialog__close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 32px;
height: 32px;
font-size: 1.25rem;
}
.comparator-pdf-dialog__title {
margin: 0 0 var(--space-md) 0;
font-size: 1.125rem;
font-weight: 600;
}
.comparator-pdf-dialog__intro,
.comparator-pdf-dialog__hint {
color: var(--color-text-muted);
font-size: 0.9375rem;
margin: 0 0 var(--space-md) 0;
}
/* Form state — branding picker inside the modal. */
.comparator-pdf-dialog__branding {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.comparator-pdf-dialog__field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.comparator-pdf-dialog__field select {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
background: white;
font-size: 0.9375rem;
color: var(--color-text-primary);
}
.comparator-pdf-dialog__notes {
margin-bottom: var(--space-lg);
}
.comparator-pdf-dialog__notes-label {
display: block;
font-size: 0.875rem;
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
}
.comparator-pdf-dialog__actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
flex-wrap: wrap;
}
.comparator-pdf-dialog__actions--centered { justify-content: center; }
/* Generating state — spinner. Reuses .generating-page__spinner
animation from Phase G. */
.comparator-pdf-dialog__spinner {
font-size: 2.5rem;
display: inline-block;
animation: generating-spin 1.2s linear infinite;
color: var(--color-text-muted);
margin-bottom: var(--space-md);
}
/* Done state — success checkmark. */
.comparator-pdf-dialog__check {
font-size: 3rem;
line-height: 1;
color: var(--color-success, #16745F);
margin-bottom: var(--space-md);
display: inline-block;
}
/* Error state — exclamation badge. */
.comparator-pdf-dialog__error-icon {
font-size: 2.25rem;
line-height: 1;
color: var(--color-error);
background: var(--color-error-bg);
width: 64px;
height: 64px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: var(--space-md);
}
/* Close button on the done state — large primary, anchors the
completion moment (matches Phase G generating.html done state). */
.comparator-pdf-dialog__close-btn {
margin-top: var(--space-md);
min-width: 200px;
height: 44px;
padding: 0 var(--space-xl);
}
@media (max-width: 480px) {
.comparator-pdf-dialog__branding { grid-template-columns: 1fr; }
.comparator-pdf-dialog__close-btn { width: 100%; }
}
/* Tablet + desktop (≥481px): the branding picker stays as a 2-col
grid here, which is where the latent overflow lived — grid items
default to min-width: auto, so a whose intrinsic width
(driven by its longest option text) exceeded the 1fr track would
push the whole modal past its 560px max-width and trigger a
horizontal scrollbar inside the dialog. min-width: 0 on the grid
item lets it shrink; width/max-width: 100% on the select pins it
to its cell. The notes-row name-ellipsis covers the same trap for
long note titles. Mobile (≤480px) above already collapses the
grid to 1fr so the overflow path doesn't exist there — these
rules don't fire below 481px. */
@media (min-width: 481px) {
.comparator-pdf-dialog__field { min-width: 0; }
.comparator-pdf-dialog__field select { width: 100%; max-width: 100%; }
.notes-selected__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* =========================================================
NOTIFICATION BELL — Support Tickets Sprint Commit A
========================================================= */
/* The bell is a element so native open/close handles state.
JS only wires click-outside, ESC, and the mark-read fetch.
Mounted in layout/app.html between the usage indicator and the
user-name span. */
.notification-bell {
position: relative;
/* default browser behavior renders a list-marker triangle
on . Hide it — the bell icon IS the affordance. */
}
.notification-bell > summary {
list-style: none;
}
.notification-bell > summary::-webkit-details-marker {
display: none;
}
.notification-bell__trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: var(--space-xs) var(--space-sm);
color: var(--color-text-secondary);
border-radius: var(--radius-sm);
transition: color 120ms ease, background 120ms ease;
user-select: none;
}
.notification-bell__trigger:hover,
.notification-bell[open] .notification-bell__trigger {
color: var(--color-text-primary);
background: var(--color-surface-alt);
}
.notification-bell__icon {
display: block;
vertical-align: middle;
}
.notification-bell__badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--color-accent-vibrant);
color: var(--color-text-inverse);
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
border-radius: var(--radius-pill);
pointer-events: none;
box-shadow: 0 0 0 2px var(--color-bg);
}
/* The dropdown is absolutely positioned under the bell trigger.
Use a high z-index so it floats above page content but stays under
any modal (which the browser puts on its own top layer). */
.notification-bell__dropdown {
position: absolute;
top: calc(100% + var(--space-xs));
right: 0;
width: 360px;
max-width: calc(100vw - var(--space-lg) * 2);
max-height: 70vh;
overflow-y: auto;
background: var(--color-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-lg);
z-index: 50;
}
/* Estética/UX item 6 — mobile bell dropdown anchoring (2026-06-01).
At ≤768px the bell sits ~64px from the right viewport edge; the
base `position: absolute; right: 0; width: 360px` anchors the
dropdown to the bell, producing a left-edge clip ≈ −20px (verified
empirically via the offenders query: left=-20, right=323 at vw=375
with bell at right=311). Switch to `position: fixed` anchored to
the viewport on mobile — decouples from the bell's positioning
context entirely. Topbar is 56px tall (see .app-topbar `height: 56px`
above); 8px gutter on each side keeps the dropdown clear of the
edges. Desktop (≥769px) keeps the original absolute/right:0/360px
behavior unchanged. */
@media (max-width: 768px) {
.notification-bell__dropdown {
position: fixed;
top: calc(56px + var(--space-xs));
left: var(--space-sm);
right: var(--space-sm);
width: auto;
max-width: none;
max-height: calc(100vh - 56px - var(--space-lg));
}
}
.notification-bell__header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border-subtle);
position: sticky;
top: 0;
background: var(--color-surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.notification-bell__close {
border: none;
background: none;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
color: var(--color-text-muted);
padding: 0 var(--space-xs);
border-radius: 4px;
flex-shrink: 0;
}
.notification-bell__close:hover { color: var(--color-text-primary); }
/* Seeding overlay (2026-06-30) — register/verify "setting up your workspace". */
.seeding-overlay {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.92);
}
.seeding-overlay__box { text-align: center; }
.seeding-overlay__spinner {
width: 40px;
height: 40px;
margin: 0 auto var(--space-md);
border: 3px solid var(--color-border-default);
border-top-color: var(--color-text-primary);
border-radius: 50%;
animation: seeding-spin 0.8s linear infinite;
}
@keyframes seeding-spin { to { transform: rotate(360deg); } }
.seeding-overlay__text {
margin: 0;
font-size: 1rem;
font-weight: 500;
color: var(--color-text-primary);
}
.notification-bell__header-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
}
.notification-bell__list {
list-style: none;
margin: 0;
padding: 0;
}
.notification-bell__item {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border-subtle);
/* Per-element colors set explicitly below — title + body stay
dark/legible regardless of read state (ST-NEW-8). Read/unread
distinction lives ENTIRELY in the background tint + the accent
dot on the title; dimming the body text made it washed-out and
hard to read (caught in Commit B smoke). */
}
.notification-bell__item:last-child {
border-bottom: none;
}
/* Unread = surface-alt background + a 3px accent bar on the left edge.
The old ::before accent dot was dropped (the type-icon now owns the
left gutter), but the background tint alone read too subtly — so the
left bar restores a clear unread signal that coexists with the icon
(bar is on the item edge; icon sits inside next to the title). The
bar is an inset box-shadow, NOT border-left, so read + unread rows
keep identical text alignment (a real border would shift content 3px).
No color change on the text itself — readability stays constant. */
.notification-bell__item--unread {
background: var(--color-surface-alt);
box-shadow: inset 3px 0 0 0 var(--color-accent-vibrant);
}
/* Title row: leading semantic glyph + title text (Notification Icons
mini-sprint). The icon owns the left gutter; align-items:flex-start
keeps it top-aligned with the first line of a wrapping title. */
.notification-bell__item-head {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}
.notification-bell__title {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: var(--space-xs);
color: var(--color-text-primary);
}
/* Semantic notification glyph. Color is driven by currentColor so a
single `color:` line per palette recolors the inline SVG's fill +
stroke. Same --color-* tokens the admin status dots use. The old
unread ::before accent dot was REMOVED — the glyph now occupies the
left gutter, and unread state reads from the item's background tint
(.notification-bell__item--unread) alone. */
.notification-bell__msg-icon {
flex-shrink: 0;
display: inline-flex;
line-height: 0;
margin-top: 1px; /* optical align with title cap height */
}
.notification-bell__msg-icon-svg {
width: 16px;
height: 16px;
}
.notification-bell__msg-icon--info { color: var(--color-info); }
.notification-bell__msg-icon--warning { color: var(--color-warning); }
.notification-bell__msg-icon--success { color: var(--color-success); }
.notification-bell__msg-icon--error { color: var(--color-error); }
.notification-bell__msg-icon--muted { color: var(--color-text-muted); }
.notification-bell__body {
font-size: 0.8125rem;
line-height: 1.45;
color: var(--color-text-primary);
white-space: pre-wrap;
word-break: break-word;
}
.notification-bell__links {
margin-top: var(--space-sm);
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.notification-bell__link {
/* Use existing .btn-secondary .btn-sm tokens; nothing extra needed. */
text-decoration: none;
}
.notification-bell__time {
display: block;
margin-top: var(--space-xs);
font-size: 0.75rem;
color: var(--color-text-muted);
}
.notification-bell__empty {
padding: var(--space-xl) var(--space-lg);
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
@media (max-width: 480px) {
.notification-bell__dropdown {
width: calc(100vw - var(--space-md) * 2);
right: calc(var(--space-md) * -1);
}
}
/* =========================================================
ADMIN AREA — Support Tickets Sprint Commit A (extended in C)
========================================================= */
/* Admin section reuses the settings sidebar pattern (settings-shell
+ settings-tabs) but with its own class names so the two surfaces
can drift independently. */
.admin-shell {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--space-2xl);
margin-top: var(--space-xl);
}
.admin-tabs {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.admin-tab {
padding: var(--space-sm) var(--space-md);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
transition: background 120ms ease, color 120ms ease;
}
.admin-tab:hover {
color: var(--color-text-primary);
background: var(--color-surface-alt);
}
.admin-tab.is-active {
color: var(--color-text-primary);
background: var(--color-surface-alt);
font-weight: 600;
}
.admin-body {
min-width: 0;
}
/* Admin form layout — send-notification form uses these. */
.admin-form {
max-width: 640px;
}
.admin-form__field {
margin-bottom: var(--space-lg);
}
.admin-form__label {
display: block;
margin-bottom: var(--space-xs);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
}
.admin-form__input,
.admin-form__textarea,
.admin-form__select {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-family: inherit;
background: var(--color-surface);
color: var(--color-text-primary);
}
.admin-form__textarea {
min-height: 140px;
resize: vertical;
}
.admin-form__hint {
margin-top: var(--space-xs);
font-size: 0.75rem;
color: var(--color-text-muted);
}
.admin-form__error {
margin-top: var(--space-xs);
font-size: 0.8125rem;
color: var(--color-error);
}
.admin-form__scope-radios,
.admin-form__link-rows {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.admin-form__link-row {
display: grid;
grid-template-columns: 1fr 2fr auto;
gap: var(--space-sm);
align-items: center;
}
.admin-form__link-add {
align-self: flex-start;
}
/* Icon picker — Notification Icons mini-sprint. Radio-grid of selectable
glyph tiles, same checked-state idiom as .contact-form__chip
(visually-hidden radio + :has(:checked) highlight). Each tile shows
the glyph in its own semantic color + the key name. */
.admin-form__icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: var(--space-sm);
border: none;
padding: 0;
margin: 0;
}
.admin-form__icon-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--space-xs);
padding: var(--space-sm);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
cursor: pointer;
text-align: center;
transition: background 0.12s ease, border-color 0.12s ease;
}
.admin-form__icon-option input[type='radio'] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.admin-form__icon-option:hover {
background: var(--color-surface-alt);
}
.admin-form__icon-option:has(input[type='radio']:checked) {
border-color: var(--color-accent);
box-shadow: inset 0 0 0 1px var(--color-accent);
background: var(--color-surface-alt);
}
.admin-form__icon-option:has(input[type='radio']:focus-visible) {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Picker tiles render the glyph a touch larger than the 16px bell size
for legibility while scanning the grid. */
.admin-form__icon-option .notification-bell__msg-icon-svg {
width: 22px;
height: 22px;
}
.admin-form__icon-default {
font-size: 1.25rem;
line-height: 0;
height: 22px;
display: inline-flex;
align-items: center;
color: var(--color-text-muted);
}
.admin-form__icon-name {
font-size: 0.6875rem;
line-height: 1.2;
color: var(--color-text-muted);
text-transform: capitalize;
}
.admin-form__actions {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-xl);
}
@media (max-width: 768px) {
.admin-shell {
grid-template-columns: 1fr;
}
.admin-tabs {
flex-direction: row;
flex-wrap: wrap;
}
.admin-form__link-row {
grid-template-columns: 1fr;
}
}
/* Topbar Admin nav link gating — Commit A wires the visible link;
styling reuses .app-topbar__navlink so nothing else needed. */
/* =========================================================
CONTACT FORM — Support Tickets Sprint Commit B
========================================================= */
.contact-form {
max-width: 640px;
}
.contact-form__field {
margin-bottom: var(--space-xl);
}
.contact-form__label,
.contact-form__legend {
display: block;
margin-bottom: var(--space-sm);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
}
.contact-form__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
border: none;
padding: 0;
margin: 0;
}
.contact-form__chip {
position: relative;
display: inline-flex;
align-items: center;
padding: var(--space-sm) var(--space-lg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-pill);
cursor: pointer;
font-size: 0.875rem;
background: var(--color-surface);
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
user-select: none;
}
.contact-form__chip input[type='radio'] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.contact-form__chip:hover {
background: var(--color-surface-alt);
}
.contact-form__chip:has(input[type='radio']:checked) {
background: var(--color-accent);
color: var(--color-text-inverse);
border-color: var(--color-accent);
}
.contact-form__chip:has(input[type='radio']:focus-visible) {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.contact-form__textarea {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-family: inherit;
background: var(--color-surface);
color: var(--color-text-primary);
min-height: 180px;
resize: vertical;
}
.contact-form__counter {
margin-top: var(--space-xs);
font-size: 0.75rem;
color: var(--color-text-muted);
text-align: right;
}
.contact-form__hint {
margin-top: var(--space-xs);
font-size: 0.75rem;
color: var(--color-text-muted);
}
.contact-form__actions {
margin-top: var(--space-xl);
}
/* =========================================================
ADMIN CONTACT VIEW — Support Tickets Sprint Commit C
========================================================= */
/* Status dots (STC-4 lock): one colored dot per status. Reuses
existing VDP semantic-color tokens so future palette tweaks
propagate automatically. */
.status-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
vertical-align: middle;
margin-right: 4px;
background: var(--color-text-muted); /* default fallback */
}
.status-dot--new { background: var(--color-info); }
.status-dot--in_progress { background: var(--color-warning); }
.status-dot--resolved { background: var(--color-success); }
.status-dot--closed { background: var(--color-text-muted); }
/* Admin sidebar badge for the "Contact messages" link's new-count.
Same shape as the bell badge but admin-tab-specific positioning. */
.admin-tab__badge {
display: inline-block;
min-width: 18px;
height: 18px;
padding: 0 6px;
margin-left: 6px;
background: var(--color-accent-vibrant);
color: var(--color-text-inverse);
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
border-radius: var(--radius-pill);
vertical-align: 1px;
}
/* Filter bar above the list. Chips + dropdowns + search + sort. */
.admin-list-filters {
margin-bottom: var(--space-xl);
}
.admin-list-filters__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.admin-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--space-xs) var(--space-md);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-pill);
font-size: 0.8125rem;
color: var(--color-text-secondary);
text-decoration: none;
background: var(--color-surface);
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.admin-chip:hover {
background: var(--color-surface-alt);
color: var(--color-text-primary);
}
.admin-chip.is-active {
background: var(--color-accent);
color: var(--color-text-inverse);
border-color: var(--color-accent);
}
.admin-chip.is-active .status-dot {
/* Override the colored dot when chip is dark-active so the dot
stays visible against the dark background. */
box-shadow: 0 0 0 1px var(--color-text-inverse);
}
.admin-chip__count {
font-size: 0.6875rem;
opacity: 0.75;
padding-left: 4px;
border-left: 1px solid currentColor;
margin-left: 4px;
}
.admin-list-filters__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
}
.admin-list-filters__row .admin-form__select,
.admin-list-filters__row .admin-form__input {
width: auto;
min-width: 160px;
flex: 0 1 auto;
}
.admin-list-filters__row input[type='search'] {
flex: 1 1 220px;
}
.admin-list-banner {
padding: var(--space-sm) var(--space-md);
background: var(--color-warning-bg);
border: 1px solid var(--color-warning);
border-radius: var(--radius-sm);
color: var(--color-warning);
font-size: 0.8125rem;
margin-bottom: var(--space-md);
}
.admin-list-empty {
padding: var(--space-2xl);
text-align: center;
color: var(--color-text-muted);
background: var(--color-surface-alt);
border-radius: var(--radius-sm);
}
/* Admin list table. */
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.admin-table th {
text-align: left;
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border-default);
font-weight: 600;
color: var(--color-text-secondary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-table td {
padding: var(--space-md);
border-bottom: 1px solid var(--color-border-subtle);
color: var(--color-text-primary);
vertical-align: top;
}
.admin-table__row:hover {
background: var(--color-surface-alt);
}
.admin-table__sub {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: 2px;
}
.admin-table__preview {
color: var(--color-text-secondary);
font-size: 0.8125rem;
line-height: 1.4;
}
/* Detail page. */
.admin-back-link {
display: inline-block;
margin-bottom: var(--space-md);
font-size: 0.875rem;
color: var(--color-text-secondary);
text-decoration: none;
}
.admin-back-link:hover {
color: var(--color-text-primary);
}
.admin-detail__header {
margin-bottom: var(--space-xl);
}
.admin-detail__from {
font-size: 0.875rem;
font-weight: 400;
color: var(--color-text-muted);
}
.admin-detail__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-md);
margin-top: var(--space-md);
}
.admin-detail__meta > div {
font-size: 0.8125rem;
}
.admin-detail__meta dt {
color: var(--color-text-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.admin-detail__meta dd {
margin: 0;
color: var(--color-text-primary);
}
.admin-detail__meta code {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-text-secondary);
}
.admin-detail__message-block {
margin-bottom: var(--space-xl);
padding: var(--space-lg);
background: var(--color-surface-alt);
border-radius: var(--radius-md, 8px);
}
.admin-detail__message-block h3 {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
font-weight: 600;
}
.admin-detail__message-body {
white-space: pre-wrap;
word-break: break-word;
line-height: 1.5;
color: var(--color-text-primary);
}
.admin-detail__status-form {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border-subtle);
}
.admin-detail__reply-hint {
font-size: 0.8125rem;
color: var(--color-text-secondary);
background: var(--color-info-bg);
padding: var(--space-md);
border-radius: var(--radius-sm);
line-height: 1.5;
}
.admin-detail__reply-hint code {
font-family: var(--font-mono);
font-size: 0.75rem;
background: var(--color-bg);
padding: 2px 4px;
border-radius: 3px;
}
/* =========================================================
SUPPORT-LINK SHORTCUT — admin send-notification form
Mini-sprint 2026-05-24 (SL-LOCK-1..5).
========================================================= */
.admin-form__shortcut {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
padding: var(--space-xs) 0;
font-size: 0.875rem;
color: var(--color-text-primary);
cursor: pointer;
user-select: none;
}
.admin-form__shortcut input[type='checkbox'] {
margin: 0;
cursor: pointer;
}
.admin-form__shortcut code {
font-family: var(--font-mono);
font-size: 0.75rem;
background: var(--color-surface-alt);
padding: 2px 4px;
border-radius: 3px;
color: var(--color-text-secondary);
}
/* SL-LOCK-2 inline hint when all 3 manual rows are full. Warning
palette + thin left rule reads as "advisory" rather than "error". */
.admin-form__shortcut-hint {
margin: 0 0 var(--space-md) 0;
padding: var(--space-xs) var(--space-sm);
background: var(--color-warning-bg);
border-left: 3px solid var(--color-warning);
color: var(--color-warning);
font-size: 0.8125rem;
border-radius: var(--radius-sm);
}
/* SL-LOCK-3 visual lock on the managed row — inputs read as
"not user-editable while the checkbox is checked". */
.admin-form__link-row.is-managed input {
background: var(--color-surface-alt);
color: var(--color-text-secondary);
cursor: not-allowed;
}
/* Hide the Remove button on the managed row — the checkbox is the
single source of state, so removing the row should happen via
uncheck, not via Remove. Eliminates the foot-gun of
Remove-on-managed-row leaving the checkbox stuck checked. */
.admin-form__link-row.is-managed [data-link-remove] {
display: none;
}
/* ===============================================
Bundle A #9 (2026-05-28) — inline asset-create
modal used on associate.html + associate_price_
list.html. Single reused for header /
footer / note via JS-driven mutation of form
action + asset_type + title + logo-slot
visibility. Lightweight design — content_html
is a plain