in the head wasn't in the shared.css nowrap allowlist so
letter-spaced "Client" still wrapped at narrow widths. Force
nowrap on every cell of the head row. */
.ov-rev-head > * { white-space: nowrap; }
/* Same row's data cells: numbers must never break ("$58,525.00"
was wrapping at the comma on the narrowest phones). */
.ov-rev-num,
.ov-rev-row .ov-rev-client { white-space: nowrap; }
.ov-rev-row .ov-rev-client {
overflow: hidden;
text-overflow: ellipsis;
}
/* Reports tab — profitability table */
/* Reduce the 6-column row to: Name + Actual + Delta. Estimated,
Client, and Margin% are still computable from the project
sheet; this card on the reports page just needs to be readable. */
.rep-row,
.rep-row-head {
grid-template-columns: minmax(0, 1.6fr) 90px 80px;
gap: 8px;
padding: 9px 10px;
font-size: 11px;
}
.rep-row > :nth-child(2), /* client */
.rep-row > :nth-child(3), /* estimated */
.rep-row > :nth-child(6), /* margin% */
.rep-row-head > :nth-child(2),
.rep-row-head > :nth-child(3),
.rep-row-head > :nth-child(6) { display: none; }
.rep-row-head { display: none; } /* cards self-label */
/* Numeric cells in the profitability rows can't wrap or they
split mid-number ("$22,925.00" → "$22,925." / "00"). */
.rep-num, .rep-row > .rep-num { white-space: nowrap; }
/* Monthly revenue bars: nowrap on the value so "$35,400.00" never
wraps and gets clipped by the card edge. */
.rep-bar-row {
grid-template-columns: 50px minmax(40px, 1fr) 78px;
gap: 8px;
font-size: 10.5px;
}
.rep-bar-value { white-space: nowrap; }
/* ─── Project sheet actuals table: numeric cells must not wrap ───
The sheet's
inherits overflow-wrap:
anywhere from .main-content. That makes "$3,750.00" or "34.5 h"
break in narrow cells. Lock all numeric cells (rate, hours,
total, subtotals) to single-line. */
.prj-sheet-actuals td.num,
.prj-sheet-actuals th.num,
.prj-sheet-actuals tr.prj-sheet-total td,
.prj-sheet-actuals tr.prj-sheet-subtotal td {
white-space: nowrap;
}
/* Rate column is the one that crowds the table on mobile. The
rate is the same for all of Joel's tracker entries (his hourly),
so it's redundant per-row. Hide it on narrow widths — Hours +
Total still tell the full story. */
.prj-sheet-actuals th:nth-child(3),
.prj-sheet-actuals td:nth-child(3) { display: none; }
}
/* Phone-only tweaks (below tablet portrait). Mostly typographic so
small screens don't word-wrap critical labels into 3 lines. */
@media (max-width: 460px) {
/* Stats compress further */
.ov-stat-value { font-size: 20px; }
.ov-stat-label { font-size: 8.5px; letter-spacing: 1.3px; }
/* Project sheet identity */
.prj-sheet { padding: 22px 16px 28px; }
.prj-sheet-name { font-size: 19px; }
.prj-sheet-status { font-size: 9px; padding: 4px 8px; }
.prj-sheet-financials { gap: 14px; }
.prj-sheet-stat-value { font-size: 18px; }
/* Projects toolbar stats — stack value above label on phones so
the dollar amount has full card width and doesn't truncate next
to the label. Two-column 2×2 grid stays from the desktop rule. */
.prj-stat-card {
flex-direction: column;
align-items: flex-start;
gap: 1px;
padding: 8px 12px 9px;
}
.prj-stat-card-value { font-size: 14px; }
.prj-stat-card-label { font-size: 9px; letter-spacing: 1.3px; }
/* The External Costs and Frame.io inline add-rows are 3-column
grids on desktop; on phones each input is too narrow to type
into. Flatten to a single column so each field is full-width
with the button last. */
.prj-ec-add-form,
.prj-frameio-add-row {
grid-template-columns: 1fr;
gap: 6px;
}
/* Same for the rendered external-cost rows. The delete + open
glyphs become a small action row below the inputs.
Column order (desktop): service_type, label, amount (cost), bill,
url, open, del — preserve that vertical order on narrow widths. */
.prj-ec-row {
grid-template-columns: 1fr 90px;
grid-template-areas:
"service service"
"label label"
"amount amount"
"bill bill"
"url url"
"open del";
gap: 6px 8px;
}
.prj-ec-row > :nth-child(1) { grid-area: service; }
.prj-ec-row > :nth-child(2) { grid-area: label; }
.prj-ec-row > :nth-child(3) { grid-area: amount; }
.prj-ec-row > :nth-child(4) { grid-area: bill; }
.prj-ec-row > :nth-child(5) { grid-area: url; }
.prj-ec-row > :nth-child(6) { grid-area: open; justify-self: start; }
.prj-ec-row > :nth-child(7) { grid-area: del; justify-self: end; }
/* Section title row on the project sheet — let the toggle wrap
under the title at narrow widths so the label has room. */
.prj-sheet-section-title-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
/* Restore Backup modal — let the action buttons inside backup-row
wrap below the timestamp on phones. */
.backup-row {
grid-template-columns: 1fr auto;
gap: 6px 8px;
}
.backup-row-rel { grid-column: 1 / 2; }
.backup-row .btn-restore { grid-row: 1 / 3; grid-column: 2 / 3; align-self: center; }
}
/* ─── Send Invoice modal (Stripe ACH + Gmail) ───────────────────── */
.inv-send-card { max-width: 420px; width: 92vw; padding: 20px 20px 16px; }
/* Shared .ap-modal-body sets white-space:pre-wrap, which turns every
newline + indent in the modal's HTML template into literal vertical
whitespace. Reset to normal flow inside the Send Invoice card. */
.inv-send-card .ap-modal-body {
white-space: normal;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 14px;
}
.inv-send-card .ap-modal-actions { margin-top: 14px; }
.inv-send-summary {
padding: 10px 12px;
border: 1px solid rgba(10, 50, 84, .12);
border-radius: 6px;
background: rgba(10, 50, 84, .03);
font-size: 12.5px;
line-height: 1.4;
color: var(--navy);
}
.inv-send-summary > div { margin: 0; }
.inv-send-summary > div + div { margin-top: 4px; }
.inv-send-card .field-label {
font-size: 10px;
letter-spacing: 1.5px;
color: rgba(26, 46, 61, .55);
margin: 0 0 6px 0;
text-transform: uppercase;
font-weight: 600;
}
.inv-send-card .text-input {
width: 100%;
font-size: 13px;
padding: 7px 10px;
}
.inv-send-template-choices {
display: flex;
gap: 10px;
}
.inv-send-template-choice {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 8px 10px;
border: 1px solid rgba(10, 50, 84, .15);
border-radius: 8px;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.inv-send-template-choice:hover { border-color: rgba(10, 50, 84, .35); }
.inv-send-template-choice:has(input:checked) {
border-color: #0a3254;
background: rgba(10, 50, 84, .04);
}
.inv-send-template-choice input { margin: 0; accent-color: #0a3254; }
/* Thumbnail container — fixed aspect, clips an internal iframe that
renders the real email template scaled down. The radial-gradient
placeholder behind shows immediately so the thumb never reads as
blank while the iframe is loading. */
.inv-send-template-thumb {
width: 100%;
/* Taller than square so the iframe can show header + headline +
amount-due card + Pay Now button. The email natural width is
600px; at scale(0.25) the visible vertical range is
thumb-height-px * 4. With aspect-ratio 4/5 + ~150px wide thumbs,
that's 187px × 4 = 750px of email content. */
aspect-ratio: 4 / 5;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, .08);
position: relative;
overflow: hidden;
}
.inv-send-template-thumb.is-dark {
background:
radial-gradient(ellipse at 30% 0%, #1a3a5c 0%, #0c1420 55%, #050e18 100%);
}
.inv-send-template-thumb.is-light {
background:
radial-gradient(ellipse at 30% 0%, #f7f3eb 0%, #ffffff 55%, #ffffff 100%);
}
/* The iframe is fixed at the email's natural width (600px) and a tall
crop, scaled with CSS transform so the recipient-facing template
renders correctly inside a tiny thumbnail. pointer-events: none so
clicks pass through to the surrounding radio label. */
.inv-send-template-thumb iframe {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 800px;
border: 0;
transform: scale(0.25);
transform-origin: top left;
pointer-events: none;
}
.inv-send-template-label {
font-size: 9.5px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(26, 46, 61, .65);
}
.inv-send-error {
padding: 8px 10px;
border-radius: 6px;
background: rgba(190, 50, 50, .08);
color: #8a2424;
font-size: 12px;
line-height: 1.4;
word-break: break-all;
}
/* Tiny "Sent May 12, 2026" under the status pill in invoice rows.
Sits on the same column as the pill, single line, small + muted. */
.inv-sent-stamp {
margin-top: 3px;
font-size: 10.5px;
line-height: 1.2;
white-space: nowrap;
}
/* ── RESTORE FROM BACKUP MODAL ─────────────────────────────
Sized for a long scrollable list of snapshots grouped by day.
Uses elements for the day grouping so the open/close
state is browser-native, keyboard-friendly, and free. */
.backup-restore-modal {
width: 520px;
max-width: calc(100vw - 32px);
}
.backup-modal-intro {
padding: 14px 18px 6px;
font-size: 11.5px;
line-height: 1.55;
color: rgba(26,46,61,.7);
background: #fbf9f3;
border-bottom: 1px solid rgba(26,46,61,.08);
}
.backup-restore-modal .modal-body {
padding: 6px 12px 16px;
max-height: calc(92vh - 200px);
}
.backup-state {
padding: 28px 14px;
text-align: center;
font-size: 12px;
color: rgba(26,46,61,.6);
}
.backup-state.backup-error { color: #8a2424; }
.backup-day {
border-top: 1px solid rgba(26,46,61,.06);
}
.backup-day:first-of-type { border-top: none; }
.backup-day > summary {
list-style: none;
cursor: pointer;
padding: 11px 8px 11px 14px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 4px;
user-select: none;
}
.backup-day > summary::-webkit-details-marker { display: none; }
.backup-day > summary::before {
content: "▸";
font-size: 10px;
color: rgba(26,46,61,.4);
margin-right: 8px;
transition: transform .14s;
display: inline-block;
}
.backup-day[open] > summary::before { transform: rotate(90deg); }
.backup-day > summary:hover { background: var(--hover-tint); }
.backup-day-label {
font-size: 11.5px;
font-weight: 600;
color: var(--navy);
letter-spacing: .2px;
flex: 1;
}
.backup-day-count {
font-size: 10px;
color: rgba(26,46,61,.5);
letter-spacing: .3px;
}
.backup-list {
list-style: none;
margin: 0 0 6px;
padding: 0 0 0 8px;
}
.backup-row {
display: grid;
grid-template-columns: 64px 1fr auto;
align-items: center;
gap: 12px;
padding: 7px 10px 7px 22px;
border-radius: 4px;
transition: background .12s;
}
.backup-row:hover { background: var(--hover-tint); }
.backup-row-time {
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--navy);
font-weight: 500;
}
.backup-row-rel {
font-size: 10.5px;
color: rgba(26,46,61,.55);
}
.btn-restore {
background: transparent;
border: 1px solid rgba(26,46,61,.18);
color: var(--navy);
padding: 4px 12px;
border-radius: 14px;
font-family: var(--font);
font-size: 10px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
cursor: pointer;
transition: background .14s, border-color .14s, color .14s;
}
.btn-restore:hover {
background: var(--navy);
border-color: var(--navy);
color: var(--beige);
}