/* v37 Profit per job + company Profit overview. Phone first; all colours from theme variables (light + dark). */
.pf { display: grid; gap: 14px; min-width: 0; }
.pf > * { min-width: 0; }
.pf .page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.pf .page-head h2, .pf .page-head h1 { margin: 0; }
.pf-card { padding: 16px; display: grid; gap: 12px; margin: 0; }
.pf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-card-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.02rem; }
.pf-card-head h3 .icon { color: var(--accent); }
.pf-head-fig { font-family: var(--font-display); font-size: 1.2rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pf .pos { color: var(--ok); } .pf .neg { color: var(--bad); } .pf .muted, .pf-note.muted { color: var(--muted); }
.pf-note { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.4; }
.pf-sub { margin: 4px 0 0; font-size: .92rem; } .pf-sub small { color: var(--muted); font-weight: 500; }
.pf-link { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .9rem; color: var(--accent); text-decoration: none; }
.pf-foot { display: flex; align-items: center; gap: 6px; justify-content: center; color: var(--muted); font-size: .8rem; margin: 2px 0 8px; }

/* hero */
.pf-hero { padding: 18px 16px 14px; display: grid; gap: 12px; margin: 0; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface) 55%, var(--surface-2) 100%); }
.pf-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--muted); }
.pf-hero.h-good::before { background: var(--ok); } .pf-hero.h-watch::before { background: var(--accent-2); } .pf-hero.h-bad::before { background: var(--bad); }
.pf-hero-main { display: flex; align-items: center; gap: 16px; }
.pf-hero-txt { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.pf-eyebrow { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.pf-big { color: var(--ink); font-family: var(--font-display); font-size: 2.1rem; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pf-big.neg { color: var(--bad); }
.pf-planned { color: var(--muted); font-size: .84rem; }
.pf-method { display: flex; gap: 7px; align-items: flex-start; margin: 0; padding: 9px 11px; border-radius: 12px; background: var(--surface-3); color: var(--ink-2); font-size: .86rem; line-height: 1.38; }
.pf-method .icon { flex: none; margin-top: 2px; color: var(--info); }

/* ring */
.pf-ring { position: relative; flex: none; }
.pf-ring svg { display: block; }
.pf-ring-track { stroke: var(--surface-3); }
.pf-ring-bar { stroke: var(--muted); transition: stroke-dasharray .6s var(--ease); }
.pf-ring.h-good .pf-ring-bar { stroke: var(--ok); } .pf-ring.h-watch .pf-ring-bar { stroke: var(--accent-2); } .pf-ring.h-bad .pf-ring-bar { stroke: var(--bad); }
.pf-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pf-ring-label b { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pf-ring-label small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-top: 3px; }

/* health chip */
.pf-health { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; padding: 3px 9px 3px 7px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.pf-health i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pf-health.h-good { background: var(--ok-bg); color: var(--ok); } .pf-health.h-good i { background: var(--ok); }
.pf-health.h-watch { background: var(--warn-bg); color: var(--warn); } .pf-health.h-watch i { background: var(--accent-2); }
.pf-health.h-bad { background: var(--bad-bg); color: var(--bad); } .pf-health.h-bad i { background: var(--bad); }
.pf-pill { font-size: .76rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.pf-pill.ok { background: var(--ok-bg); color: var(--ok); } .pf-pill.warn { background: var(--warn-bg); color: var(--warn); } .pf-pill.bad { background: var(--bad-bg); color: var(--bad); }

/* stats */
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .pf-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; display: grid; gap: 1px; min-width: 0; }
.pf-stat span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--muted); }
.pf-stat b { color: var(--ink); font-family: var(--font-display); font-size: 1.18rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-stat small { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.pf-stat.neg b { color: var(--bad); } .pf-stat.pos b { color: var(--ok); } .pf-stat.muted b { color: var(--ink-2); }

/* alerts */
.pf-alerts { display: grid; gap: 6px; }
.pf-alert { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; font-size: .88rem; line-height: 1.35; background: var(--info-bg); color: var(--info); }
.pf-alert .icon { flex: none; margin-top: 1px; }
.pf-alert.bad { background: var(--bad-bg); color: var(--bad); } .pf-alert.warn { background: var(--warn-bg); color: var(--warn); }

/* lines */
.pf-lines { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .94rem; }
.pf-lines li:last-child { border-bottom: 0; }
.pf-lines li span { display: grid; } .pf-lines li small { color: var(--muted); font-size: .76rem; }
.pf-lines li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-lines li.total { border-bottom: 0; border-top: 1.5px solid var(--line-2); font-weight: 800; }
.pf-lines li.pending { color: var(--muted); } .pf-lines li.pending b { color: var(--info); }
.pf-lines li.muted { font-size: .84rem; }

/* stack bar */
.pf-stack-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.pf-stack-bar i { display: block; min-width: 3px; }
.pf-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pf-legend li { display: grid; grid-template-columns: 12px 1fr auto 40px; gap: 8px; align-items: center; font-size: .9rem; }
.pf-legend li i { width: 12px; height: 12px; border-radius: 4px; }
.pf-legend li span { display: grid; } .pf-legend li small { color: var(--muted); font-size: .74rem; }
.pf-legend li b { font-variant-numeric: tabular-nums; } .pf-legend li em { font-style: normal; text-align: right; color: var(--muted); font-size: .8rem; }
.pf-labor summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--ink-2); min-height: 36px; display: flex; align-items: center; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* budget vs actual */
.pf-bva { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pf-bva-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.pf-bva-name { font-weight: 700; font-size: .93rem; }
.pf-tag { font-size: .76rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.pf-tag.ok { background: var(--ok-bg); color: var(--ok); } .pf-tag.warn { background: var(--warn-bg); color: var(--warn); } .pf-tag.bad { background: var(--bad-bg); color: var(--bad); }
.pf-bva-track { position: relative; height: 12px; border-radius: 99px; background: var(--surface-3); overflow: visible; }
.pf-bva-track i { position: absolute; top: 0; bottom: 0; display: block; }
.pf-bva-fill { left: 0; border-radius: 99px; background: var(--info); }
.st-risk .pf-bva-fill { background: var(--accent-2); }
.pf-bva-over { border-radius: 0 99px 99px 0; background: var(--bad); }
.pf-bva-open { background: repeating-linear-gradient(45deg, var(--info) 0 3px, transparent 3px 6px); opacity: .55; border-radius: 0 99px 99px 0; }
.pf-bva-tick { width: 3px; top: -4px !important; bottom: -4px !important; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.pf-bva-figs { display: flex; gap: 10px; font-size: .78rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pf-bva-figs span:last-child { margin-left: auto; }
.pf-bva-key, .pf-bill-key, .pf-ol-key { display: flex; flex-wrap: wrap; gap: 12px; font-size: .76rem; color: var(--muted); }
.pf-bva-key span, .pf-bill-key span, .pf-ol-key span { display: inline-flex; align-items: center; gap: 5px; }
.pf-bva-key i, .pf-bill-key i, .pf-ol-key i { width: 12px; height: 8px; border-radius: 3px; display: inline-block; }
.pf-bva-key .fill { background: var(--info); } .pf-bva-key .open { background: repeating-linear-gradient(45deg, var(--info) 0 2px, transparent 2px 4px); opacity: .7; }
.pf-bva-key .tick { width: 3px; height: 12px; background: var(--ink); } .pf-bva-key .over { background: var(--bad); }

/* spend vs progress */
.pf-svp { display: grid; gap: 8px; }
.pf-svp-row { display: grid; grid-template-columns: 96px 1fr 44px; gap: 10px; align-items: center; font-size: .88rem; }
.pf-svp-row b { text-align: right; font-variant-numeric: tabular-nums; }
.pf-svp-track { height: 12px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.pf-svp-track i { display: block; height: 100%; border-radius: 99px; }
.pf-svp .spent { background: var(--accent); } .pf-svp .done { background: var(--ok); }
.pf-svp.warn .spent { background: var(--accent-2); } .pf-svp.bad .spent { background: var(--bad); }

/* billing bar */
.pf-bill-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.pf-bill-bar i { display: block; }
.pf-bill-bar .paid, .pf-bill-key .paid { background: var(--ok); } .pf-bill-bar .due, .pf-bill-key .due { background: var(--accent-2); }
.pf-bill-bar .late, .pf-bill-key .late { background: var(--bad); }
.pf-bill-bar .unbilled, .pf-bill-key .unbilled { background: repeating-linear-gradient(45deg, var(--line-2) 0 3px, transparent 3px 6px); }

/* outlook */
.pf-outlook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.pf-ol-col { display: grid; justify-items: center; gap: 3px; text-align: center; }
.pf-ol-bars { height: 96px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; border-bottom: 1.5px solid var(--line-2); padding-bottom: 1px; }
.pf-ol-bars i { width: 22px; border-radius: 6px 6px 2px 2px; display: block; }
.pf-ol-bars .in, .pf-ol-key .in { background: var(--ok); } .pf-ol-bars .out, .pf-ol-key .out { background: var(--accent); }
.pf-ol-net { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 1.02rem; margin-top: 4px; }
.pf-ol-net.pos { color: var(--ok); } .pf-ol-net.neg { color: var(--bad); }
.pf-ol-col small { font-size: .72rem; color: var(--muted); }
.pf-ol-key { grid-column: 1 / -1; justify-content: center; }
.pf-ol-run { font-variant-numeric: tabular-nums; }

/* budget sheet */
.pf-from-est { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: .88rem; margin-bottom: 10px; }
.pf-from-est span { flex: 1; } .pf-from-est .icon { color: var(--accent); flex: none; }
.pf-budget-hint { margin: 0 0 10px; }

/* company overview */
.pf-overview .page-head { margin-bottom: 2px; }
.pf-hcounts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.pf-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pf-list-head h3 { margin: 0; }
.pf-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-range summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: .86rem; font-weight: 700; list-style: none; }
.pf-range summary::-webkit-details-marker { display: none; }
.pf-range-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 8px; }
.pf-range-row label { display: grid; gap: 2px; font-size: .76rem; color: var(--muted); font-weight: 700; }
.pf-range-row input { font: inherit; font-size: 16px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.pf-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-job { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 10px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--muted); border-radius: var(--radius-md); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; }
.pf-job.h-good { border-left-color: var(--ok); } .pf-job.h-watch { border-left-color: var(--accent-2); } .pf-job.h-bad { border-left-color: var(--bad); }
.pf-job > .icon { color: var(--muted); flex: none; }
.pf-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--ink-2); flex: none; }
.pf-job-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.pf-job-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pf-job-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-job-margin { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pf-job.h-good .pf-job-margin { color: var(--ok); } .pf-job.h-watch .pf-job-margin { color: var(--warn); } .pf-job.h-bad .pf-job-margin { color: var(--bad); }
.pf-mini { display: flex; height: 7px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.pf-mini .cost { background: var(--line-2); } .pf-mini .margin { background: var(--ok); }
.pf-job.h-watch .pf-mini .margin { background: var(--accent-2); } .pf-job.h-bad .pf-mini .cost { background: var(--bad); opacity: .6; }
.pf-job-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .78rem; color: var(--muted); align-items: center; }
.pf-job-sub .pf-health { font-size: .7rem; padding: 1px 7px 1px 5px; }

@media (max-width: 380px) { .pf-big { font-size: 1.8rem; } .pf-hero-main { gap: 12px; } .pf-stat b { font-size: 1.05rem; } .pf-svp-row { grid-template-columns: 84px 1fr 40px; } }
@media (min-width: 900px) { .pf#profit-tab { grid-template-columns: 1fr 1fr; align-items: start; } .pf#profit-tab > .page-head, .pf#profit-tab > .pf-hero, .pf#profit-tab > .pf-alerts, .pf#profit-tab > .pf-foot { grid-column: 1 / -1; } }
@media print { .pf-actions, .pf-link, #pf-edit-budget { display: none; } .pf-card, .pf-hero { break-inside: avoid; box-shadow: none; } }
/* v37: five home tabs (Projects | Estimates | Invoices | Profit | Time) keep >= 70px tap targets on a 390px phone */
@media (max-width: 480px) { .home-tabs.five { gap: 1px; padding: 3px; margin-left: -6px; margin-right: -6px; } .home-tabs.five .home-tab { padding: 4px 0; } }