:root {
  --bg: #f5f6f4; --panel: #fff; --ink: #0f1a14; --muted: #45524a; --line: #d9dfd8;
  --brand: #2f7d4f; --brand-ink: #fff; --sun: #f5a623; --warn: #b54708; --bad: #b42318; --chip: #eef3ef;
  --radius: 10px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); font-size: 15px; line-height: 1.45; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.top { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: #16271e; color: #fff; position: sticky; top: 0; z-index: 5; }
.brand { color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.sun { width: 14px; height: 14px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px rgba(245,166,35,.25); }
.top nav { display: flex; gap: 4px; }
.top nav a { color: #cfe0d5; padding: 6px 10px; border-radius: 6px; }
.top nav a.on, .top nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.me { margin-left: auto; color: #cfe0d5; font-size: 13px; }
main { padding: 20px; max-width: 1500px; margin: 0 auto; }
.pad { padding: 20px; }
.muted { color: var(--muted); }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=search], input[type=number], input[type=date], input[type=url], input[type=email], input[type=tel], select, textarea {
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; background: #fff; width: 100%; }
textarea { min-height: 64px; resize: vertical; }
button, .btn { border: 1px solid var(--line); background: #fff; padding: 7px 12px; border-radius: 7px; cursor: pointer; }
button.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
button:disabled { opacity: .5; cursor: default; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--chip); font-size: 12px; white-space: nowrap; }
.chip.warn { background: #fff4e5; color: var(--warn); }
.chip.bad { background: #fde7e5; color: var(--bad); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }

/* ═══════════════ UI STANDARDS (Rick, Oct 8) — read docs/ui-standards.md ═══════════════
   Every page uses these shared pieces; no page-specific look-alikes.
   • Page title row: <div class="row pagehead"><h1>Title</h1>…buttons…</div>
   • Filter chips / section pickers: <div class="chips"><span class="chiplabel">View:</span><button class="on">All <span>65</span></button>…</div>
       .on = selected (dark filled) · <span> inside = count / status badge · .amberchip = needs a look · .warnchip = action needed now
       (.stages is the same component, used by the Pipeline toolbar.)
   • Content: <div class="panel section"> (the standard white card) */
.pagehead { gap: 8px; margin: 0 0 10px; } .pagehead h1 { margin: 0; }
:is(.chips, .stages) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stages { margin: 12px 0; } .chips { margin: 8px 0; }
:is(.chips, .stages) > button:not(.linkbtn), :is(.chips, .stages) > a.btn { border-radius: 99px; padding: 5px 12px; margin: 0; color: inherit; text-decoration: none; }
:is(.chips, .stages) > :is(button, a.btn).on { background: var(--ink); color: #fff; border-color: var(--ink); }
:is(.chips, .stages) > :is(button, a.btn) > span, .stages .n { opacity: .7; font-weight: 400; margin-left: 2px; }
:is(.chips, .stages) > :is(button, a.btn).warnchip:not(.on) { border-color: #f0b4ad; color: var(--bad); }
:is(.chips, .stages) > :is(button, a.btn).warnchip.on > span { opacity: 1; font-weight: 700; color: #ffd0ca; }
/* .amberchip = needs a look (amber, same colours as .chip.warn); .warnchip = action needed now (red). */
:is(.chips, .stages) > :is(button, a.btn).amberchip:not(.on) { border-color: #f2c25c; background: #fff8e6; color: var(--warn); }
:is(.chips, .stages) > :is(button, a.btn).amberchip.on > span { opacity: 1; font-weight: 700; color: #ffd68a; }
:is(.chips, .stages) > :is(button, a.btn).warnchip:not(.on) { background: #fdeceb; font-weight: 600; }
.chiplabel { color: var(--muted); font-size: 12px; margin-right: 2px; white-space: nowrap; }
/* .chips-green = the same chips in green, for the project page's right column only (Paul, Oct 10; docs/ui-standards.md §2).
   Count in a yellow bubble (span.cnt; Rick, Oct 10), red when Open tasks has overdue ones; .on = dark green; .flagged + span.redcnt = red count for notes edited by someone other than the creator.
   .chips-sm = the smaller size used by the Notes filter rows. */
.chips.chips-green > button:not(.linkbtn) { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid #2f7d4f; background: #e3f3e7; color: #1f5a38;
  font: inherit; font-weight: 600; font-size: 14px; line-height: 1.3; padding: 7px 14px; border-radius: 999px; white-space: nowrap; box-shadow: none; }
.chips.chips-green > button:not(.linkbtn):hover { background: #d2ebd9; }
.chips.chips-green > button.on, .chips.chips-green > button.on:hover { background: #2f7d4f; color: #fff; border-color: #2f7d4f; }
.chips.chips-green > button.flagged { border-color: #c62828; }
.chips.chips-green > button > span { display: inline-block; min-width: 20px; margin: 0; padding: 0 6px; border-radius: 999px; background: #fff; color: #1f5a38; border: 1px solid #b9dcc4;
  font-size: 12px; font-weight: 700; line-height: 19px; text-align: center; opacity: 1; }
.chips.chips-green > button.on > span { border-color: #fff; }
.chips.chips-green > button > span.cnt { background: #ffd34d; color: #4a3500; border-color: #e0a800; font-weight: 700; }   /* yellow count bubble (Rick, Oct 10) */
.chips.chips-green > button > span.redcnt { background: #d32f2f; color: #fff; border-color: #d32f2f; }
.chips.chips-green > button > i.redamp { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -3px 0; border-radius: 50%; background: #d32f2f; color: #fff; font-style: normal; font-weight: 700; }   /* Notes & messages: red notes not yet read */
.chips.chips-green.chips-sm { gap: 5px; }
.chips.chips-green.chips-sm > button:not(.linkbtn) { font-size: 12.5px; padding: 3px 8px; gap: 4px; }
.chips.chips-green.chips-sm > button > span { min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 16px; }
/* Copy a dropdown's chosen value (public/selectcopy.js): the small ⧉ that appears on a dropdown under the mouse. */
.selcopy { position: fixed; z-index: 60; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); font-size: 12px; line-height: 16px; text-align: center; cursor: copy; opacity: .9; }
.selcopy:hover { color: var(--ink); border-color: var(--brand); opacity: 1; }
/* Linked values (public/linkvalues.js): the value is plain text; the link is the small icon; ⧉ copies on hover. */
.lv { display: inline; } .lv .lvi, .lv .lvc { margin-left: 3px; }
.lv .lvt { user-select: text; -webkit-user-select: text; cursor: text; overflow-wrap: anywhere; }
.lv .lvi, .lv .lvc { user-select: none; -webkit-user-select: none; text-decoration: none; font-size: .85em; line-height: 1; }
.lv .lvi { padding: 0 2px; border-radius: 4px; } .lv .lvi:hover { background: #eef5f0; text-decoration: none; }
.lv .lvc { display: none; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 4px; padding: 0 3px; cursor: copy; }
.lv:hover .lvc, .lv:focus-within .lvc { display: inline; } .lv .lvc:hover { color: var(--ink); border-color: var(--brand); }
@media (hover: none) { .lv .lvc { display: none; } .lv .lvi { font-size: 1em; padding: 0 4px; } }
/* Formatting box (public/noteeditor.js): the standard chips as a toolbar, then the editable box. */
.rte { display: grid; gap: 4px; }
.rte .rtebar { margin: 0; gap: 4px; } .rte .rtebar > button { padding: 2px 9px; min-width: 32px; font-size: 13px; }
.rtein { min-height: 80px; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; background: #fff; font: inherit; line-height: 1.45; outline: none; }
.rtein:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(47,125,79,.15); }
.rtein:empty::before { content: attr(data-ph); color: #8a958e; }
.rtein p, .ntext p, .ip-msg p { margin: 0 0 4px; } .rtein ul, .rtein ol, .ntext ul, .ntext ol, .ip-msg ul, .ip-msg ol, .feed ul, .feed ol { margin: 2px 0 4px; padding-left: 22px; }
@media (max-width: 560px) { .rte .rtebar > button { padding: 5px 11px; font-size: 14px; } }
/* ═══════════════ end of UI standards ═══════════════ */
/* Contractor insurance (COI) note under the installer button (public/coi.js). */
.coinote { flex-basis: 100%; font-size: 13px; padding: 5px 9px; border-radius: 8px; margin-top: 4px; background: #fff8e6; border: 1px solid #f2c25c; color: #6b4a00; }
.coinote.red { background: #fdeceb; border-color: #f0b4ad; color: #8b1d12; } .coinote .chip { margin-right: 4px; }
.ctrrow { flex-wrap: wrap; } .coibox summary { cursor: pointer; }

/* pipeline */
table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.list th, table.list td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { font-size: 12px; color: var(--muted); font-weight: 600; background: #fafbf9; }
table.list tr:hover td { background: #f8faf8; }
table.list td.alert { max-width: 380px; color: var(--muted); font-size: 12px; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.scope { display: flex; gap: 3px; }
.scope span { font-size: 11px; padding: 1px 5px; border-radius: 4px; background: #e8f0ff; color: #1d4ed8; }

/* project */
.phead { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.stagebar { display: flex; gap: 2px; margin: 10px 0 14px; }
.stagebar div { flex: 1; text-align: center; font-size: 11px; padding: 6px 2px; background: #e6ebe7; color: var(--muted); }
.stagebar div:first-child { border-radius: 6px 0 0 6px; } .stagebar div:last-child { border-radius: 0 6px 6px 0; }
.stagebar div.done { background: #cfe5d7; color: var(--ink); }
.stagebar div.now { background: var(--brand); color: #fff; font-weight: 600; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.section { margin-bottom: 14px; }
.section h2 { display: flex; align-items: center; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #3a4740; }
.fields label.wide { grid-column: 1 / -1; }
.fields label.dirty input, .fields label.dirty select, .fields label.dirty textarea { border-color: var(--sun); background: #fffbf2; }
.savebar button:not(.primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.savebar { position: sticky; bottom: 0; background: #16271e; color: #fff; padding: 10px 16px; border-radius: var(--radius); display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.side .panel { margin-bottom: 14px; }
.tlist { list-style: none; margin: 0; padding: 0; }
.tlist li { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.tlist li:last-child { border-bottom: 0; }
.tlist .sub { font-size: 12px; color: var(--muted); }
.tlist li.done .subj { text-decoration: line-through; color: var(--muted); }
.feed { max-height: 420px; overflow: auto; }
.feed .item { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.feed .when { font-size: 11px; color: var(--muted); }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #16271e; color: #fff; padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; }
#toast.show { opacity: 1; }
.log { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #0f1a14; color: #d6e8dc; padding: 12px; border-radius: 8px; max-height: 320px; overflow: auto; white-space: pre-wrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.kpi b { display: block; font-size: 20px; }

/* v2: service, files, portal, admin tools */
.chip.ok { background: #e3f4e8; color: #1f6b3a; }
tr.click { cursor: pointer; }
.btn { display: inline-block; color: var(--ink); }
.btn:hover { text-decoration: none; background: #f4f6f3; }
a.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.modal { position: fixed; inset: 0; background: rgba(15, 26, 20, .45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 20; overflow: auto; }
.modal-box { width: min(860px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.drop { border: 2px dashed var(--line); border-radius: 8px; padding: 14px; text-align: center; color: var(--muted); margin: 10px 0; font-size: 13px; }
.drop.on { border-color: var(--brand); background: #f1f8f3; color: var(--ink); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.checks label, label.inline { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; color: var(--ink) !important; font-size: 13px !important; }
.emailbody { white-space: normal; font-size: 13px; line-height: 1.5; max-height: 60vh; overflow: auto; border-top: 1px solid var(--line); padding-top: 10px; }
table.intake td { padding: 5px 10px; font-size: 13px; }

.fields .flabel { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

/* v3: email, installer & homeowner portals */
.edtools { display: flex; gap: 4px; margin-bottom: 4px; }
.edtools button { padding: 3px 8px; font-size: 12px; }
.editor { border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; min-height: 180px; max-height: 50vh; overflow: auto; background: #fff; font-size: 14px; line-height: 1.5; }
.editor:focus { outline: 2px solid #cfe5d7; }
.attlist { max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
td.shares { white-space: nowrap; } td.shares label { display: inline-flex !important; margin-right: 8px; font-size: 12px !important; }
.feed .item.vis-client { background: #f1f8f3; padding-left: 8px; border-left: 3px solid var(--brand); }
.feed .item.vis-installer { background: #f2f5ff; padding-left: 8px; border-left: 3px solid #4a6fe3; }
.trade { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.client .hero .status { font-size: 22px; font-weight: 700; color: var(--brand); margin-top: 4px; }
.panel.click { cursor: pointer; }
details summary { cursor: pointer; }

/* v4: collapsible project sections, hide empty fields, stronger text */
details.psec > summary { list-style: none; cursor: pointer; }
details.psec > summary::-webkit-details-marker { display: none; }
details.psec > summary h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
details.psec > summary h2::before { content: '▸'; font-size: 14px; color: var(--muted); transition: transform .15s; display: inline-block; }
details.psec[open] > summary h2::before { transform: rotate(90deg); }
details.psec[open] > summary { margin-bottom: 12px; }
details.psec .count { font-size: 12px; font-weight: 500; color: var(--muted); }
.fields.hide-empty label.empty { display: none; }
.linkbtn { border: 0; background: none; color: var(--brand); padding: 8px 0 0; font-weight: 600; }
.secbar { margin-bottom: 10px; }
input, select, textarea { color: var(--ink) !important; font-weight: 500; }
table.list th { color: #3a4740; }
.muted { color: var(--muted); }

/* v5: auto-save */
.savestatus { position: fixed; right: 20px; bottom: 20px; background: #16271e; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; z-index: 10; }
.savestatus.bad { background: var(--bad); }
.fields label.saving input, .fields label.saving select, .fields label.saving textarea { border-color: var(--sun); }
.fields label.saved input, .fields label.saved select, .fields label.saved textarea { border-color: var(--brand); background: #f1f8f3; transition: background .6s; }
.fields label.savefail input, .fields label.savefail select, .fields label.savefail textarea { border-color: var(--bad); background: #fff5f4; }

/* Notes: bordered cards, category filter */
.notesfeed { max-height: 560px; }
.notesfeed .note { border: 1px solid #b9c4bd; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; font-size: 14px; }
.notesfeed .note.vis-client { border-left: 4px solid var(--brand); background: #f1f8f3; }
.notesfeed .note.vis-installer { border-left: 4px solid #4a6fe3; background: #f2f5ff; }
.notesfeed .note.cat-engineering { border-left: 4px solid #8a5cd6; }
.notesfeed .note.cat-permitting { border-left: 4px solid #2f6f9f; }
.notesfeed .note.cat-utility { border-left: 4px solid #c58b00; }
.notesfeed .note.cat-old_alert { border-left: 4px solid var(--warn); background: #fffaf2; }
.notesfeed .nhead { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 6px; }
.notesfeed .nhead .when { font-size: 12px; color: var(--muted); }
.notesfeed .nhead select { width: auto; font-size: 12px; padding: 2px 4px; }
.notesfeed .notedel { font-size: 12px; padding: 2px 8px; color: var(--bad); border-color: #f0c4bf; background: #fff; }
.notesfeed .notedel:hover { background: #fde7e5; }
/* Alert lines with "done" checkboxes */
.alertbox { grid-column: 1 / -1; }
.alertbox .alabel { font-size: 13px; font-weight: 600; color: #3a4740; margin-bottom: 4px; }
.alertlist { list-style: none; margin: 0; padding: 0; }
.alertlist li { display: flex; gap: 8px; align-items: center; border: 1px solid #f0c98a; background: #fff8ec; border-radius: 6px; padding: 3px 8px; margin-bottom: 3px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.alertlist input { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
.muted.small { font-size: 12px; }
.notesfeed .ninit { color: var(--ink); margin-right: 4px; white-space: nowrap; }
.notesubj { width: 100%; margin-bottom: 6px; font-weight: 600; }
.notesfeed .nsubj { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.alertadd { display: flex; gap: 8px; margin-bottom: 6px; }
.alertadd input { padding-top: 5px; padding-bottom: 5px; }
.alertadd button { padding-top: 5px; padding-bottom: 5px; }
.alertadd input { flex: 1; }
.alertadd button { white-space: nowrap; }

/* Sub stage / stage pickers on the toolbar row */
.secbar { align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.stagepick { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 700; color: #3a4740; }
.stagepick .muted { font-weight: 400; font-size: 12px; }
.stagepick #substage { min-width: 320px; }
.stagepick #stage { min-width: 170px; }
.stagepick select.alarmsel { border: 2px solid var(--bad); color: var(--bad); font-weight: 700; }
/* Big red banner for Job in Jeopardy / On Hold / Cancelled */
.alarm { border: 3px solid var(--bad); background: #fdecea; border-radius: 10px; padding: 12px 22px; text-align: center; min-width: 320px; align-self: center; }
.alarm-name { color: var(--bad); font-size: 34px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; line-height: 1.1; }
.alarm-why { color: var(--bad); font-size: 14px; font-weight: 600; margin-top: 4px; }
/* Logo */
.brand img.logo { height: 40px; display: block; background: #fff; border-radius: 6px; padding: 3px 6px; }
.secbtns { display: flex; gap: 8px; }
.linkbtn.inline { padding: 0; margin-left: 14px; font-size: 14px; }
.ahint { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--muted); }

/* Adders + Products */
table.adders input, table.products input[type=text], table.products input[type=number], table.products select { width: 100%; padding: 4px 6px; }
.addadder { gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.addadder select { width: auto; min-width: 320px; }
.addprod { gap: 8px; flex-wrap: wrap; }
.addprod #npname { flex: 1; min-width: 220px; }
.addprod #npprice { width: 120px; }
.addprod select { width: auto; }
table.products tr.inactive td { opacity: .6; }
table.adders td, table.products td { padding-top: 3px; padding-bottom: 3px; vertical-align: middle; }
table.adders .notedel { padding: 2px 8px; }
/* Adders in the side column */
#adders .alist { margin-top: 8px; }
#adders .aitem { border: 1px solid #c9d3cc; border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; }
#adders .aname { font-weight: 600; font-size: 14px; }
#adders .aedit { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
#adders .aedit input { width: 100px; padding: 3px 6px; font-size: 13px; }
#adders .notedel { font-size: 12px; padding: 1px 7px; margin-left: 6px; }
#adders .addadder { display: flex; gap: 6px; margin: 6px 0 4px; }
#adders .addadder select { flex: 1; min-width: 0; }
/* AHJ / HOA info card and directory */
.dircard { grid-column: 1 / -1; border: 1px solid #c9d3cc; background: #f7faf8; border-radius: 8px; padding: 8px 12px; margin-top: -4px; font-size: 14px; }
.dircard.empty { background: none; border: 0; padding: 0; margin-top: -6px; }
.dircard dl { display: grid; grid-template-columns: 130px 1fr; gap: 3px 10px; margin: 6px 0 0; }
.dircard dt { color: var(--muted); font-weight: 600; font-size: 13px; }
.dircard dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dircard, .dircard .dirnotes { min-width: 0; overflow-wrap: anywhere; }
.dircard .dirnotes { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); white-space: normal; }
.dircard .pw { margin-left: 8px; font-family: monospace; font-weight: 700; }
.dirform { grid-template-columns: 1fr 1fr; min-width: min(640px, 90vw); }
.dirtable tr.clickrow { cursor: pointer; }
.dirtable tr.clickrow:hover td { background: #f1f8f3; }
.tabs a.btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pwrow { display: flex; gap: 6px; } .pwrow input { flex: 1; min-width: 0; } .pwrow button { padding: 4px 10px; }
#livebar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; background: #12261a; color: #fff; border-radius: 10px; padding: 10px 14px; display: flex; gap: 14px; align-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-weight: 600; max-width: calc(100vw - 32px); }

/* ───────── Phone layout ───────── */
.menubtn { display: none; }
@media (max-width: 760px) {
  main { padding: 12px; }
  .top { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .menubtn { display: block; background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 22px; line-height: 1; padding: 6px 10px; border-radius: 8px; order: 2; margin-left: auto; }
  .brand { order: 1; } .brand img.logo { height: 34px; }
  .top nav { display: none; order: 3; width: 100%; flex-direction: column; gap: 2px; padding: 4px 0 6px; }
  .top nav a { padding: 10px 12px; font-size: 17px; }
  .top .me { display: none; order: 4; width: 100%; color: #cfe0d5; padding: 0 12px 8px; }
  body.navopen .top nav, body.navopen .top .me { display: flex; }
  h1 { font-size: 22px; }
  /* project page */
  .phead { gap: 10px; }
  .alarm { min-width: 0; width: 100%; padding: 8px 12px; }
  .alarm-name { font-size: 24px; }
  .stagebar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stagebar div { flex: 0 0 auto; white-space: nowrap; padding: 6px 10px; }
  .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tabs > * { flex: 0 0 auto; white-space: nowrap; }
  .secbar .stagepick { width: 100%; }
  .stagepick #substage, .stagepick #stage { min-width: 0; width: 100%; }
  .secbtns { width: 100%; } .secbtns button { flex: 1; }
  .alertadd { flex-wrap: wrap; } .alertadd input { min-width: 0; }
  .ahint { display: block; margin: 4px 0 0; }
  .linkbtn.inline { margin-left: 8px; }
  .notesfeed .nhead { flex-wrap: wrap; }
  .dircard dl { grid-template-columns: 96px 1fr; }
  #adders .aedit input { width: 90px; }
  /* lists become cards */
  table.list { display: block; border: 0; }
  table.list thead { display: none; }
  table.list tbody, table.list tr { display: block; }
  table.list tr { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
  table.list td { display: inline-block; border: 0 !important; padding: 2px 10px 2px 0 !important; }
  table.list td:first-child { display: block; font-size: 16px; }
  table.list td:empty { display: none; }
  table.products td { display: block; }
  /* forms and pop-ups */
  .modal-box { width: calc(100vw - 24px); max-width: none; max-height: 90vh; overflow: auto; }
  .dirform { grid-template-columns: 1fr; min-width: 0; }
  .row { flex-wrap: wrap; }
  input, select, textarea { font-size: 16px; } /* stops iPhone zooming in when you tap a box */
}
.attbox { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.attbox .row { gap: 6px; flex-wrap: wrap; }
#attchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.attchip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border-radius: 99px; padding: 3px 4px 3px 10px; font-size: 13px; }
.attchip button { border: 0; background: none; padding: 0 6px; cursor: pointer; }
.picker-dialog { z-index: 2000 !important; } .picker-dialog-bg { z-index: 1999 !important; }
#previewbar { position: sticky; top: 0; z-index: 70; background: #fff4c2; color: #5a4300; border-bottom: 2px solid #e8b400; padding: 8px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
#previewbar button { margin-left: auto; }
.pvlinks { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.pvlinks .btn { text-align: left; }
/* Calendar */
.calhead { gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.calhead button { min-width: 40px; }
.calwrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: start; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.calhd { background: #eef2ef; font-weight: 700; font-size: 13px; text-align: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.calday { min-height: 112px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px 4px 6px; cursor: pointer; }
.calday:nth-child(7n + 7) { border-right: 0; }
.calday.other { background: #f6f7f6; } .calday.other .daynum { color: #9aa49e; }
.calday.today { box-shadow: inset 0 0 0 2px var(--brand); }
.calday:hover { background: #f8fbf9; }
.daynum { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.calitem { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; padding: 2px 6px; margin-bottom: 3px; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.calitem .t { font-weight: 400; }
.calside h2 { margin-top: 0; }
.calchk { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.calchk .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.calagenda { display: none; }
@media (max-width: 760px) {
  .calwrap { grid-template-columns: 1fr; } .calgrid { display: none; } .calagenda { display: block; }
  .calside { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 10px 12px; } .calside h2, .calside p { display: none; } .calchk { font-size: 13px; padding: 3px 0; }
  .agday { margin-bottom: 10px; } .agdate { font-weight: 700; margin: 4px 0; }
  .calagenda .calitem { white-space: normal; font-size: 14px; padding: 6px 8px; }
}
.mailfield { display: flex; gap: 6px; } .mailfield input { flex: 1; min-width: 0; }
.mailbtn { white-space: nowrap; padding: 4px 10px; font-size: 13px; }
.drivelink { padding: 7px 10px; border: 1px dashed #b9c4bd; border-radius: 6px; background: #f7faf8; font-weight: 600; }
.taskbar { gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.tpick { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 700; color: #3a4740; }
.tpick select { width: auto; }
.tgroup { margin: 18px 0 6px; font-size: 16px; }
table.tasktbl { table-layout: fixed; } table.tasktbl td { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { table.tasktbl colgroup { display: none; } table.tasktbl { table-layout: auto; } }
.taskgrp { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 6px; }
.taskgrp > summary { padding: 8px 12px; cursor: pointer; font-size: 15px; }
.taskgrp > summary .count { background: var(--chip); border-radius: 99px; padding: 1px 8px; font-size: 13px; margin-left: 4px; }
.taskgrp[open] > summary { border-bottom: 1px solid var(--line); }
.taskgrp table.list { margin: 0; }
.emailframe { width: 100%; min-height: 300px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.unf { border-top: 1px solid var(--line); padding: 10px 0; }
/* Calls, texts & meetings */
.commsbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.commsbtns button { padding: 6px 10px; font-size: 13px; }
.commsbtns button:disabled { opacity: .45; cursor: not-allowed; }
.smsbody { white-space: pre-wrap; background: #f4f7f5; border-radius: 6px; padding: 5px 8px; margin-top: 3px; }
.pickbtn { display: block; width: 100%; text-align: left; margin-top: 6px; }
label.inl { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-weight: normal; }
label.inl input { width: auto; }
.sub3 { font-size: 14px; margin: 10px 0 4px; }
/* Edit buttons for tasks and notes */
.tedit { border: 0; background: none; color: var(--muted); padding: 0 4px; margin-left: 4px; font-size: 13px; cursor: pointer; }
.tedit:hover { color: var(--ink, #222); background: #eef2ef; border-radius: 4px; }
.notesfeed .noteedit { font-size: 12px; padding: 2px 8px; background: #fff; }
.notesfeed .nedit textarea { width: 100%; min-height: 90px; margin-top: 4px; }
.notesfeed .nedit input { width: 100%; }
.modal #te_del { color: var(--bad); border-color: #f0c4bf; }
/* Dealer portal: project page */
.dproj { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.dproj .panel { margin-bottom: 14px; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.dgrid > div { display: flex; flex-direction: column; gap: 2px; }
.dmsgs { max-height: 380px; overflow: auto; margin-bottom: 8px; }
.dmsg { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; background: #fff; font-size: 14px; }
.dmsg.mine { background: #eef6f0; border-color: #cfe5d7; }
.dmsg .when { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.dfiles { list-style: none; padding: 0; margin: 8px 0 0; }
.dfiles li { padding: 5px 0; border-bottom: 1px solid var(--line); }
#dmsg { width: 100%; }
@media (max-width: 800px) { .dproj { grid-template-columns: minmax(0, 1fr); } }
.modal [data-edel] { margin-right: 6px; }
/* Email editor toolbar (Gmail-style) */
.edtools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-bottom: 0; border-radius: 7px 7px 0 0; background: #f6f8f7; }
.edtools button { padding: 3px 7px; min-width: 28px; font-size: 13px; border-color: transparent; background: transparent; }
.edtools button:hover { background: #e4ebe6; }
.edtools select { width: auto; font-size: 12px; padding: 2px 4px; }
.edtools .edsep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.edcolor { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; font-weight: 700; color: #c62828; cursor: pointer; border-radius: 5px; }
.edcolor.hl { color: #e6c200; }
.edcolor:hover { background: #e4ebe6; }
.edcolor input { position: absolute; inset: auto 0 0 0; width: 100%; height: 5px; padding: 0; border: 0; opacity: .9; cursor: pointer; }
.edtools + .editor { border-radius: 0 0 7px 7px; }
.tpl [data-tdel] { margin-right: auto; }
.tpl [data-tdel], #fdel, #edel, .modal [data-edel] { color: var(--bad); border-color: #f0c4bf; background: #fff; }
.pinfo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 14px; }
.pinfo > span { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pausednote { margin-top: 8px; padding: 6px 9px; border-radius: 6px; background: #fff4e5; color: #8a5300; font-size: 13px; }
.pausedtoggle { background: #fff4e5; padding: 3px 8px; border-radius: 6px; }
.dirform2 fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 10px; padding: 6px 12px 10px; }
.dirform2 legend { font-weight: 700; padding: 0 6px; }
.dirsources { font-size: 13px; overflow-wrap: anywhere; }
.dirsources div { margin-top: 2px; }
/* Project sections: text boxes are sized by layoutFields() in app.js; the Drive folder row stays at the bottom. */
.psec .fields { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px 12px; }
.psec .fields > label { min-width: 0; }
.psec .fields > label input, .psec .fields > label select { min-width: 0; width: 100%; }
.dircard.beside { margin-top: 0; align-self: start; }
.podiobtn { width: 100%; text-align: left; font-weight: 700; color: var(--brand, #1f6b3a); background: #f1f8f3; border: 1px dashed #b9d5c2; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.podiobtn:hover { background: #e3f4e8; }
/* Scope of Work */
.sowtable tr.sowcat td { background: #eef3f8; font-weight: 600; font-size: 13px; }
.sowtable tbody td { vertical-align: middle; padding-top: 4px; padding-bottom: 4px; }
.sowtable td:nth-child(2), .sowtable td:nth-child(3) { white-space: nowrap; }
.sowpanel .sowtable input.sownum { width: 88px; display: inline-block; text-align: right; padding: 4px 6px; margin: 0; }
.sowpanel .addadder { display: flex; gap: 6px; align-items: center; }
.sowpanel .addadder select { flex: 1; min-width: 0; width: auto; }
.sowacts { display: flex; flex-wrap: wrap; gap: 4px; }
.sowu { display: inline-block; width: 20px; text-align: left; padding-left: 2px; }
/* Material order (BOM) */
.bomtable input[type=text] { padding: 4px 6px; }
.bomtable td { vertical-align: middle; padding-top: 3px; padding-bottom: 3px; }
.bompanel .wide2 { grid-column: span 2; }
.bompanel #bomstatus { width: auto; }
/* Directory v1: record view + template editor */
.modal-box.wide { max-width: min(1000px, 96vw); width: 96vw; }
.recview .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.recview .fact { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #f7faf8; }
.recview .fact b { display: block; font-size: 15px; }
.recview .fact span { color: var(--muted); font-size: 12px; }
.recview .recgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recview .reccard { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.recview .reccard dl { display: grid; grid-template-columns: 120px 1fr; gap: 3px 10px; margin: 6px 0 0; }
.recview .reccard dt { color: var(--muted); font-weight: 600; font-size: 13px; }
.recview .reccard dd { margin: 0; }
.recview ol.steps { margin: 6px 0 0 18px; padding: 0; } .recview ol.steps li { margin-bottom: 6px; }
.recview ul.cl { list-style: none; margin: 6px 0 0; padding: 0; } .recview ul.cl li { margin-bottom: 4px; }
.recflag { border-left: 4px solid #9db3c8; background: #f2f6fa; padding: 6px 10px; margin: 6px 0; border-radius: 4px; }
.recflag.warn { border-color: #d9a400; background: #fff8e1; } .recflag.bad { border-color: #c62828; background: #fdecea; }
.tpled { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.tpled .tpllist { margin-top: 8px; }
.tplrow { display: flex; gap: 6px; margin-top: 4px; align-items: flex-start; }
.tplrow input, .tplrow textarea { flex: 1; min-width: 0; }
@media (max-width: 760px) { .recview .facts { grid-template-columns: 1fr 1fr; } .recview .recgrid { grid-template-columns: 1fr; } }
details.psec.fixed > summary { cursor: default; }
details.psec.fixed > summary h2::before { content: none; }
/* Locked link / email / phone: looks like the other boxes, can't be typed in until "Change" */
.lockbox { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line, #d0d7d2); border-radius: 8px; background: #fafbfa; min-width: 0; flex: 1; }
.lockbox a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lockedit { flex: none; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line, #d0d7d2); background: #fff; color: var(--muted, #667); cursor: pointer; }
.lockedit:hover { color: inherit; border-color: #9aa8a0; }
.mailfield .lockbox { flex: 1; }
/* Open alerts: red border around the Alerts section */
details.psec.hasalert { border: 3px solid #c62828; background: #fff5f5; }
.alertbanner { display: flex; gap: 10px; align-items: center; margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: #c62828; color: #fff !important; text-decoration: none; font-size: 15px; min-width: 0; }
.alertbanner b { white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.alertbanner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.alertbanner:hover { background: #a31515; }
.phead > div:first-child { min-width: 0; flex: 1 1 auto; }
.pinfo > span.pinfo-sub { background: #cfe5d7; border-color: #a9cdb6; color: #1e5a37; font-size: 17px; font-weight: 700; padding: 3px 14px; }
.bomtable tr.bomspecial td:first-child input { border-left: 3px solid var(--sun, #f5a623); }
/* Group of sections under one arrow (System, Design & Electrical) */
details.psecgroup > summary { list-style: none; cursor: pointer; }
details.psecgroup > summary::-webkit-details-marker { display: none; }
details.psecgroup > summary h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
details.psecgroup > summary h2::before { content: '▸'; font-size: 14px; color: var(--muted); transition: transform .15s; display: inline-block; }
details.psecgroup[open] > summary h2::before { transform: rotate(90deg); }
details.psecgroup[open] > summary { margin-bottom: 10px; }
details.psecgroup > details.psec { margin: 8px 0 0; box-shadow: none; background: #fbfcfb; }
.pinfo > span.pinfo-hoa { background: var(--brand, #2f7d4f); border-color: var(--brand, #2f7d4f); color: #ffe100; }
/* Projects list grouped by sub stage */
.pipetable tbody.pgrp tr.prow { display: none; }
.pipetable tbody.pgrp.open tr.prow { display: table-row; }
.pipetable tr.pgrphead td { background: #f3f6f4; cursor: pointer; padding: 8px 10px; border-top: 1px solid var(--line); user-select: none; }
.pipetable tr.pgrphead:hover td { background: #e8efea; }
.pipetable tr.pgrphead .caret { display: inline-block; width: 12px; color: var(--muted); transition: transform .15s; }
.pipetable tbody.pgrp.open tr.pgrphead .caret { transform: rotate(90deg); }
.pipetable tr.pgrphead .count { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; background: #cfe5d7; color: #1e5a37; border-radius: 999px; padding: 1px 8px; }
@media (max-width: 760px) {
  .pipetable tbody.pgrp.open tr.prow { display: block; }
  .pipetable tr.pgrphead { border: 0; padding: 0; background: none; }
  .pipetable tr.pgrphead td { display: block; border-radius: 8px; }
}
/* Two levels on All open: stage, then sub stage */
.pipetable tbody.pgrp.sclosed { display: none; }
.pipetable tr.sgrphead td { background: #e3ede6; cursor: pointer; padding: 10px 10px; border-top: 2px solid #b9d5c2; font-size: 15px; user-select: none; }
.pipetable tr.sgrphead:hover td { background: #d6e6db; }
.pipetable tr.sgrphead .caret { display: inline-block; width: 12px; color: var(--muted); transition: transform .15s; }
.pipetable tbody.sgrp.open tr.sgrphead .caret { transform: rotate(90deg); }
.pipetable tr.sgrphead .count { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; background: var(--brand, #2f7d4f); color: #fff; border-radius: 999px; padding: 1px 8px; }
.pipetable tbody.pgrp.sub tr.pgrphead td { padding-left: 30px; }
@media (max-width: 760px) {
  .pipetable tr.sgrphead { border: 0; padding: 0; background: none; }
  .pipetable tr.sgrphead td { display: block; border-radius: 8px; }
  .pipetable tbody.pgrp.sub tr.pgrphead td { margin-left: 14px; }
}
/* Adders list scrolls inside its box instead of growing the page */
#adders .alist { max-height: 340px; overflow-y: auto; padding-right: 4px; scrollbar-gutter: stable; }
/* Welcome call */
.wcscript { background: #e8f6ec; border: 1px solid #a8d8b5; border-radius: 8px; padding: 8px 12px; font-size: 15px; font-weight: 600; color: #1d4d2c; }
.wchead .chip { align-self: center; }
.hoahcard { margin: 8px 0 0 22px; font-weight: 400; cursor: auto; }
.hoahcard dl { grid-template-columns: 110px 1fr 110px 1fr; }
@media (max-width: 760px) { .hoahcard { margin-left: 0; } .hoahcard dl { grid-template-columns: 100px 1fr; } }
.chip.info { background: #e6f0fb; color: #1d4f91; }
.wchead .hoachip { font-size: 13px; font-weight: 700; padding: 3px 10px; }
.hoasug { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: #fff8e6; border: 1px solid #f0d58a; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; font-size: 13.5px; }
.hoasug button { padding: 4px 10px; font-size: 13px; }
.wchead button.recording { background: #fdecec; border-color: #e5a3a3; color: #b42318; opacity: 1; }
.wcatt { display: flex; flex-direction: column; gap: 2px; }
.wcolder > summary { cursor: pointer; margin: 4px 0; }
.wcscripttext p { margin: 8px 0; line-height: 1.45; }
.wcscripttext .wcsay { background: #e8f6ec; border: 1px solid #a8d8b5; border-radius: 8px; padding: 8px 12px; font-weight: 600; color: #1d4d2c; }
.wchead { display: inline-flex; gap: 6px; margin-left: 14px; flex-wrap: wrap; vertical-align: middle; }
.wchead .btn, .wchead button { padding: 4px 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
@media (max-width: 760px) { .wchead { margin-left: 0; margin-top: 6px; display: flex; } }
select.needs { border-color: #c62828; }
.wcrecs { display: flex; flex-direction: column; gap: 8px; }
.wcrec { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fafbfa; }
/* Admin: panels fold up under their heading */
/* Admin (Rick, Oct 8): the section pickers are the standard .chips rows (see UI standards); only the open section shows. */
.admtool { margin: 0 0 12px; } .admtool .chips { margin: 0 0 4px; } .admtool .chiplabel { min-width: 132px; }
@media (max-width: 560px) { .admtool .chiplabel { min-width: 0; flex-basis: 100%; margin-top: 4px; } }
.admpanel[hidden] { display: none !important; }
@media (max-width: 560px) { .admhide { display: none; } }

.draftbox { border: 1px dashed #e0b84a; background: #fffaf0; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }

/* Open project tabs (like browser tabs) */
#ptabs { display: flex; gap: 4px; align-items: flex-end; padding: 6px 12px 0; background: #eef3ee; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
#ptabs[hidden] { display: none; }
.ptab { display: inline-flex; align-items: center; gap: 6px; max-width: 210px; min-width: 90px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; background: #f8faf8; color: inherit; text-decoration: none; font-size: 13px; flex: 0 1 auto; }
.ptab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ptab.on { background: #fff; font-weight: 600; box-shadow: 0 -2px 0 #1f6b3a inset; }
.ptab:hover { background: #fff; }
.ptab button { border: none; background: none; padding: 0 4px; font-size: 12px; color: var(--muted); cursor: pointer; line-height: 1; border-radius: 4px; }
.ptab button:hover { background: #e3e8e3; color: #000; }
.ptabclear { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 6px 8px; white-space: nowrap; }
/* Project page: find another project */
.pjumprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pjump { position: relative; flex: 0 1 320px; min-width: 200px; }
.pjump input { width: 100%; padding: 5px 10px; font-size: 13px; }
#pjumpres { position: absolute; top: calc(100% + 2px); left: 0; right: 0; min-width: 280px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); z-index: 30; max-height: 360px; overflow: auto; }
#pjumpres a { display: block; padding: 7px 10px; color: inherit; text-decoration: none; border-bottom: 1px solid #f0f0f0; }
#pjumpres a.on, #pjumpres a:hover { background: #eef6ef; }
@media (max-width: 700px) { .pjump { flex-basis: 100%; } .ptab { min-width: 80px; max-width: 150px; } }
.portalsearch { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.portalsearch input { flex: 0 1 420px; min-width: 220px; }
.cdocgroup { margin-bottom: 10px; } .cdoct { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; } .cdoc { padding: 2px 0; }
.plansreview { border: 2px solid #1f6b3a; background: #f3faf4; }
.eqpending { border-color: #f0d58a; background: #fffcf2; }
/* Install › scheduling emails, Material ordering */
.ordbox { background: #f3f5f2; border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; min-height: 34px; overflow-wrap: anywhere; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.ordfile { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; border-style: dashed; background: #fff; }
.sched { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.stabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: #fafbf9; }
.stabs button { border: 0; background: none; padding: 9px 12px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; }
.stabs button.on { color: inherit; border-bottom-color: #1f6b3a; background: #fff; }
.spanel { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.spanel p { margin: 0; }
.slot { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.slot b { font-size: 12px; color: var(--muted); }
.slot2 { display: flex; gap: 10px; flex-wrap: wrap; } .slot2 label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); min-width: 150px; flex: 1; }
.ordlog { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 2px 10px; }
.ordlog:empty { display: none; }
.ordlog > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; align-items: center; font-size: 13px; }
.ordlog > div:last-child { border-bottom: 0; } .ordlog > .muted { display: block; padding: 6px 0; }
.mosteps { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.mosteps div { flex: 1 1 0; min-width: 110px; padding: 7px 10px; border-right: 1px solid var(--line); font-size: 12px; display: flex; flex-direction: column; }
.mosteps div:last-child { border-right: 0; } .mosteps .done { background: #e0f0e5; } .mosteps .cur { background: #fff7dd; } .mosteps span { color: var(--muted); }
table.cmp td { vertical-align: top; } tr.cmpbad td { background: #fdf3f1; } tr.cmpwarn td { background: #fef8ec; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
@media (max-width: 640px) { .slot { grid-template-columns: 28px 1fr; } .ordlog > div { grid-template-columns: 1fr; } }
.fblock { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .fblock > .flabel { font-size: 12px; color: var(--muted); }
/* Equipment documents: folding groups */
details.eqgrp > summary { cursor: pointer; list-style: none; padding: 6px 2px; display: flex; align-items: center; gap: 8px; }
details.eqgrp > summary::-webkit-details-marker { display: none; }
details.eqgrp > summary::before { content: '▸'; color: var(--muted); font-size: 13px; transition: transform .15s; display: inline-block; }
details.eqgrp[open] > summary::before { transform: rotate(90deg); }
details.eqsub { margin-left: 18px; border-top: 1px solid #f0e6c8; }
/* Design › Business license box (city / county license for this project, with our license copy) */
.licbox { border: 1px solid #c9d3cc; background: #f7faf8; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
/* Project page: tabs, ← Projects / search and the project name stay visible while scrolling */
#ptabs { position: sticky; top: var(--toph, 52px); z-index: 5; }
.pstick { position: sticky; top: calc(var(--toph, 52px) + var(--tabh, 0px)); z-index: 4; background: var(--bg); margin: -20px -20px 10px; padding: 10px 20px 8px; border-bottom: 1px solid var(--line); }
.pstick h1 { margin: 6px 0 0; }
@media (max-width: 760px) { .pstick { margin: -12px -12px 8px; padding: 8px 12px 6px; } .pstick h1 { font-size: 17px; } }
/* Job checklists (site survey, install photos, final inspection) */
.clbox { border: 1px solid #c9d3cc; background: #f7faf8; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.clbar { display: inline-block; width: 120px; height: 8px; border-radius: 99px; background: #dfe6e1; overflow: hidden; vertical-align: middle; }
.clbar i { display: block; height: 100%; background: #3e7744; }
.cltags { margin: 10px 0 4px; }
.clsec { margin-top: 14px; }
.clsec h3 { margin: 0 0 4px; padding: 6px 10px; background: #3e7744; color: #fff; border-radius: 6px; font-size: 14px; }
.clitem { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 300px); gap: 4px 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.clitem.done .clcheck span { color: #4b6b52; }
.clcheck { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; margin: 0; cursor: pointer; }
.clcheck input { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.clans { display: flex; flex-direction: column; gap: 4px; }
.clans input { font-size: 13px; padding: 4px 6px; }
.clby { grid-column: 1 / -1; padding-left: 26px; margin-top: -2px; }
.clnote { width: 100%; min-height: 44px; margin-top: 6px; font-size: 13px; }
@media (max-width: 700px) { .clitem { grid-template-columns: minmax(0, 1fr) auto; } .clans { grid-column: 1 / -1; padding-left: 26px; } }
/* Test copy (staging): an orange bar on every page */
html.staging body { border-top: 28px solid #e8590c; }
html.staging body::before { content: 'TEST COPY \2014  changes here do not affect the live app'; position: fixed; top: 0; left: 0; right: 0; height: 28px; line-height: 28px; text-align: center; color: #fff; font: 600 13px system-ui, sans-serif; background: #e8590c; z-index: 1000; }
#toast.withbtn { pointer-events: auto; }
#toast .toastundo { margin-left: 10px; background: #fff; color: #16271e; border: 0; border-radius: 6px; padding: 3px 10px; font-weight: 600; cursor: pointer; }
.tlist li.done .treopen { margin-left: 8px; }
.tnote { white-space: pre-wrap; color: #4b5a50; }
.hcheck { padding: 4px 0; border-bottom: 1px solid var(--line); } .hcheck summary { cursor: pointer; } .hcheck ul { margin: 4px 0 8px 18px; font-size: 13px; }
.nextstep { font-size: 13px; line-height: 1.25; max-width: 260px; } .latedue { color: var(--bad); font-weight: 600; } .pipetable td.nextcell { min-width: 180px; }
/* Scheduling blocks */
.schblk { border: 1px solid #c9d3cc; border-radius: 8px; padding: 10px 12px; background: #fbfcfb; }
.schhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.schsteps { display: flex; gap: 4px; margin: 8px 0; flex-wrap: wrap; } .schsteps span { padding: 3px 10px; border-radius: 99px; font-size: 12px; background: #fff; border: 1px solid #d5ddd8; color: #6b776f; }
.schsteps span.done { background: #e3f4e8; border-color: #9cc9a9; color: #1f6b3a; } .schsteps span.now { background: #fff4d6; border-color: #e6c46a; color: #7a5600; font-weight: 600; }
.schconf { margin: 6px 0; font-size: 15px; } .schready { background: #fff; border: 1px dashed #d5ddd8; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.schdates { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; } .schdate { font-weight: normal; margin: 0; display: flex; gap: 6px; align-items: center; } .schdate.past { opacity: .5; }
.schadd { gap: 6px; flex-wrap: wrap; margin: 6px 0; } .schadd input, .schadd select { width: auto; }
.schopts { gap: 10px; flex-wrap: wrap; margin: 6px 0; } .schopts input, .schopts select { width: auto; }
.schbtns { gap: 6px; flex-wrap: wrap; margin-top: 6px; } .schbar { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: #fff4d6; border: 1px solid #e6c46a; }
.schblk label.schdate { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; }
.schblk label.schdate > * { display: inline-block; } .schblk label.schdate input[type=radio] { width: auto; margin: 0; flex: none; } .schblk label.schdate .linkbtn { margin-left: auto; }
.schblk .schhead label { flex-direction: row; align-items: center; gap: 6px; } .schblk .schready label.inl { flex-direction: row; display: inline-flex; }
.schbtns button:disabled, .schbtns button.primary:disabled { opacity: .45; cursor: not-allowed; }
.schact div { padding: 2px 0; } .instdates { margin-top: 6px; } .instdates .ia_note { margin: 4px 0; }
/* Project status card */
.statuscard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 540px); gap: 6px 16px; align-items: center; background: #fff; border: 1px solid #d5ddd8; border-radius: 10px; padding: 7px 14px; margin: 0 0 14px; }
/* Compact strip: each label sits inline with its value */
.sc-info { display: grid; gap: 4px; min-width: 0; }
.sc-line { line-height: 1.35; font-size: 14px; }
.sc-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
.sc-big { font-size: 15px; font-weight: 700; } .sc-next { font-weight: 600; }
.sc-blockers { display: inline; margin-left: 14px; } .sc-blockers .sc-h { color: #9b2c1f; }
.sc-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 10px; }
.sc-date { display: grid; grid-template-columns: 16px 1fr; font-size: 12px; line-height: 1.25; } .sc-date span { grid-row: span 2; }
.sc-date b { font-weight: 600; } .sc-date i { font-style: normal; color: var(--muted); grid-column: 2; }
.sc-date.todo { opacity: .55; } .sc-date.soon b { color: #7a5600; } .sc-date.done span { color: #1f6b3a; }
.sc-block { color: #9b2c1f; font-size: 13px; }
@media (max-width: 1150px) { .statuscard { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .sc-blockers { display: block; margin-left: 0; margin-top: 4px; } }
/* Status card tint (a little brighter than the Alerts rows): on track / blockers or overdue tasks / Job in Jeopardy or On Hold */
.statuscard.sc-green { background: #ecf9f0; border-color: #9fd8b1; }
.statuscard.sc-amber { background: #fff4d9; border-color: #f2c25c; }
.statuscard.sc-red { background: #fdeceb; border-color: #eea59d; }
/* Pipeline view toggle + Classic view */
.segtoggle { display: inline-flex; border: 1px solid #c9d3cc; border-radius: 8px; overflow: hidden; }
.segtoggle button { border: 0; border-radius: 0; background: #fff; padding: 6px 12px; font-size: 13px; margin: 0; }
.segtoggle button.on { background: #1f6b3a; color: #fff; }
.pipetable.classic tr.cstage td { background: #1f4d30; color: #fff; font-weight: 700; padding: 7px 10px; }
.pipetable.classic tr.cstage .count, .pipetable.classic tr.csub .count { background: rgba(255,255,255,.2); border-radius: 99px; padding: 0 8px; font-size: 12px; margin-left: 6px; }
.pipetable.classic tr.csub td { background: #e3f0e7; color: #1d2a22; font-weight: 600; padding: 5px 10px; }
.pipetable.classic tr.csub .count { background: #fff; }
.pipetable.classic tr.crow { cursor: pointer; } .pipetable.classic tr.crow:hover td { background: #f5f9f6; }
.pipetable.classic td:nth-child(1), .pipetable.classic td:nth-child(5), .pipetable.classic td:nth-child(6) { white-space: nowrap; }
/* Bottlenecks */
.bn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.bn-tiles div { background: #fff; border: 1px solid #d5ddd8; border-radius: 10px; padding: 10px 14px; } .bn-tiles b { display: block; font-size: 24px; } .bn-tiles span { color: var(--muted); font-size: 12px; }
.bn-tiles .bad b { color: #9b2c1f; }
.bn-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; align-items: start; } @media (max-width: 900px) { .bn-grid { grid-template-columns: 1fr; } }
.bn-trend { display: flex; gap: 6px; align-items: flex-end; height: 100px; margin: 8px 0; } .bn-week { flex: 1; text-align: center; font-size: 10px; color: var(--muted); }
.bn-bars { display: flex; gap: 1px; align-items: flex-end; justify-content: center; height: 72px; } .bn-bar { width: 6px; border-radius: 2px 2px 0 0; min-height: 1px; }
.bn-bar.sold, .bn-key.sold { background: #8fb3d9; } .bn-bar.inst, .bn-key.inst { background: #1f6b3a; } .bn-bar.pto, .bn-key.pto { background: #e6c46a; }
.bn-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: middle; }
button.done { background: #e3f4e8; border-color: #9cc9a9; color: #1f6b3a; }
.bulkbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff4d6; border: 1px solid #e6c46a; border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.bn-cyc { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .bn-cyc h3 { font-size: 13px; margin: 4px 0; }
/* ───────── directory record cards ───────── */
.rc-page { display: grid; gap: 18px; }
.rc { container-type: inline-size; background: #fff; border: 1px solid #dfe5df; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.05); scroll-margin-top: 80px; }
.rc-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #1f2b23; color: #fff; flex-wrap: wrap; }
.rc-av { width: 46px; height: 46px; border-radius: 10px; background: #e8b84a; color: #1f2b23; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; }
.rc-av.sm { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; } .rc-av.xs { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }
.rc-title { flex: 1; min-width: 200px; } .rc-title h2 { margin: 0; font-size: 22px; color: #fff; }
.rc-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #c9d3cc; margin-top: 2px; }
.rc-key { display: inline-block; margin-top: 4px; font-size: 11px; background: rgba(255,255,255,.1); color: #dfe6e1; padding: 1px 6px; border-radius: 4px; }
.rc-portal { display: flex; flex-direction: column; position: relative; background: #dff0e2; color: #1f2b23 !important; text-decoration: none; padding: 8px 34px 8px 12px; border-radius: 10px; max-width: 300px; }
.rc-portal b { font-size: 14px; } .rc-portal span { font-size: 12px; color: #4a5a4f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-portal i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 18px; }
.rc-pct { display: flex; align-items: center; gap: 8px; } .rc-pct b { display: block; font-size: 14px; } .rc-pct span { font-size: 12px; color: #c9d3cc; }
.rc-ring { width: 40px; height: 40px; } .rc-ring text { font-size: 10px; font-weight: 700; fill: #fff; }
.rc-edit, .rc-refresh { border-radius: 8px; padding: 7px 12px; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; }
.rc-refresh { background: #e8b84a; color: #1f2b23; border-color: #e8b84a; }
.rc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 18px 0; }
.rc-facts div { border: 1px solid #dfe5df; border-radius: 10px; padding: 8px 12px; } .rc-facts b { display: block; font-size: 17px; color: #1f2b23; } .rc-facts span { font-size: 12px; color: #667; }
.rc-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; padding: 12px 18px; }
.rc-main { border: 1px solid #dfe5df; border-radius: 10px; overflow: hidden; }
.rc-tabs { display: flex; border-bottom: 1px solid #dfe5df; background: #f6f8f6; overflow-x: auto; }
.rc-tabs button { flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 10px; font-weight: 700; color: #667; cursor: pointer; white-space: nowrap; }
.rc-tabs button.on { color: #1f2b23; border-bottom-color: #3f7a4a; background: #fff; } .rc-n { background: #ece7d6; border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.rc-pane { padding: 12px 14px; } .rc-sum { margin: 0 0 10px; }
.rc-grp h4, .rc-box h4, .rc-linked h4 { margin: 10px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #3f7a4a; }
.rc-grp dl, .rc-box dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; margin: 0; }
.rc-grp dl div, .rc-box dl div { border-left: 2px solid #e4e9e4; padding-left: 8px; } .rc-grp dt, .rc-box dt { font-size: 12px; color: #667; } .rc-grp dd, .rc-box dd { margin: 0; overflow-wrap: anywhere; }
.rc-steps { margin: 0; padding-left: 20px; } .rc-steps li { margin-bottom: 8px; } .rc-steps .chip { margin-left: 6px; } .rc-steps div { font-size: 14px; color: #445; }
.rc-req { list-style: none; padding: 0; margin: 0; } .rc-req li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e4e9e4; }
.rc-flag { padding: 7px 10px; border-radius: 8px; background: #f6f8f6; margin-bottom: 6px; } .rc-flag.warn { background: #fff7e0; } .rc-flag.bad { background: #fdecea; }
.rc-web { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #e4e9e4; border-radius: 10px; margin-bottom: 6px; text-decoration: none; color: inherit; }
.rc-web span:nth-child(2) { flex: 1; display: flex; flex-direction: column; } .rc-web small { color: #667; } .rc-web em { font-style: normal; font-size: 12px; } .rc-web em.ok { color: #2f6b3a; } .rc-web em.bad { color: #b3261e; } .rc-web i { font-style: normal; }
.rc-side { display: grid; gap: 10px; align-content: start; }
.rc-box { border: 1px solid #dfe5df; border-radius: 10px; padding: 8px 12px 10px; background: #fbfcfb; text-align: left; }
.rc-proj { background: #f2f7f2; } .rc-proj dl { grid-template-columns: 1fr 1fr; }
.rc-count { display: flex; align-items: center; gap: 12px; cursor: pointer; width: 100%; font: inherit; }
.rc-count > b { font-size: 24px; color: #3f7a4a; } .rc-count span { flex: 1; display: flex; flex-direction: column; } .rc-count small { color: #667; } .rc-count i { font-style: normal; }
.rc-contact { padding: 4px 0 6px; } .rc-crow { display: flex; gap: 8px; align-items: center; font-size: 14px; } .rc-crow span:first-child { color: #667; width: 70px; flex: none; }
.rc-copy { margin-left: auto; background: none; border: 0; cursor: pointer; color: #667; }
.rc-linked { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 18px 10px; } .rc-linked h4 { margin: 0 6px 0 0; }
.rc-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe5df; border-radius: 999px; padding: 3px 10px 3px 4px; background: #fff; cursor: pointer; font: inherit; font-size: 14px; }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #d99a2b; } .rc-dot.ok { background: #3f7a4a; } .rc-dot.bad { background: #c0392b; }
.rc-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 8px 18px; background: #f6f8f6; border-top: 1px solid #e4e9e4; font-size: 13px; color: #667; }
.rc-foot code { background: #ece7d6; border-radius: 4px; padding: 0 5px; font-size: 11px; }
.modal-box.rcwide { max-width: min(1240px, 97vw); width: 97vw; padding: 12px; } .rc-modal .rc { box-shadow: none; }
@media (max-width: 900px) { .rc-body { grid-template-columns: 1fr; } .rc-facts { grid-template-columns: 1fr 1fr; } .rc-portal { max-width: none; flex: 1 1 100%; } }

.rc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.rc-count i { flex: none; } .rc-count span { min-width: 0; }
@container (max-width: 860px) { .rc-body { grid-template-columns: 1fr; } .rc-facts { grid-template-columns: 1fr 1fr; } .rc-portal { order: 3; flex: 1 1 100%; max-width: none; } .rc-actions { margin-left: auto; } }
/* Interconnection packet */
.icp { display: grid; gap: 14px; }
.ichead { padding: 14px 16px; }
.icring { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#2e7d4f calc(var(--p) * 1%), #e6ebe6 0); position: relative; flex: none; }
.icring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.icring b { position: relative; font-size: 13px; }
.icfacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.icfact { background: #f5f7f4; border: 1px solid #e3e8e2; border-radius: 10px; padding: 6px 10px; display: grid; min-width: 120px; }
.icfact span { font-size: 11px; color: var(--muted, #6b746b); text-transform: uppercase; letter-spacing: .03em; }
.icfact b { font-weight: 600; font-size: 13px; }
.icgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.icsec { padding: 12px 14px; }
.icsec h3 { margin: 0 0 8px; font-size: 15px; }
.icdocs { grid-column: 1 / -1; }
.icrow { display: grid; grid-template-columns: minmax(150px, 40%) 1fr; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; border-bottom: 1px solid #eef1ee; }
.icrow:last-child { border-bottom: 0; }
.icrow > label { font-size: 13px; color: #3c463c; }
.icrow.miss { background: #fff6e8; }
.icrow.miss > label { color: #8a4b00; font-weight: 600; }
.icval { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.icval input, .icval select { flex: 1; min-width: 120px; padding: 5px 8px; }
.icdocs .icval select { flex: 0 1 200px; }
.icv { flex: 1; word-break: break-word; }
.icc { padding: 3px 9px; font-size: 12px; border-radius: 6px; }
@media (max-width: 640px) { .icrow { grid-template-columns: 1fr; gap: 4px; } .icgrid { grid-template-columns: 1fr; } }
/* Directory card: History tab */
.rc-hist { border: 1px solid #e3e8e2; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.rc-hist.undone { opacity: .6; }
.rc-hhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rc-hist ul { margin: 6px 0 4px; padding-left: 18px; font-size: 13px; }
.rc-hist li { margin: 2px 0; word-break: break-word; }
.rc-hist s { color: #8a8f8a; }
.rc-refresh.rc-claude { background: #fff; color: #1f2b23; border-color: #fff; }
/* Project › Monitoring */
.monbox { border: 1px solid #e3e8e2; background: #fafbf9; border-radius: 10px; padding: 10px 12px; }
.monbox.ok { background: #eef7f0; border-color: #cfe7d6; }
.monbox ol { list-style: none; padding: 0; margin: 6px 0; }
.monbox li { margin: 2px 0; color: #6b746b; } .monbox li.done { color: #1f6b3a; }
/* Homeowner portal › monitoring */
.cmon { display: flex; gap: 10px; align-items: center; }
.monlive { margin: 4px 0; padding: 4px 8px; border-radius: 6px; font-size: 13px; } .monlive.ok { background: #e3f4e8; } .monlive.bad { background: #fde7e5; }
tr.monbad td { background: #fff6f5; }
.req { color: #b42318; font-size: 15px; font-weight: 800; line-height: 1; margin-left: 2px; }   /* required: a red * after the label */
label > .lt { display: inline; white-space: nowrap; }   /* the label text and its * stay on one line */
label.reqmiss input, label.reqmiss select { border-color: #e5484d; background: #fff5f5; }
.fields.hide-empty label.empty.reqmiss { display: flex; }
/* Project header, tidier: name + back + search on one line; key dates live in the stage bar */
.pstick .pjumprow h1 { margin: 0; }
.pstick .pjumprow { flex-wrap: nowrap; } .pstick .pjump { min-width: 200px; }
.stagebar div { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; }
.stagebar .sb-date { display: block; font-size: 10.5px; font-weight: 500; opacity: .9; } .stagebar .sb-date i { font-style: normal; }
.stagebar div.now .sb-date { color: #fff; }
.sc-picks { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; align-items: end; } .sc-picks .stagepick { display: grid; gap: 1px; font-size: 11px; color: var(--muted); min-width: 0; }
.sc-picks .stagepick .muted { font-size: 11px; }
.sc-picks select, .sc-picks .stagepick #substage, .sc-picks .stagepick #stage { width: 100%; min-width: 0; font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 480px) { .sc-picks { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pstick .pjumprow { flex-wrap: wrap; } .pstick .pjump { min-width: 0; flex: 1; } }
.pstick .pback { margin-left: 14px; white-space: nowrap; } .pstick .pjump { flex: 0 1 320px; }
/* HOA tag in the info bar opens the HOA card when an HOA is picked */
.pinfo > button.pinfo-hoa { border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); background: var(--brand, #2f7d4f); border: 1px solid var(--brand, #2f7d4f); color: #ffe100; font-size: 17px; font-weight: 700; padding: 3px 14px; cursor: pointer; }
.pinfo > button.pinfo-hoa:hover { filter: brightness(1.1); }
/* ───────── Installer & dealer portals (same look as the Directory record cards) ───────── */
.ip { display: grid; gap: 12px; max-width: 1100px; }
.ip-hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #1f2b23; color: #fff; border-radius: 14px; padding: 14px 18px; }
.ip-hero > div { flex: 1; min-width: 200px; } .ip-hero h1 { margin: 0; color: #fff; font-size: 22px; border: 0; padding: 0; } .ip-hero .ip-sub { color: #c9d3cc; font-size: 13px; margin-top: 2px; }
.ip-back { color: var(--muted); font-size: 14px; }
.ip-card { background: #fff; border: 1px solid #dfe5df; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.ip-ch { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f6f8f6; border-bottom: 1px solid #e4e9e4; border-left: 6px solid #3f7a4a; }
.ip-ch b { font-size: 15px; } .ip-cb { padding: 10px 14px 12px; display: grid; gap: 10px; }
.ip-minhead { cursor: pointer; user-select: none; } .ip-mintw { display: inline-block; width: 12px; font-size: 11px; color: #667; transform: rotate(90deg); transition: transform .15s; }
.ip-fmtbox { max-width: 560px; } .ip-badfiles { margin: 4px 0 8px; padding-left: 20px; } .ip-badfiles li { overflow-wrap: anywhere; }
.ip-fmthelp { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .ip-fmthelp > div { border: 1px solid #e4e9e4; border-radius: 10px; padding: 8px 12px; background: #fbfcfb; } .ip-fmthelp h4 { margin: 0 0 4px; } .ip-fmthelp ol { margin: 0; padding-left: 20px; } .ip-fmthelp li { margin: 3px 0; }
a.ip-helpbtn.ip-getapp, .ip-hero a.ip-helpbtn.ip-getapp { background: #1f5a38; color: #ffd34d; border: 1px solid #1f5a38; font-weight: 700; }
.ip-seenby { font-size: 12.5px; color: #c9d3cc; margin: 2px 0 4px; }
.ip-hero > .ip-seenby, .pagehead > .ip-seenby { flex: 1 1 100%; order: 99; text-align: center; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
.pagehead > .ip-seenby { border-top-color: var(--line); } .ip-seenby b { color: #fff; font-weight: 600; } .ip-seenme { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #ffd34d; color: #3a2a00; font-weight: 700; font-size: 11.5px; }
.pagehead .ip-seenby { color: var(--muted); margin: 0; } .pagehead .ip-seenby b { color: var(--ink); }
.ip-allbar { display: flex; justify-content: flex-end; gap: 8px; margin: -2px 0 -4px; } .ip-allbar button { font-size: 14px; font-weight: 600; padding: 7px 14px; min-height: 40px; border-radius: 10px; color: #1f5a38; background: #fff; border: 1px solid #b9dcc4; }
.ip-card.ip-min > :not(.ip-ch) { display: none; } .ip-card.ip-min > .ip-ch { border-bottom: 0; } .ip-card.ip-min .ip-mintw { transform: none; }
details.ip-card > summary { list-style: none; cursor: pointer; } details.ip-card > summary::-webkit-details-marker { display: none; }
details.ip-card.done > summary { border-bottom: 0; } details.ip-card.done[open] > summary { border-bottom: 1px solid #e4e9e4; }
.ip-doneline { color: #2f6b3a; font-size: 13px; } .ip-more { margin-left: auto; color: var(--muted); font-size: 12px; } details[open] > summary .ip-more { visibility: hidden; }
.ip-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #dfe5df; background: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; white-space: nowrap; color: #333; }
.ip-pill.p-ok { background: #e6f2e8; border-color: #a9d3b2; color: #1f6b3a; } .ip-pill.p-warn { background: #fff4d9; border-color: #f2c25c; color: #7a5600; }
.ip-pill.p-date { background: #eef4fa; border-color: #bcd3e8; color: #24557f; } .ip-pill.p-today { background: #1f6b3a; color: #fff; border-color: #1f6b3a; }
.ip-pill.p-bad { background: #fdeceb; border-color: #eea59d; color: #9b2c1f; }
/* phase colours */
.ph-ss .ip-ch, .ip-ch.ph-ss { border-left-color: #2f6f9f; background: #edf4fa; } .ph-in .ip-ch { border-left-color: #3f7a4a; background: #edf6ef; }
.ph-insp .ip-ch { border-left-color: #b07d12; background: #fcf4e2; } .ph-roof .ip-ch { border-left-color: #8a4b2a; background: #f8eee8; } .ph-docs .ip-ch { border-left-color: #6a4c93; background: #f3eef9; }
.ph-photos .ip-ch { border-left-color: #1f7a7a; background: #e8f4f4; } .ph-notes .ip-ch { border-left-color: #8a6d1f; background: #faf5e4; }
.ph-svc .ip-ch, .ip-ch.ph-svc { border-left-color: #b3261e; background: #fbeeec; } .ph-pay .ip-ch { border-left-color: #1f6b3a; background: #eef6f0; }
.ph-need .ip-ch { border-left-color: #c7801a; background: #fff6e3; } .ph-status .ip-ch { border-left-color: #1f2b23; background: #eef2ef; }
.ip-nextstep { display: flex; gap: 10px; align-items: baseline; background: #fffbea; border: 1px solid #f1df9f; border-radius: 10px; padding: 8px 12px; font-size: 14.5px; }
.ip-nextstep > span:first-child { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a6d1f; flex: none; }
.ip-btn { font-size: 15px; padding: 9px 14px; border-radius: 10px; }
.ip-trades { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ip-blk:empty { display: none; } .ip-blk { border-top: 1px dashed #e4e9e4; padding-top: 8px; } .ip-blk .trade { padding: 4px 0; }
.ip-note { background: #f6f8f6; border-radius: 8px; padding: 7px 10px; font-size: 13.5px; color: #445; }
/* summary card */
.ip-sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; padding: 12px 16px 6px; }
.ip-sumgrid dl { margin: 0; display: grid; gap: 6px; align-content: start; }
.ip-sumgrid dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; border-left: 2px solid #e4e9e4; padding-left: 8px; }
.ip-sumgrid dt { font-size: 12px; color: #667; padding-top: 2px; } .ip-sumgrid dd { margin: 0; overflow-wrap: anywhere; font-size: 14.5px; } .ip-sumgrid dd .ip-pill { margin: 0 4px 3px 0; }
.ip-big { font-size: 17px; letter-spacing: .04em; }
#icheck:empty { display: none; }
.ip-checkin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 16px 12px; border-top: 1px solid #eef1ee; } .ip-checkin button.done { opacity: .6; }
/* job list */
.ip-search input { width: 100%; font-size: 16px; padding: 10px 14px; border-radius: 12px; }
.pk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pk-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; } .ip, .ip > * { min-width: 0; }
.pk-tab { border: 1px solid #dfe5df; background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 700; color: #445; cursor: pointer; font-size: 13.5px; }
.pk-tab span { background: #ece7d6; border-radius: 999px; padding: 0 7px; font-size: 11.5px; margin-left: 3px; color: #333; }
.pk-tab.on { background: #1f2b23; color: #fff; border-color: #1f2b23; } .pk-tab.on span { background: #e8b84a; color: #1f2b23; }
.pk-tab.warn:not(.on) span { background: #f2c25c; } .pk-tab.bad:not(.on) span { background: #eea59d; } .pk-tab.amber:not(.on) span { background: #f2c25c; }
.pk-sort { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); } .pk-sort select { width: auto; }
.ip-list { display: grid; gap: 8px; }
.ip-job { display: flex; gap: 12px; align-items: stretch; background: #fff; border: 1px solid #dfe5df; border-left: 6px solid #9aa79f; border-radius: 12px; padding: 10px 14px; color: inherit !important; text-decoration: none; }
.ip-job:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.ip-jmain { flex: 1; min-width: 0; display: grid; gap: 3px; } .ip-jname b { font-size: 16px; } .ip-jaddr { color: #556; font-size: 13.5px; }
.ip-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.ip-acts { font-size: 13px; color: #7a5600; background: #fff7e0; border-radius: 8px; padding: 4px 8px; margin-top: 3px; }
.ip-jside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.ip-stage { border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: #eef1ef; color: #445; }
.ip-next { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 14px; color: #24557f; } .ip-next small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.ip-next.today { color: #1f6b3a; } .ip-next.past { color: #778; } .ip-next.none { color: #99a; font-weight: 500; font-size: 12.5px; }
.ip-empty { padding: 24px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed #dfe5df; border-radius: 12px; }
.ip-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #e4e9e4; color: inherit !important; text-decoration: none; flex-wrap: wrap; }
/* bucket colours (list stripe + stage chip) */
.ip-job.b-ss { border-left-color: #2f6f9f; } .ip-stage.b-ss { background: #e3eef8; color: #24557f; }
.ip-job.b-sched { border-left-color: #1f7a7a; } .ip-stage.b-sched { background: #dff1f1; color: #145c5c; }
.ip-job.b-prog { border-left-color: #3f7a4a; } .ip-stage.b-prog { background: #e2f1e5; color: #1f6b3a; }
.ip-job.b-insp { border-left-color: #b07d12; } .ip-stage.b-insp { background: #fbefd3; color: #7a5600; }
.ip-job.b-done { border-left-color: #1f2b23; } .ip-stage.b-done { background: #1f6b3a; color: #fff; }
.ip-job.b-cxl { border-left-color: #9aa0a6; opacity: .8; } .ip-stage.b-cxl { background: #e3e5e8; color: #555; }
.ip-hero .ip-stage { font-size: 14px; padding: 5px 14px; }
/* photos */
.ip-req { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .ip-req > b { width: 100%; color: #445; }
.ip-reqi { display: inline-flex; gap: 5px; align-items: center; border-radius: 10px; padding: 6px 10px; border: 1px solid #a9d3b2; background: #eef7f0; font-size: 13.5px; cursor: pointer; color: #1f4d2c; }
.ip-reqi.miss { border-color: #f2c25c; background: #fff4d9; color: #7a5600; font-weight: 600; } .ip-reqi span { font-size: 11.5px; opacity: .85; } .ip-reqi i { font-style: normal; font-weight: 800; margin-left: 2px; }
.ip-add { background: #e8b84a; border-color: #e8b84a; color: #1f2b23; font-weight: 800; border-radius: 10px; padding: 7px 12px; }
.ip-fphase { display: grid; gap: 4px; } .ip-fph { font-weight: 800; font-size: 13px; letter-spacing: .03em; color: #445; margin-top: 2px; }
details.ip-fphase > summary.ip-fph { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none; padding: 6px 0; min-height: 36px; }
details.ip-fphase > summary.ip-fph::-webkit-details-marker { display: none; }
.ip-ftw { display: inline-block; width: 12px; font-size: 11px; color: #667; transition: transform .15s; } details.ip-fphase[open] > summary .ip-ftw { transform: rotate(90deg); }
details.ip-fphase[open] > .ip-fgrid { margin-bottom: 6px; }
.ip-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; } .ip-folder.has[open] { grid-column: 1 / -1; }
.ip-reqi.later, .ip-folder.later { border-style: dashed; } .ip-reqi.later { background: #fff; border-color: #c9d3cc; color: #667; }
.ip-folder { border: 1px solid #e4e9e4; border-radius: 10px; background: #fbfcfb; } .ip-folder.miss { border-color: #f2c25c; background: #fffaeb; }
.ip-folder > summary { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; cursor: pointer; list-style: none; font-size: 14px; } .ip-folder > summary::-webkit-details-marker { display: none; }
.ip-folder > summary > span:first-child { flex: 1; } .ip-fn { font-size: 12px; background: #ece7d6; border-radius: 999px; padding: 0 8px; } .ip-folder.miss .ip-fn { background: #f2c25c; }
.ip-plus { width: 34px; height: 30px; padding: 0; border-radius: 8px; font-size: 18px; font-weight: 800; background: #fff; }
.pfthumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; padding: 0 8px 8px; }
.pfthumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; background: #eef1ee; }
.pffile { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid #e4e9e4; border-radius: 8px; font-size: 22px; text-decoration: none; overflow: hidden; }
.pffile span { font-size: 10.5px; padding: 0 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; color: #445; }
.ip-pickbox { max-width: 640px; } .ip-pick { margin-bottom: 10px; } .ip-pick > b { display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #445; }
.ip-pick > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ip-pickb { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 84px; justify-content: center; border-radius: 12px; border: 2px solid #dfe5df; background: #fff; font-size: 26px; cursor: pointer; }
.ip-pickb span { font-size: 14px; font-weight: 700; color: #1f2b23; text-align: center; } .ip-pickb small { font-size: 11px; color: var(--muted); }
.ip-pickb.miss { border-color: #f2c25c; background: #fff8e6; } .ip-pickb.miss small { color: #7a5600; font-weight: 700; }
.ph-ss.ip-pick > b { color: #24557f; } .ph-in.ip-pick > b { color: #1f6b3a; } .ph-insp.ip-pick > b { color: #7a5600; } .ph-roof.ip-pick > b { color: #8a4b2a; }
/* documents & notes */
.ip-docg { display: grid; gap: 3px; } .ip-docg > b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #6a4c93; }
.ip-doc { display: block; padding: 6px 10px; border: 1px solid #e4e9e4; border-radius: 8px; text-decoration: none; overflow-wrap: anywhere; }
.ip-feed { display: grid; gap: 6px; max-height: 420px; overflow: auto; } .ip-msg { background: #f6f8f6; border-radius: 10px; padding: 7px 10px; font-size: 14px; margin-right: 40px; }
.ip-msg.mine { background: #fffbea; margin: 0 0 0 40px; } .ip-msg .when { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.ip-ticket { border-bottom: 1px dashed #e4e9e4; padding-bottom: 8px; }
/* project Files tab: photo folders */
.pfbar { display: grid; gap: 6px; margin: 8px 0; } .pfphase { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .pfphase > b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; min-width: 92px; }
.pfphase.ph-ss > b { color: #24557f; } .pfphase.ph-in > b { color: #1f6b3a; } .pfphase.ph-insp > b { color: #7a5600; } .pfphase.ph-roof > b { color: #8a4b2a; } .pfphase.ph-other > b { color: #667; }
.pfchip { display: inline-flex; gap: 5px; align-items: center; border: 1px solid #dfe5df; background: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; cursor: pointer; }
.pfchip span { background: #ece7d6; border-radius: 999px; padding: 0 6px; font-size: 11px; } .pfchip.on { background: #1f2b23; color: #fff; border-color: #1f2b23; } .pfchip.on span { background: #e8b84a; color: #1f2b23; }
.pfchip.miss { border-color: #f2c25c; background: #fff4d9; } .pfchip.need { border-color: #f2c25c; } .pfchip.need i { font-style: normal; font-size: 10.5px; color: #7a5600; } .pfadmin { display: grid; gap: 6px; }
.panel .pfthumbs { padding: 0 0 8px; }
@media (max-width: 760px) {
  .ip-sumgrid { grid-template-columns: 1fr; gap: 6px; } .ip-sumgrid dl > div { grid-template-columns: 96px minmax(0, 1fr); }
  .ip-job { flex-direction: column; } .ip-jside { flex-direction: row; align-items: center; justify-content: space-between; } .ip-next { align-items: flex-start; }
  .pk-bar { flex-direction: column; align-items: stretch; } .pk-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; max-width: 100%; } .pk-tab { flex: none; } .pk-sort { justify-content: flex-end; }
  .ip-hero { padding: 12px 14px; } .ip-hero h1 { font-size: 20px; }
}
/* Dealer portal */
.dp-new { background: #e8b84a; color: #1f2b23 !important; font-weight: 800; border-radius: 10px; padding: 9px 14px; text-decoration: none; }
.dp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dp-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: #fff; border: 1px solid #dfe5df; border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.04); font: inherit; cursor: pointer; }
div.dp-kpi { cursor: default; } .dp-kpi > span { font-size: 12px; color: #667; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .dp-kpi b { font-size: 28px; color: #1f2b23; line-height: 1.1; } .dp-kpi small { color: #778; font-size: 12px; }
.dp-kpi.warn { border-color: #f2c25c; background: #fffaeb; } .dp-kpi.warn b { color: #9a6400; } .dp-kpi.money { background: #1f2b23; border-color: #1f2b23; } .dp-kpi.money span, .dp-kpi.money small { color: #c9d3cc; } .dp-kpi.money b { color: #e8b84a; }
.dp-flag { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-radius: 10px; padding: 6px 12px; margin-bottom: 4px; }
.dp-flag b { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .dp-flag span { font-size: 13.5px; font-weight: 600; }
.dp-flag.big { padding: 12px 18px; border-radius: 14px; } .dp-flag.big b { font-size: 22px; } .dp-flag.big span { font-size: 15px; }
.dp-flag.fl-hold { background: #fff1cc; color: #7a5200; border: 2px solid #f0b429; } .dp-flag.fl-jeop { background: #c62828; color: #fff; border: 2px solid #c62828; } .dp-flag.fl-cxl { background: #e3e5e8; color: #3c4043; border: 2px solid #9aa0a6; }
.ip-job.fl-hold { border-left-color: #f0b429; } .ip-job.fl-jeop { border-left-color: #c62828; } .ip-job.fl-cxl { border-left-color: #9aa0a6; opacity: .85; }
.ip-job.t-installed { border-left-color: #3f7a4a; } .ip-job.t-pto { border-left-color: #1f2b23; } .ip-job.t-active { border-left-color: #2f6f9f; }
.ip-stage.fl-hold { background: #f0b429; color: #3d2a00; } .ip-stage.fl-jeop { background: #c62828; color: #fff; } .ip-stage.fl-cxl { background: #9aa0a6; color: #fff; }
.dp-status { font-size: 14px; display: flex; gap: 4px 10px; flex-wrap: wrap; } .dp-status span { color: #556; }
.dp-mini { display: flex; align-items: center; gap: 3px; } .dp-mini i { width: 14px; height: 6px; border-radius: 3px; background: #dfe5df; } .dp-mini i.done { background: #8fbf99; } .dp-mini i.now { background: #1f6b3a; width: 22px; }
.dp-mini.flagged i.now { background: #c7801a; } .dp-mini span { font-size: 11.5px; color: #556; margin-left: 4px; font-weight: 700; }
.dp-money { display: flex; flex-direction: column; align-items: flex-end; } .dp-money b { font-size: 15px; color: #1f6b3a; } .dp-money small { font-size: 11.5px; color: var(--muted); }
.dp-bar.flagged div.now { background: #c7801a; } .dp-bar.flagged.fl-jeop div.now { background: #c62828; }
.dp-now { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .dp-now b { font-size: 18px; }
.dp-need { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid #f1df9f; background: #fffbea; border-radius: 10px; padding: 8px 12px; font-size: 14.5px; }
.ph-need.done .ip-ch { background: #eef6f0; border-left-color: #3f7a4a; color: #1f6b3a; border-bottom: 0; }
.dp-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-finbig { border: 1px solid #dfe5df; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; } .dp-finbig span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #667; font-weight: 700; }
.dp-finbig b { font-size: 26px; color: #1f2b23; } .dp-finbig small { color: #667; } .dp-finbig.com { background: #1f2b23; border-color: #1f2b23; } .dp-finbig.com span, .dp-finbig.com small { color: #c9d3cc; } .dp-finbig.com b { color: #e8b84a; }
.dp-split { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #eef1ee; } .dp-split i { min-width: 3px; }
.s-epc { background: #6b8f78; } .s-fee { background: #c9a227; } .s-com { background: #1f6b3a; }
.dp-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 13.5px; } .dp-legend div { display: flex; gap: 6px; align-items: center; } .dp-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .dp-legend small { color: var(--muted); }
.dp-mss { display: flex; align-items: stretch; gap: 0; } .dp-msline { flex: 0 0 18px; align-self: center; height: 3px; background: #dfe5df; }
.dp-ms { flex: 1; display: grid; gap: 2px; justify-items: start; border: 1px solid #dfe5df; border-radius: 12px; padding: 10px 12px; background: #fff; }
.dp-ms b { font-size: 14px; } .dp-ms > span { font-size: 18px; font-weight: 800; color: #1f2b23; } .dp-ms small { color: #667; font-size: 12px; }
.dp-msdot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: #eef1ee; color: #556; }
.dp-ms.ms-paid { background: #eef7f0; border-color: #a9d3b2; } .dp-ms.ms-paid .dp-msdot { background: #1f6b3a; color: #fff; }
.dp-ms.ms-approved { background: #fffaeb; border-color: #f2c25c; } .dp-ms.ms-approved .dp-msdot { background: #e8b84a; color: #1f2b23; } .dp-ms.ms-not_yet { opacity: .75; } .dp-ms.ms-due { background: #eef4fa; border-color: #bcd3e8; } .dp-ms.ms-due .dp-msdot { background: #2f6f9f; color: #fff; }
.dp-sow summary { cursor: pointer; font-weight: 700; color: #1f6b3a; } .dp-sow table { margin-top: 6px; } .dp-tot td { font-weight: 800; border-top: 2px solid #dfe5df; }
.dp-other { display: flex; gap: 6px; flex-wrap: wrap; } .p-exp { border-style: dashed; }
details.ip-card.ph-other > summary { list-style: none; cursor: pointer; } .ph-other .ip-ch { border-left-color: #9aa79f; }
@media (max-width: 900px) { .dp-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .dp-fin { grid-template-columns: 1fr; } .dp-mss { flex-direction: column; } .dp-msline { flex: 0 0 10px; width: 3px; height: auto; margin-left: 24px; align-self: stretch; } .dp-flag.big b { font-size: 18px; } .dp-kpi b { font-size: 22px; } }

/* HOA: dates with countdown and Today / Yesterday, decision-due countdown, progress steps, documents, timeline */
.sdate { display: flex; flex-direction: column; gap: 3px; }
.sdmeta { font-size: 12px; color: var(--muted); font-weight: 400; }
.sdmeta:empty { display: none; }
.sdq { display: flex; gap: 4px; }
.sdq[hidden] { display: none; }
.sdq button { padding: 1px 8px; font-size: 12px; font-weight: 600; }
.sdue { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; font-weight: 400; }
.sdue > span { color: var(--muted); font-size: 13px; }
.sdue.late b, .sdue.late > span { color: var(--bad); font-weight: 700; }
.hoasteps { display: flex; gap: 6px; margin: 8px 0 2px 22px; flex-wrap: wrap; }
.hstep { flex: 1; min-width: 120px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 13px; display: flex; flex-direction: column; font-weight: 400; }
.hstep b { font-weight: 700; }
.hstep small { color: var(--muted); font-size: 12px; }
.hstep.done { background: #e8f6ec; border-color: #a8d8b5; color: #1d4d2c; }
.hstep.cur { background: #fff8e6; border-color: #f0d58a; color: #5a4300; }
.hstep.bad { background: #fde7e5; border-color: #f3b4ad; color: var(--bad); }
.hoadocs { display: flex; flex-direction: column; gap: 4px; }
.hoadoc { display: grid; grid-template-columns: 250px 190px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 400; font-size: 14px; }
.hoadoc > label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.hoadoc > label input { width: auto; margin: 0; }
.hoadocc { display: flex; gap: 4px; flex-wrap: wrap; }
.hoadocf { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; min-width: 0; }
label.btn.hoaup { display: inline-block; width: auto; margin: 0; white-space: nowrap; font-weight: 600; }
@media (max-width: 760px) { .hoadoc { grid-template-columns: 1fr auto; } .hoadocc, .hoadocf { grid-column: 1 / -1; } }
.hoatl > div { padding: 2px 0; }
.hoatli { display: inline-block; width: 22px; }
.hoaup { margin-top: 8px; display: inline-block; cursor: pointer; font-size: 13px; padding: 4px 10px; }
.hoaprow { padding: 6px 0; border-bottom: 1px solid var(--line); gap: 10px; }
/* Portal job pages: contact line in the black band, action strip under the name, summary tiles across the full width */
.ip-hero h1 small { font-size: 13px; font-weight: 500; color: #c9d3cc; margin-left: 6px; }
.ip-hcontact { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 6px; }
.ip-hlink { color: #fff !important; text-decoration: none; font-size: 15px; font-weight: 600; border-bottom: 1px dotted rgba(255,255,255,.45); }
.ip-hlink:hover { color: #e8b84a !important; border-bottom-color: #e8b84a; } a.ip-call.ip-hlink { color: #e8b84a !important; }
.ip-strip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid #dfe5df; border-radius: 14px; padding: 8px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.ip-strip:empty { display: none; } .ip-strip .ip-checkin { padding: 0; border: 0; width: 100%; }
.ip-strip button, .ip-strip .btn { border-radius: 10px; padding: 8px 12px; font-weight: 700; }
.ip-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 2px 0; padding: 4px 6px; }
.ip-fact { margin: 0; padding: 5px 10px; border-left: 2px solid #e4e9e4; min-width: 0; } .ip-fact.wide { grid-column: span 2; }
.ip-fact dt { font-size: 11.5px; color: #667; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .ip-fact dd { margin: 1px 0 0; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.ip-today { background: #1f6b3a; color: #fff; border-radius: 6px; padding: 0 6px; font-weight: 700; } .dp-planned { color: #24557f; } .dp-planned small { color: var(--muted); }
@media (max-width: 760px) { .ip-facts { grid-template-columns: 1fr 1fr; } .ip-fact.wide { grid-column: 1 / -1; } .ip-strip button, .ip-strip .btn { flex: 1 1 auto; } }
/* Weekly Pipeline (dealer commission board) */
.wp { max-width: none; } .wp-hbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wp-hbtns button, .wp-hbtns .btn { border-radius: 10px; font-weight: 700; background: #fff; color: #1f2b23 !important; border: 1px solid #fff; padding: 8px 12px; } .wp-hbtns button.on { background: #e8b84a; border-color: #e8b84a; color: #1f2b23; }
.wp-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .wp-tools .pk-bar { flex: 0 1 auto; }
.wp-since { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fffbea; border: 1px solid #f1df9f; border-radius: 10px; padding: 6px 12px; font-size: 13.5px; } .wp-since select { width: auto; }
.wp-scroll { overflow-x: scroll; overflow-y: auto; max-height: calc(100vh - 230px); border: 1px solid #dfe5df; border-radius: 0 0 12px 12px; background: #fff; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: auto; scrollbar-color: #9aa79f #eef1ee; }
.wp-scroll:focus { outline: 2px solid #e8b84a; outline-offset: -2px; } .wp-scroll.dragging { cursor: grabbing; user-select: none; }
.wp-scroll::-webkit-scrollbar, .wp-topbar::-webkit-scrollbar { height: 14px; width: 12px; } .wp-scroll::-webkit-scrollbar-track, .wp-topbar::-webkit-scrollbar-track { background: #eef1ee; }
.wp-scroll::-webkit-scrollbar-thumb, .wp-topbar::-webkit-scrollbar-thumb { background: #9aa79f; border-radius: 8px; border: 3px solid #eef1ee; } .wp-scroll::-webkit-scrollbar-thumb:hover, .wp-topbar::-webkit-scrollbar-thumb:hover { background: #6d7c72; }
.wp-topbar { overflow-x: scroll; overflow-y: hidden; height: 16px; border: 1px solid #dfe5df; border-bottom: 0; border-radius: 12px 12px 0 0; background: #f6f8f6; scrollbar-color: #9aa79f #eef1ee; } .wp-topbar > div { height: 1px; }
.wp-topbar[hidden] + .wp-scroll { border-radius: 12px; }
.wp-colbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .wp-colbar > b { font-size: 13px; color: #445; }
.wp-gchip { border: 1px solid #cfd8d1; background: #fff; border-radius: 999px; padding: 3px 11px; font-weight: 700; font-size: 13px; color: #778; cursor: pointer; } .wp-gchip span { font-size: 11px; opacity: .7; }
.wp-gchip.on { color: #1f2b23; border-width: 2px; } .wp-gchip.on.g-job { border-color: #2f6f9f; background: #edf4fa; } .wp-gchip.on.g-finance { border-color: #1f6b3a; background: #eef6f0; } .wp-gchip.on.g-m1 { border-color: #b07d12; background: #fcf4e2; }
.wp-gchip.on.g-m2 { border-color: #c7801a; background: #fff6e3; } .wp-gchip.on.g-pay { border-color: #2d6a2d; background: #eaf5ea; } .wp-gchip.on.g-miles { border-color: #1f7a7a; background: #e8f4f4; } .wp-gchip.on.g-comments { border-color: #6a4c93; background: #f3eef9; }
.wp-gall { font-size: 12.5px; padding: 3px 10px; } .wp-scrollbtns { display: inline-flex; gap: 4px; } .wp-scrollbtns button { font-size: 16px; padding: 3px 14px; font-weight: 800; } .wp-hint { flex-basis: 100%; text-align: right; }
.wp-table { border-collapse: separate; border-spacing: 0; font-size: 13px; width: max-content; min-width: 100%; }
.wp-table th { position: sticky; top: 0; z-index: 4; background: #1f2b23; color: #fff; font-weight: 700; padding: 7px 8px; text-align: left; white-space: nowrap; cursor: pointer; user-select: none; border-right: 1px solid #34443a; }
.wp-table th.on { background: #2f4a38; color: #e8b84a; } .wp-table th.num, .wp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.wp-table td { padding: 5px 8px; border-bottom: 1px solid #eef1ee; border-right: 1px solid #f3f5f3; vertical-align: top; white-space: nowrap; }
.wp-table tbody tr:hover td { background: #f6faf7; } .wp-table td.wp-name { white-space: normal; min-width: 150px; }
.wp-table tfoot td { position: sticky; bottom: 0; background: #eef2ef; border-top: 2px solid #1f2b23; padding: 7px 8px; white-space: nowrap; }
.wp-table td.wp-hl { background: #fff3c4 !important; } .wp-new td:first-child { box-shadow: inset 4px 0 #1f6b3a; }
.wp-newchip { background: #1f6b3a; color: #fff; border-radius: 4px; font-size: 10.5px; font-weight: 800; padding: 0 5px; }
tr.wp-fl-on_hold td { background: #fff8e1; } tr.wp-fl-on_hold td:first-child { box-shadow: inset 6px 0 #f0b429; }
tr.wp-fl-job_in_jeopardy td { background: #fdecea; } tr.wp-fl-job_in_jeopardy td:first-child { box-shadow: inset 6px 0 #c62828; }
.wp-stage { display: inline-block; border-radius: 999px; padding: 1px 9px; font-weight: 700; background: #eef1ee; color: #334; white-space: nowrap; }
.wp-stage.st-hold { background: #f0b429; color: #3d2a00; font-weight: 900; text-transform: uppercase; padding: 2px 10px; }
.wp-stage.st-risk { background: #c62828; color: #fff; font-weight: 900; text-transform: uppercase; padding: 2px 10px; }
.wp-stage.st-done { background: #1f6b3a; color: #fff; } .wp-stage.st-cxl { background: #9aa0a6; color: #fff; } .wp-stage.st-pto { background: #dff1f1; color: #145c5c; }
.wp-stage.st-inst { background: #e2f1e5; color: #1f6b3a; } .wp-stage.st-cx { background: #fff4d9; color: #7a5600; }
.wp-com { min-width: 230px; max-width: 300px; white-space: normal !important; }
.wp-combtn { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.wp-combtn:hover { color: #1f6b3a; } .wp-cd { font-weight: 800; color: #24557f; margin-right: 3px; } .wp-more { display: block; font-size: 11px; color: var(--muted); }
.wp-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; } .wp-cgrid h3 { margin: 0 0 6px; font-size: 14px; }
.wp-ch { border-left: 3px solid #e4e9e4; padding: 4px 8px; margin-bottom: 6px; font-size: 14px; } .wp-cadd { border-top: 1px solid #e4e9e4; padding-top: 10px; display: grid; gap: 6px; }
.wp-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 16px; } .wp-h span { background: #ece7d6; border-radius: 999px; padding: 0 9px; font-size: 13px; }
.wp-rest > summary { list-style: none; cursor: pointer; } .wp-rest > summary::-webkit-details-marker { display: none; }
.wp-mcard { background: #fff; border: 1px solid #dfe5df; border-left: 6px solid #9aa79f; border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; display: grid; gap: 6px; }
.wp-mcard.wp-fl-on_hold { border-left-color: #f0b429; background: #fffaeb; } .wp-mcard.wp-fl-job_in_jeopardy { border-left-color: #c62828; background: #fdf1f0; }
.wp-mhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .wp-mhead b { font-size: 15px; }
.wp-att { color: #7a5600; font-size: 13.5px; font-weight: 600; } .wp-chg { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: #24557f; font-weight: 600; }
.wp-mcoms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wp-mcoms .wp-combtn { border: 1px solid #eef1ee; border-radius: 8px; padding: 6px 8px; -webkit-line-clamp: 2; }
.wp-meet textarea { width: 100%; } tr.pi-un td { background: #fff8e6; }
@media (max-width: 760px) { .wp-cgrid, .wp-mcoms { grid-template-columns: 1fr; } .wp-scroll { max-height: none; } }
.wp-table td.wp-stick { position: sticky; z-index: 1; background: #fff; } .wp-table th.wp-stick { position: sticky; z-index: 3; } .wp-table tfoot td.wp-stick { background: #eef2ef; z-index: 2; }
tr.wp-fl-on_hold td.wp-stick { background: #fff8e1; } tr.wp-fl-job_in_jeopardy td.wp-stick { background: #fdecea; } .wp-table td.wp-stick.wp-hl { background: #fff3c4 !important; }
.wp-table .wp-stick-last { box-shadow: 3px 0 0 #c9d3cc; }
.wp-table th.wp-stick { z-index: 6 !important; }
.wp-table .wp-grow th { padding: 3px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-align: center; cursor: default; border-bottom: 1px solid #34443a; }
.wp-table .wp-grow th.g-job { background: #24557f; } .wp-table .wp-grow th.g-finance { background: #1f6b3a; } .wp-table .wp-grow th.g-m1 { background: #8a6200; } .wp-table .wp-grow th.g-m2 { background: #a5620f; }
.wp-table .wp-grow th.g-pay { background: #2d6a2d; } .wp-table .wp-grow th.g-miles { background: #145c5c; } .wp-table .wp-grow th.g-comments { background: #533a78; }
.wp-table .wp-grow th.wp-stick { text-align: left; }
.wp-nl { font-weight: 800; color: #1f2b23 !important; text-decoration: none; border-bottom: 1px dotted #9aa79f; } .wp-nl:hover { color: #24557f !important; border-bottom-color: #24557f; }
.wp-table td.wp-hasnote { position: relative; } .wp-table td.wp-hasnote::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent #e8a33d transparent transparent; }
.wp-note { border: 0; background: none; padding: 0 2px; color: #b07d12; font-size: 12px; cursor: pointer; }
.wp-combtn.hist { border-left: 3px solid #b39ddb; padding-left: 6px; } .wp-ch.same { opacity: .6; }
/* Comment history: one panel, at most 60% of the screen, with its own scroll bar (newest at the top); the page never grows */
.wp-histwrap { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #e4e9e4; border-radius: 10px; padding: 0 10px 8px; margin: 10px 0; background: #fff; }
.wp-histwrap .wp-cgrid { margin: 0; align-items: start; } .wp-histwrap h3 { position: sticky; top: 0; z-index: 1; background: #fff; padding: 8px 0 6px; margin: 0; border-bottom: 1px solid #eef1ee; }
.wp-histwrap > .wp-ch:first-child { margin-top: 8px; } .wp-histwrap .wp-othernotes summary { position: sticky; top: 0; background: #fff; padding: 6px 0; }
.wp-ch { overflow-wrap: anywhere; }
/* Comment cells: latest entry clamped (3 lines in the table, 2 in meeting mode), then "more" / "N earlier" */
.wp-cell { display: grid; gap: 1px; min-width: 0; } .wp-cell .wp-combtn { max-height: calc(1.4em * 3); line-height: 1.4; overflow-wrap: anywhere; }
.wp-cmore { justify-self: start; border: 0; background: none; padding: 0; font-size: 11.5px; font-weight: 700; color: #5b3f8c; cursor: pointer; } .wp-cmore:hover { text-decoration: underline; }
.wp-mcoms .wp-cell { border: 1px solid #eef1ee; border-radius: 8px; padding: 6px 8px; } .wp-mcoms .wp-cell .wp-combtn { border: 0; padding: 0; -webkit-line-clamp: 2; max-height: calc(1.4em * 2); }
.wp-side { font-size: 11px; color: #556; } .pi-coms { max-height: 40vh; overflow: auto; }
.wp-othernotes { margin-top: 10px; } .wp-othernotes summary { cursor: pointer; font-weight: 700; }
.wp-yes { color: #1f6b3a; }
.ip-reqi.open { background: #fff; border-color: #c9d3cc; color: #445; }
/* ───────── Homeowner portal (same look as the installer & dealer portals; phone first) ───────── */
.ho-hero { align-items: flex-start; } .ho-hero h1 small { font-size: 13px; font-weight: 500; color: #c9d3cc; margin-left: 6px; }
.ho-pm { display: flex; flex-direction: column; gap: 2px; flex: none !important; min-width: 0 !important; background: rgba(255,255,255,.07); border-radius: 10px; padding: 8px 12px; }
.ho-pm > span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #c9d3cc; } .ho-pm b { font-size: 16px; color: #fff; }
.ho-switch { margin-top: 8px; width: auto; max-width: 100%; font-size: 14px; }
.ho-flag { display: grid; gap: 4px; background: #fff6df; border: 2px solid #f0b429; color: #6b4a00; border-radius: 14px; padding: 12px 16px; }
.ho-flag b { font-size: 18px; font-weight: 900; } .ho-flag span { font-size: 15px; line-height: 1.4; }
.ho-track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 14px 10px 12px; }
.ho-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 0 3px; }
.ho-step::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 4px; background: #e4e9e4; z-index: 0; }
.ho-step:first-child::before { display: none; } .ho-step.done::before, .ho-step.now::before { background: #3f7a4a; }
.ho-step i { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; background: #fff; border: 3px solid #d3dad4; color: #889; }
.ho-step.done i { background: #3f7a4a; border-color: #3f7a4a; color: #fff; } .ho-step.now i { background: #e8b84a; border-color: #1f2b23; color: #1f2b23; box-shadow: 0 0 0 4px rgba(232,184,74,.3); }
.ho-step.paused i { background: #fff1cc; border-color: #f0b429; color: #7a5200; }
.ho-step b { font-size: 12.5px; line-height: 1.2; color: #1f2b23; } .ho-step.todo b { color: #778; font-weight: 600; } .ho-step small { font-size: 11.5px; color: #667; line-height: 1.2; }
.ho-step.now b { font-size: 13.5px; font-weight: 900; } .ho-step.now small { color: #7a5600; font-weight: 700; }
.ho-next { font-size: 17px; font-weight: 700; line-height: 1.35; color: #1f2b23; }
.ho-nextmeta { display: flex; gap: 18px; flex-wrap: wrap; } .ho-nextmeta span { display: flex; flex-direction: column; font-weight: 700; font-size: 14.5px; }
.ho-nextmeta small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #667; font-weight: 700; }
.ho-wifi { display: flex; gap: 6px; flex-wrap: wrap; } .ho-wifi input { width: 160px; }
.ho-appt { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid #e4e9e4; border-left: 5px solid #2f6f9f; border-radius: 10px; padding: 8px 12px; }
.ho-appt.today { border-left-color: #1f6b3a; background: #f1f8f2; } .ho-appt.done { border-left-color: #c9d3cc; opacity: .75; }
.ho-adate, .ho-alabel { display: flex; flex-direction: column; } .ho-adate b { font-size: 15px; color: #24557f; } .ho-appt.today .ho-adate b { color: #1f6b3a; }
.ho-adate small, .ho-alabel small { font-size: 12px; color: #667; } .ho-alabel b { font-size: 15px; }
.ho-abtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ho-abtns button { font-size: 13px; padding: 6px 10px; }
.ho-ready { display: grid; gap: 4px; } .ho-ready > b { font-size: 14px; color: #6b5413; }
.ho-tick { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border: 1px solid #ece3c4; border-radius: 10px; background: #fffdf5; font-size: 14.5px; cursor: pointer; }
.ho-tick input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; } .ho-tick:has(input:checked) span { text-decoration: line-through; color: #889; }
.ip-facts.ho-facts { border: 0; box-shadow: none; padding: 0; }
.ho-subh { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #556; border-top: 1px dashed #e4e9e4; padding-top: 8px; }
.ip-cb > .ho-subh:first-child { border-top: 0; padding-top: 0; }
.ho-docg { display: grid; gap: 4px; } .ho-doct { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6a4c93; }
.ho-doc { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid #e4e9e4; border-radius: 10px; text-decoration: none; color: inherit !important; background: #fff; }
.ho-doc:hover { background: #f6f3fb; } .ho-doc span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .ho-doc small { color: #778; font-size: 12px; white-space: nowrap; }
.ho-doc b { font-size: 13px; color: #6a4c93; white-space: nowrap; }
.ho-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.ho-payrow { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: #f3f8f4; font-size: 14.5px; } .ho-payrow.next { background: #fffbea; border: 1px solid #f1df9f; }
.ho-warr { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e4e9e4; }
.ho-warr > div { display: flex; flex-direction: column; } .ho-warr > div:last-child { text-align: right; align-items: flex-end; } .ho-warr small { font-size: 12px; color: #667; }
.ho-warr > div:last-child > span { font-weight: 800; color: #7a5600; }
.ho-ticket { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px dashed #e4e9e4; padding-bottom: 6px; } .ho-ticket small { width: 100%; color: #667; }
.ho-faq { border: 1px solid #e4e9e4; border-radius: 10px; padding: 8px 12px; } .ho-faq summary { cursor: pointer; font-weight: 700; } .ho-faq p { margin: 6px 0 0; color: #445; line-height: 1.45; }
@media (max-width: 760px) {
  .ho-pm { width: 100%; } .ho-hero h1 small { display: block; margin: 2px 0 0; }
  .ho-track { grid-template-columns: 1fr; padding: 10px 14px; gap: 0; }
  .ho-step { flex-direction: row; text-align: left; gap: 10px; padding: 5px 0 5px 0; flex-wrap: wrap; }
  .ho-step::before { top: -50%; left: 15px; width: 4px; height: 100%; }
  .ho-step i { width: 32px; height: 32px; flex: none; } .ho-step b { font-size: 14.5px; flex: 1; } .ho-step.now b { font-size: 15.5px; } .ho-step small { font-size: 12.5px; }
  .ho-step.todo { padding: 3px 0; }
  .ho-appt { grid-template-columns: 1fr; gap: 4px; } .ho-abtns { justify-content: flex-start; }
  .ho-next { font-size: 16px; }
}
/* ───────── Intake sheets (Approval intake on a deal, PM intake on a project) ───────── */
.ik .ip-back { text-decoration: none; } .ik .ip-hero h1 small { font-size: 13px; font-weight: 500; color: #c9d3cc; margin-left: 6px; }
.ik-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .ik-col { display: grid; gap: 12px; }
.ik-row { display: grid; gap: 3px; min-width: 0; } .ik-row > span { font-size: 12px; color: #556; font-weight: 700; } .ik-row > span small { font-weight: 500; color: #889; }
.ik-row > div { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; } .ik-row input, .ik-row select, .ik-row textarea { width: 100%; min-width: 0; }
.ik-row > div > .ik-pills + input { width: 140px; flex: 1; }
.ik-row.need input { border-color: #e0574b; background: #fff5f4; } select.need { border: 2px solid #e0574b; background: #fff5f4; }
.ik-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } .ik-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.ik-pillgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.ik-subh { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #556; border-top: 1px dashed #e4e9e4; padding-top: 8px; }
.ik-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; } .ik-pills button { border: 1px solid #cfd8d1; background: #fff; border-radius: 999px; padding: 5px 13px; font-weight: 700; font-size: 13.5px; color: #445; cursor: pointer; }
.ik-pills button.on { background: #1f2b23; border-color: #1f2b23; color: #fff; } .ik-pills button:disabled { opacity: .6; cursor: default; }
.ik-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.ik-flag { border-radius: 10px; padding: 7px 12px; font-weight: 800; font-size: 14px; } .ik-flag.red { background: #c62828; color: #fff; } .ik-flag.amber { background: #fff1cc; color: #7a5200; border: 2px solid #f0b429; }
.ik-flag.ok { background: #e6f2e8; color: #1f6b3a; border: 2px solid #a9d3b2; }
.ik-dupes { font-size: 14px; background: #fff5f5; border: 1px solid #eea59d; border-radius: 10px; padding: 7px 12px; } .ik-dupes a { font-weight: 700; }
.ik-sugg { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; text-align: left; width: 100%; background: #eaf6ec; border: 1px dashed #5aa66b; border-radius: 10px; padding: 8px 12px; color: #1f4d2c; cursor: pointer; font: inherit; }
.ik-sugg b { color: #1f6b3a; } .ik-sugg span { font-size: 13.5px; } .ik-sugg small { color: #557; font-size: 11.5px; } .ik-sugg.in { cursor: default; margin-top: 4px; }
.ik-sbtn { display: inline-flex; gap: 4px; margin-left: auto; } .ik-sbtn button { padding: 4px 10px; }
.ik-ok { color: #1f6b3a; font-size: 13.5px; font-weight: 600; }
.ik-big { font-size: 18px; color: #1f2b23; } .ik-big.bad { color: #c62828; } .ik-row > div > small { color: #667; font-size: 12px; }
.ik-adders { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .ik-adders b { margin-left: 4px; }
.ik-doc { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; border-radius: 10px; padding: 7px 12px; border: 1px solid #e4e9e4; }
.ik-doc b { min-width: 140px; } .ik-doc.ok { background: #f3faf4; border-color: #a9d3b2; } .ik-doc.ok b { color: #1f6b3a; } .ik-doc.red { background: #fff5f4; border-color: #eea59d; } .ik-doc.red b { color: #c62828; }
.ik-doc.amber { background: #fffaeb; border-color: #f2c25c; } .ik-doc.amber b { color: #7a5200; } .ik-doc small { color: #778; } .ik-doc a { overflow-wrap: anywhere; }
.ik-decide .ip-cb { gap: 12px; } .ik-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ik-decline { color: #b42318; border-color: #eea59d; }
.ik-chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: #445; } .ik-chk input { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ik-warnline { color: #b42318; font-weight: 700; } .ik i.req { font-style: normal; color: #b42318; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ik-done { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #e6f2e8; border: 2px solid #a9d3b2; color: #1f4d2c; border-radius: 12px; padding: 10px 14px; font-size: 15px; font-weight: 600; }
.ik-conf { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px dashed #e4e9e4; }
.ik-conf:last-child { border-bottom: 0; } .ik-cl { font-size: 13px; font-weight: 700; color: #445; padding-top: 2px; } .ik-cv { display: grid; gap: 2px; min-width: 0; } .ik-cv > b { font-size: 15px; overflow-wrap: anywhere; }
.ik-cv small { font-size: 12px; color: #667; } .ik-okby { color: #1f6b3a !important; font-weight: 700; } .ik-chg { margin-top: 4px; } .ik-chg select, .ik-chg input { width: 100%; }
.ik-conf.ok .ik-cl::before { content: '✓ '; color: #1f6b3a; } .ik-conf.miss .ik-cv > b { color: #b07d12 !important; } .ik-conf.sugg { background: linear-gradient(90deg, #f3faf4, transparent); }
.ik-acts { display: flex; gap: 4px; } .ik-acts button { padding: 4px 10px; font-size: 13px; }
.ik-tick { background: #1f6b3a !important; color: #fff !important; border-color: #1f6b3a !important; font-weight: 900; min-width: 38px; }
.ik-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 12px; } .ik-facts span { display: flex; flex-direction: column; border-left: 2px solid #e4e9e4; padding-left: 8px; }
.ik-facts small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #667; font-weight: 700; } .ik-facts b { font-size: 14px; overflow-wrap: anywhere; }
.ik-bills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .ik-exp { display: flex; gap: 6px; flex-wrap: wrap; }
.ik-banner { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 6px; background: #fff6e3; border: 2px solid #c7801a; border-radius: 10px; padding: 7px 12px; color: #6b4a00 !important; text-decoration: none; }
.ik-banner b { font-weight: 900; } .ik-plink { display: inline-block; margin-top: 4px; font-size: 13px; }
@media (max-width: 900px) { .ik-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .ik-2, .ik-3 { grid-template-columns: 1fr; } .ik-conf { grid-template-columns: 1fr auto; } .ik-cl { grid-column: 1 / -1; padding: 0; }
  .ik-btns .ip-btn { flex: 1 1 100%; }
}
/* Email preview before sending */
.emprev { width: min(760px, 94vw); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.emprev label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 13px; }
.emprev .embody { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-height: 180px; max-height: 45vh; overflow: auto; background: #fff; font-size: 14px; line-height: 1.45; }
.emprev .embody:focus { outline: 2px solid var(--brand, #2f7d4f); outline-offset: 1px; }
.ctrbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border: 1px solid #a8d8b5; border-radius: 10px; background: linear-gradient(#f3faf5, #e6f4ea); color: #1d4d2c; cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 14px; line-height: 1.15; max-width: 260px; }
.ctrbtn:hover { border-color: var(--brand, #2f7d4f); box-shadow: 0 2px 6px rgba(47,125,79,.18); }
.ctrbtn.empty { background: #fff8e6; border-color: #f0d58a; color: #5a4300; }
.ctricon { font-size: 18px; }
.ctrtxt { display: flex; flex-direction: column; min-width: 0; }
.ctrtxt small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.ctrtxt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrmenu { position: absolute; z-index: 60; min-width: 240px; max-width: 320px; max-height: 360px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 6px; }
.ctrmhead { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px 6px; }
.ctrmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.ctrmenu button:hover { background: #eef6f0; }
.ctrmenu button.on { background: #e6f4ea; font-weight: 700; color: #1d4d2c; }
.ctrmenu button.clear { color: var(--bad); border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 4px; }
.ctrmnote { font-size: 12px; color: var(--muted); padding: 6px 10px 2px; }
@media (max-width: 760px) { .ctrbtn { margin-left: 0; } }
/* Weekly Pipeline: "＋ Add" in every comment cell, the quick add box, and the add box on top of the history */
.wp-cfoot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .wp-cfoot:empty { display: none; }
.wp-cadd1 { border: 1px solid #a9d3b2; background: #eef7f0; color: #1f6b3a; border-radius: 999px; padding: 0 8px; font-size: 11.5px; font-weight: 800; line-height: 1.6; cursor: pointer; white-space: nowrap; }
.wp-cadd1:hover { background: #1f6b3a; color: #fff; border-color: #1f6b3a; } span.wp-cadd1.in { display: inline-block; }
.wp-qadd { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px solid #a9d3b2; background: #f3faf4; border-radius: 10px; }
.wp-qadd textarea { width: 100%; min-height: 64px; } .wp-qlast { margin-top: 8px; font-size: 13.5px; background: #f6f8f6; border-radius: 8px; padding: 6px 10px; max-height: 6.5em; overflow: auto; }
.wp-sugg { font-size: 12px; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-flag.pending { background: #f1f3f2; color: #667; border: 1px dashed #b8c1bb; font-weight: 700; } .ik-pending { display: inline-block; background: #f1f3f2; color: #667; border: 1px dashed #b8c1bb; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; }

/* ───── Email: inbox, conversations, suggestions ───── */
.navbadge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 99px; background: #d93025; color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.mboxtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; border-bottom: 1px solid var(--line); }
.mboxtabs button { border: 0; background: none; padding: 8px 12px; border-bottom: 3px solid transparent; cursor: pointer; color: var(--muted); font-weight: 600; }
.mboxtabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.mboxtabs button:hover { color: var(--ink); }
.convtable { width: 100%; }
.convtable tr.conv td { padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid #edf0ec; vertical-align: top; }
.convtable tr.conv:hover td { background: #f6faf7; box-shadow: inset 0 1px 0 #e3ebe5; }
.convtable tr.conv.unread td { background: #fff; }
.convtable tr.conv:not(.unread) td { background: #fafbfa; }
.convtable tr.conv.unread .cwho, .convtable tr.conv.unread .csubj, .convtable tr.conv.unread .cwhen { font-weight: 700; color: var(--ink); }
.convtable .cwho { width: 210px; max-width: 210px; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.convtable .csubj { font-size: 14px; }
.convtable .cprev { font-size: 13px; }
.convtable .cwhen { width: 80px; text-align: right; font-size: 12px; white-space: nowrap; color: var(--muted); }
.convtable .esel { width: 28px; }
.star { border: 0; background: none; font-size: 18px; line-height: 1; color: #b8bfb9; cursor: pointer; padding: 0 2px; }
.star.on { color: #f4b400; }
.star:hover { color: #f4b400; }
.projchip { background: #e8f1ec; color: var(--brand); font-weight: 600; }
.pchip { background: #eef0fb; color: #3949ab; margin-top: 3px; font-size: 11px; }
.tabnew { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: #d93025; color: #fff; font-size: 11px; font-weight: 700; }
.convmodal .modal-box { width: min(1000px, 100%); }
.convhead { gap: 8px; }
.convhead .star { font-size: 22px; }
.convlist { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cmsg { border-top: 1px solid var(--line); background: #fafbfa; }
.cmsg:first-child { border-top: 0; }
.cmsg.open { background: #fff; }
.cmsghead { display: flex; align-items: center; gap: 6px; padding: 10px 14px 2px; }
.cmsgsum { padding: 0 14px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmsg.open .cmsgsum { display: none; }
.cmsgbody { display: none; padding: 0 14px 14px; }
.cmsg.open .cmsgbody { display: block; }
.cmsgbody .emailframe { width: 100%; border: 0; min-height: 120px; }
.sugg { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 0 8px; border: 1px solid #f5d79e; background: #fffaf0; border-radius: 10px; font-size: 14px; flex-wrap: wrap; }
.sugg .sicon { font-size: 18px; }
.psugg { margin-bottom: 10px; }
.sendlater { display: inline-flex; gap: 6px; align-items: center; }
.sendlater input[type=datetime-local] { padding: 5px 6px; }
table.rules tr.off td { opacity: .55; }
.rchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 4px; margin: 0 4px 4px 0; border-radius: 99px; background: #f1f3f1; }
.rchip.on { background: #e3f4e8; color: #1f6b3a; }
@media (max-width: 700px) { .convtable .cwho { width: 110px; max-width: 110px; } .convtable .cprev { display: none; } }
/* Approval intake: SolarLink price (dealer price list) */
.ik-span { grid-column: 1 / -1; } .ik-slp { display: grid; gap: 2px; }
.ik-slrow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 4px 8px; border-bottom: 1px dashed #e4e9e4; font-size: 14px; } .ik-slrow small { color: #667; }
.ik-slrow > b { white-space: nowrap; } .ik-slbase { background: #f3f8f4; border-radius: 8px; font-weight: 600; } .ik-sltot { border-bottom: 0; border-top: 1px solid #c9d3cc; }
.ik-slrow.good { background: #eef7f0; color: #1f6b3a; border-radius: 8px; } .ik-slrow.bad { background: #fdecea; color: #b42318; border-radius: 8px; }
.wp-table td.wp-fromlist { color: #778; font-style: italic; }
/* Price lists › Dealer price list (Exhibit B) and the dealer portal price list */
.dp-panel > summary { cursor: pointer; list-style: none; } .dp-panel > summary::-webkit-details-marker { display: none; }
.dp-vinfo { background: #f6f8f6; border: 1px solid #e4e9e4; border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 13.5px; }
.dp-sec { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #24557f; }
table.dp-items input[type=text] { width: 100%; } table.dp-items td { vertical-align: middle; } .dp-btns { display: flex; gap: 6px; flex-wrap: wrap; } .dp-btns .btn, .dp-btns button { font-size: 13px; padding: 4px 10px; }
.dp-plist { gap: 0 !important; } .dp-prow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed #e4e9e4; } .dp-prow > b { white-space: nowrap; color: #1f2b23; }
/* Financials (Phase 1) */
.fn-note { font-size: 13px; color: #556; background: #f6f8f6; border: 1px solid #e4e9e4; border-radius: 10px; padding: 6px 12px; }
.fn-flags { display: flex; gap: 6px; flex-wrap: wrap; } .fn-kpis .dp-kpi b { font-size: 24px; }
.fn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.fn-fin { border-bottom: 1px dashed #e4e9e4; padding-bottom: 8px; } .fn-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 12px; margin-top: 6px; }
.fn-facts span { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; } .fn-facts small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #667; font-weight: 700; }
table.fn-ms, table.fn-cost { font-size: 13.5px; } table.fn-ms td, table.fn-cost td { vertical-align: top; } .fn-tot td { font-weight: 800; border-top: 2px solid #c9d3cc; } .fn-bad { color: #b42318; font-weight: 700; }
.fn-week > summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px 70px; gap: 10px; align-items: center; cursor: pointer; padding: 4px 0; list-style: none; } .fn-week > summary::-webkit-details-marker { display: none; }
.fn-week > summary b { text-align: right; } .fn-bar { height: 12px; background: #eef1ee; border-radius: 6px; overflow: hidden; } .fn-bar i { display: block; height: 100%; background: #3f7a4a; border-radius: 6px; }
.fn-recon { border-bottom: 1px dashed #e4e9e4; padding: 6px 0; display: grid; gap: 4px; }
@media (max-width: 900px) { .fn-grid { grid-template-columns: 1fr; } .fn-week > summary { grid-template-columns: 110px minmax(0, 1fr) 90px; } .fn-week > summary small { display: none; } }
/* "＋ Add" in comment cells: a clear, solid button (Rick: not tiny / greyed) */
.wp-cadd1 { background: #1f6b3a; color: #fff; border: 1px solid #1f6b3a; border-radius: 8px; padding: 2px 10px; font-size: 12.5px; font-weight: 800; line-height: 1.6; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.wp-cadd1:hover { background: #17552d; border-color: #17552d; color: #fff; } span.wp-cadd1.in { display: inline-block; margin-top: 1px; }
.wp-cfoot { margin-top: 3px; } .wp-sidepick button { font-size: 12.5px; padding: 3px 10px; }
.hol-rules { display: flex; gap: 6px 16px; flex-wrap: wrap; } .hol-years { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; }
.hol-years h3 { margin: 4px 0; } .hol-day { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px dashed #e4e9e4; font-size: 13.5px; }

/* Field shown as a button that opens its choices (MPU main breaker / bus) */
.pickfield { display: block; }
.pickfield .pickbtn { width: auto; }
.pickbtn { display: inline-flex; align-items: center; min-width: 130px; padding: 7px 14px; border: 1px solid #a8d8b5; border-radius: 10px; background: linear-gradient(#f3faf5, #e6f4ea); color: #1d4d2c; font-weight: 700; cursor: pointer; }
.pickbtn:hover { border-color: var(--brand); box-shadow: 0 2px 6px rgba(47,125,79,.18); }
.pickbtn.empty { background: #fff8e6; border-color: #f0d58a; color: #5a4300; font-weight: 600; }
.pickmenu { min-width: 150px; }
/* Lenders menu (top bar, Rick only) and Admin › Lender Links */
.ll-wrap { position: relative; display: inline-flex; } .ll-btn { cursor: pointer; white-space: nowrap; }
.ll-menu { position: fixed; top: 60px; right: 8px; z-index: 1000; min-width: 280px; max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #dfe5df; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; }
.ll-menu .ll-item { display: flex !important; flex-direction: column; gap: 1px; padding: 8px 10px !important; border-radius: 8px; color: #1f2b23 !important; text-decoration: none; }
.ll-menu .ll-item:hover { background: #eef6f0 !important; } .ll-menu .ll-item small { color: #778; font-size: 11.5px; }
.ll-menu .ll-edit { display: block; border-top: 1px solid #eef1ee; margin-top: 4px; padding: 8px 10px !important; color: #24557f !important; font-size: 13px; }
.ll-table input { width: 100%; } .ll-table td:first-child button { padding: 2px 6px; font-size: 11px; }
@media (max-width: 760px) { .ll-wrap { flex-direction: column; } .ll-menu { position: static; max-height: none; z-index: auto; box-shadow: none; min-width: 0; margin: 0 8px 8px; } }

/* G-Drive link in the Project section header */
.gdrive { margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border: 1px solid #dadce0; border-radius: 99px; background: #fff; color: #3c4043; font-size: 13px; font-weight: 600; line-height: 20px; cursor: pointer; text-decoration: none; }
.gdrive:hover { background: #f6f8fc; border-color: #c4c7c5; box-shadow: 0 1px 3px rgba(60,64,67,.15); text-decoration: none; }
.gdrive.empty { opacity: .55; border-style: dashed; }
.gdrive.empty:hover { opacity: .9; }
.gdrive.start { margin: 0; }
.lockbox .gdrive { flex: 0 0 auto; width: auto; }
.gdriverow { padding: 2px 0; }

/* Admin › Google Drive import */
.di-steps { margin: 8px 0 12px 18px; padding: 0; } .di-steps li { margin: 6px 0; line-height: 1.6; }
.di-job { border: 1px solid #e4e9e4; border-radius: 10px; padding: 8px 10px; margin: 8px 0; background: #fff; }
.di-job table.list td { vertical-align: top; } .di-job select { width: auto; padding: 3px 6px; }

/* "Connect / reconnect my Gmail" bar under the menu */
#gmailstrip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 20px; background: #fff8e6; border-bottom: 1px solid #f0d58a; color: #5a4300; font-size: 14px; }
#gmailstrip span { flex: 1; min-width: 220px; }
#gmailstrip .btn { padding: 5px 12px; }
/* Financials Phase 2: commissions */
.cm-sum { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 8px; } .cm-sum span { display: flex; flex-direction: column; font-size: 12px; color: #667; } .cm-sum b { font-size: 16px; color: #1f2b23; }
.cm-sum .cm-cb b { color: #a15c00; }
.cm-checks { list-style: none; margin: 4px 0; padding: 0; font-size: 13px; } .cm-checks li { padding: 2px 0; } .cm-checks .cm-ok b { color: #2f7d4a; } .cm-checks .cm-warn b { color: #a15c00; } .cm-checks .cm-fail b { color: #b3261e; }
.cm-chkrow td { background: #fafbfa; } .cm-ms td { vertical-align: top; }
.cm-feeadd { gap: 6px; flex-wrap: wrap; margin-top: 6px; } .cm-feeadd input, .cm-feeadd select { width: auto; max-width: 180px; }
.cm-rules td { vertical-align: top; } .cm-rules select { width: auto; max-width: 210px; margin-top: 4px; }
.cm-sched { border: 1px solid #e4e9e4; border-radius: 10px; padding: 10px; margin: 10px 0; background: #fff; } .cm-sched input[type=text] { width: auto; }
.cm-log { padding: 4px 0; border-bottom: 1px solid #f0f2f0; }

/* Email bodies: plain text keeps its line breaks; quoted history folds away */
.emailtext { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.emailquote summary { cursor: pointer; display: inline-block; padding: 0 8px; border-radius: 8px; background: #eef1ee; color: #556; font-size: 12px; list-style: none; margin-top: 6px; }
.emailquote summary::-webkit-details-marker { display: none; } .emailquote .emailtext { color: #667; border-left: 3px solid #dfe5df; padding-left: 10px; margin-top: 6px; }

/* Photos (project tab + portals): folders by phase, thumbnail grid, large view */
.pf-phases { display: grid; gap: 12px; }
.pf-phase { border: 1px solid #e4e9e4; border-radius: 12px; padding: 10px; background: #fff; }
.pf-phh { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #4a5a4f; margin-bottom: 8px; }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pf-tile { position: relative; display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; border: 1px solid #dfe5df; border-radius: 10px; background: #f8faf8; cursor: pointer; min-height: 48px; }
.pf-tile:hover, .pf-tile.pf-over { border-color: #2f7d4a; background: #eef6f0; }
.pf-tile.empty { background: #fff; color: #667; } .pf-tile .pf-ic { font-size: 20px; } .pf-tile .pf-lb { flex: 1; font-size: 13.5px; line-height: 1.25; }
.pf-tile .pf-n { font-weight: 700; font-size: 14px; color: #1f2b23; } .pf-tile.empty .pf-n { color: #99a; }
.pf-tile.missing { border-color: #e7b3ae; background: #fff6f5; } .pf-red { color: #c62828; font-size: 12px; margin-left: 2px; }
.pf-req { font-size: 10.5px; color: #8a8f99; border: 1px solid #e0e3e8; border-radius: 6px; padding: 0 4px; }
.pf-openhead { gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .pf-cam { padding: 6px 10px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; min-height: 90px; border-radius: 10px; }
.pf-grid.pf-drop { border: 2px dashed transparent; padding: 4px; } .pf-grid.pf-over { border-color: #2f7d4a; background: #eef6f0; }
.pf-th { padding: 0; border: 1px solid #e4e9e4; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: #f2f4f2; cursor: zoom-in; }
.pf-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: #667; padding: 6px; text-align: center; }
.pf-noimg.big { min-height: 200px; font-size: 14px; }
.pf-emptymsg { grid-column: 1 / -1; padding: 18px; }
.pf-lbmodal .modal-box { max-width: min(1100px, 96vw); width: 96vw; }
.pf-lbhead { gap: 10px; align-items: center; } .pf-lbname { overflow-wrap: anywhere; }
.pf-lbimg { position: relative; display: flex; align-items: center; justify-content: center; background: #111; border-radius: 10px; margin: 8px 0; min-height: 240px; }
.pf-lbimg img { max-width: 100%; max-height: 70vh; display: block; }
.pf-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 8px; background: rgba(255,255,255,.85); font-size: 32px; line-height: 1; cursor: pointer; }
.pf-nav[data-prev] { left: 8px; } .pf-nav[data-next] { right: 8px; } .pf-nav:disabled { opacity: .25; cursor: default; }
.pf-lbfoot { gap: 8px; flex-wrap: wrap; align-items: center; }
.pf-drivemodal .modal-box { max-width: min(1100px, 96vw); width: 96vw; }
.pf-drivegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; margin-top: 10px; }
.pf-dt { display: flex; flex-direction: column; gap: 4px; border: 1px solid #e4e9e4; border-radius: 10px; padding: 6px; background: #fff; font-size: 12.5px; }
.pf-dt img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #f2f4f2; } .pf-dt.done { opacity: .55; }
.pf-dt select { width: 100%; font-size: 12px; padding: 3px; } .pf-dtn { overflow-wrap: anywhere; }
@media (max-width: 600px) { .pf-tiles { grid-template-columns: 1fr 1fr; } .pf-grid { grid-template-columns: repeat(3, 1fr); } .pf-nav { width: 36px; height: 52px; font-size: 26px; } }

.cm-rules tr.cm-unconf td { background: #fffaf0; }
/* Scheduling blocks: date chip on the section header, "mark done" on a step, Record a date */
.schhdr { font-weight: 600; vertical-align: middle; }
.schsteps .schmark { font-size: 11px; margin-left: 4px; text-decoration: underline; color: inherit; opacity: .8; }
.schold { background: #fff4e5; border: 1px solid #f0d3a8; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.schrec { margin: 6px 0; } .schrec .row { gap: 6px; flex-wrap: wrap; align-items: center; } .schrec input, .schrec select { width: auto; }
.schrecwrap > summary, .schblk details > summary { cursor: pointer; }
.schhint { margin-top: 4px; }
/* Calendar hover pop-up */
.calpop { position: absolute; z-index: 1000; max-width: 360px; min-width: 240px; padding: 12px 16px; border-radius: 10px; background: #fff; color: #1d2a22; border: 1px solid #c9d3cc;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); font-size: 15px; line-height: 1.5; pointer-events: none; }
.calpop-h { font-weight: 700; font-size: 16px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.calpop .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.chip.schhdr.done { background: #1f6b3a; color: #fff; }
details.psec > summary h2:has(> .schhdr), details.psecgroup > summary h2:has(> .schhdr) { flex-wrap: wrap; row-gap: 6px; }

/* Installer portal › Materials card (materials.js) */
.ph-mat .ip-ch { border-left-color: #a35a12; background: #fbf1e6; }
.m-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid #dfe5df; border-radius: 10px; overflow: hidden; }
.m-fact { padding: 8px 12px; border-right: 1px solid #dfe5df; min-width: 0; } .m-fact:last-child { border-right: 0; }
.m-fact dt { font-size: 11.5px; color: #667; letter-spacing: .04em; text-transform: uppercase; }
.m-fact dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.m-fact.big dd { font-size: 17px; } .m-fact .sub { display: block; font-weight: 400; font-size: 12.5px; color: #667; } .m-bad { color: #b42318; }
.m-fact.lead { background: #eef4fa; } .m-fact.lead dt, .m-fact.lead dd { color: #24557f; }
.m-fact.lead.late { background: #fff4d9; } .m-fact.lead.late dt, .m-fact.lead.late dd { color: #7a5600; }
.m-fact.lead.unset { background: #f6f8f6; } .m-fact.lead.unset dt, .m-fact.lead.unset dd { color: #667; }
@media (max-width: 560px) { .m-facts { grid-template-columns: 1fr 1fr; } .m-fact:nth-child(2) { border-right: 0; } .m-fact:nth-child(-n+2) { border-bottom: 1px solid #dfe5df; } }
.m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 560px) { .m-actions { grid-template-columns: 1fr; } }
.m-act { display: grid; gap: 6px; align-content: start; }
.m-act button { width: 100%; padding: 13px 14px; font-size: 16px; border-radius: 11px; font-weight: 600; }
.m-act button:disabled { opacity: .5; cursor: not-allowed; }
.m-act p { margin: 0; font-size: 12.5px; color: #556; line-height: 1.4; } .m-act p b { color: #1f2b23; }
button.m-danger { background: #fff; color: #9b2c1f; border: 1px solid #eea59d; }
button.m-send { background: #b42318; color: #fff; border-color: #b42318; font-weight: 600; } button.m-send:disabled { opacity: .5; }
.m-banner { border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.m-banner.ok { background: #e6f2e8; border: 1px solid #a9d3b2; color: #1f6b3a; }
.m-banner .t { flex: 1; min-width: 200px; } .m-banner .t b { display: block; font-size: 15px; } .m-banner button { padding: 5px 10px; font-size: 13px; }
.m-reps { display: grid; gap: 8px; }
.m-issue { border: 1px solid #eea59d; border-radius: 10px; overflow: hidden; } .m-issue.res { border-color: #dfe5df; }
.m-issue .h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 12px; background: #fdeceb; } .m-issue.res .h { background: #f6f8f6; }
.m-issue ul { margin: 0; padding: 8px 12px 8px 30px; display: grid; gap: 3px; font-size: 14px; }
.m-issue .n { padding: 0 12px 8px; font-size: 13.5px; color: #556; overflow-wrap: anywhere; }
.m-issue .f { padding: 0 12px 10px; display: flex; flex-wrap: wrap; gap: 8px; } .m-issue .f button { padding: 5px 10px; font-size: 13px; }
details.m-bom { border: 1px solid #dfe5df; border-radius: 10px; }
details.m-bom > summary { list-style: none; cursor: pointer; padding: 9px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
details.m-bom > summary::-webkit-details-marker { display: none; }
details.m-bom > summary .chev { transition: transform .15s; color: #667; font-size: 11px; } details.m-bom[open] > summary .chev { transform: rotate(90deg); }
.m-prog { display: block; flex-basis: 100%; height: 6px; background: #eef2ef; border-radius: 99px; overflow: hidden; }
.m-prog i { display: block; height: 100%; background: #2f7d4f; border-radius: 99px; transition: width .2s; }
.m-bomtools { display: flex; gap: 8px; padding: 0 12px 8px; } .m-bomtools button { padding: 4px 10px; font-size: 13px; }
.m-tablewrap { overflow-x: auto; border-top: 1px solid #dfe5df; }
table.m-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-t th { text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: #667; font-weight: 600; padding: 7px 12px; background: #f6f8f6; }
.m-t td { padding: 7px 12px; border-top: 1px solid #e4e9e4; vertical-align: middle; }
.m-t td.q, .m-t th.q { text-align: right; font-variant-numeric: tabular-nums; width: 60px; }
.m-t tr.sec td { background: #f6f8f6; font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #667; padding-top: 5px; padding-bottom: 5px; }
.m-t tr.got td.item span { color: #778; text-decoration: line-through; text-decoration-color: #a9d3b2; }
.m-t tr.short td { background: #fdeceb; }
.m-t label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.m-t input[type=checkbox] { width: 20px; height: 20px; accent-color: #2f7d4f; flex: none; }
.m-t .flag { color: #9b2c1f; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.modal-box.m-modal { max-width: 640px; display: grid; gap: 12px; }
.m-modal .lbl { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; } .m-modal textarea { width: 100%; }
.m-attest { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #dfe5df; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.m-attest input { width: 22px; height: 22px; accent-color: #2f7d4f; margin-top: 1px; flex: none; }
.m-warn { background: #fff4d9; border: 1px solid #f2c25c; color: #7a5600; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.m-err { background: #fdeceb; border: 1px solid #eea59d; color: #9b2c1f; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.mi-list { border: 1px solid #dfe5df; border-radius: 10px; overflow: hidden; max-height: 46vh; overflow-y: auto; }
.mi { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 8px 10px; border-top: 1px solid #e4e9e4; }
.mi:first-child { border-top: 0; } .mi.on { background: #fdeceb; }
.mi input[type=checkbox] { width: 20px; height: 20px; accent-color: #b42318; }
.mi .nm { min-width: 0; font-size: 14px; cursor: pointer; } .mi .nm small { display: block; color: #667; font-size: 12px; }
.mi .ctl { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.mi .ctl input[type=number] { width: 72px; } .mi .ctl select { flex: 1; min-width: 150px; width: auto; }
.m-seg { display: inline-flex; border: 1px solid #dfe5df; border-radius: 9px; overflow: hidden; }
.m-seg button { border: 0; border-radius: 0; padding: 7px 12px; background: #fff; }
.m-seg button[aria-pressed="true"] { background: #b42318; color: #fff; font-weight: 600; } .m-seg button.g[aria-pressed="true"] { background: #2f7d4f; }
/* Email (Oct 6): mailbox filter, Needs reply, one collapsible row per message, folded quotes in HTML emails */
.mboxfilter { margin: 6px 0 2px; }
.mboxtabs .mcount { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: #f6c35b; color: #4a3500; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.navbadge.reply { background: #f6c35b; color: #4a3500; }
.cmsghead .ccaret { display: inline-block; width: 14px; color: #778; font-size: 12px; }
.cmsghead .ccaret::before { content: '▸'; }
.cmsg.open .cmsghead .ccaret::before { content: '▾'; }
.cmsgsum { padding-left: 34px; }
.convtools { padding: 4px 14px; border-bottom: 1px solid var(--line); }
.emailquotebtn { display: inline-block; padding: 0 8px; border-radius: 8px; background: #eef1ee; color: #556; font-size: 12px; border: 0; margin-top: 4px; cursor: pointer; }
.emailquotebtn.on { background: #dfe5df; }
.flagwho { padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; }
.mboxfilter button.nc { border-style: dashed; }
/* Private mailbox (rick@) */
.chip.privchip { background: #f1ecfb; border-color: #cdbdf0; color: #4a2f86; }
.privbox { background: #f6f2fd; border: 1px solid #ddd0f5; border-radius: 10px; padding: 8px 12px; margin: 8px 0; color: #3d2a6b; }
.dealerbtns { margin-top: -4px; align-items: center; }
.dealerbtns .btn { padding: 4px 12px; border-radius: 99px; }

/* ───────── Compact layout (Oct 6): one-line nav, sticky toolbar, one-line list rows. Same fonts and colours, less space. ───────── */
.top { gap: 12px; padding: 6px 16px; }
.brand img.logo { height: 34px; padding: 2px 6px; }
.top nav { gap: 2px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a, .top nav .ll-btn { white-space: nowrap; padding: 5px 8px; font-size: 14px; }
.me { position: relative; flex: 0 0 auto; }
.me .avatar { width: 30px; height: 30px; border-radius: 50%; padding: 0; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.me .avatar:hover { background: rgba(255,255,255,.22); }
.me .avatarmenu { position: absolute; right: 0; top: 36px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; min-width: 200px; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 20; }
@media (max-width: 760px) { .top nav { overflow: visible; } .me .avatarmenu { position: static; box-shadow: none; } }

/* Pipeline toolbar: one row, sticky under the top bar */
.ptoolbar { position: sticky; top: var(--navh, 48px); z-index: 4; background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 6px 0; margin: -6px 0 4px; flex-wrap: nowrap; }
.ptoolbar .ptitle { font-size: 16px; white-space: nowrap; }
.ptoolbar .chiprow { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin: 0; scrollbar-width: thin; padding-bottom: 2px; }
.ptoolbar .chiprow button { white-space: nowrap; padding: 3px 10px; font-size: 13px; flex: 0 0 auto; }
.ptoolbar .pdealer { width: auto; flex: 0 0 auto; max-width: 190px; padding: 5px 6px; font-size: 13px; }
.ptoolbar .iconbtn { padding: 4px 8px; flex: 0 0 auto; text-decoration: none; }
.ptoolbar .pcount { white-space: nowrap; flex: 0 0 auto; }
.vmenuwrap { position: relative; flex: 0 0 auto; }
#pviewbtn { padding: 5px 10px; font-size: 13px; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
#pviewbtn.on { border-color: var(--ink); }
.vmenu { position: absolute; right: 0; top: 34px; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 240px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.vmenu > button { text-align: left; } .vmenu > button.on { background: var(--ink); color: #fff; }
@media (max-width: 760px) { .ptoolbar { flex-wrap: wrap; position: static; } .ptoolbar .chiprow { flex-basis: 100%; } }

/* Shared compact list: one-line rows (~36px), slim group headers, sticky column headings */
table.list.compact th, table.list.compact td, .compactlist table.list th, .compactlist table.list td { padding: 6px 8px; font-size: 14px; line-height: 1.35; vertical-align: middle; }
table.list.compact th, .compactlist table.list th { font-size: 12px; }
table.list.compact .clip, .compactlist .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.tiny { font-size: 11px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
.chip.tiny.more { background: #e3e9e4; }
.ini { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border-radius: 11px; background: #e6eee8; color: #24402f; font-size: 11px; font-weight: 700; cursor: default; }

/* Pipeline table */
table.list.pipetable { table-layout: fixed; overflow: visible; }
.pipetable thead th { position: sticky; top: calc(var(--navh, 48px) + var(--tbh, 44px)); z-index: 3; }
.pipetable col.c-proj { width: 30%; } .pipetable col.c-sub { width: 12%; } .pipetable col.c-days { width: 60px; } .pipetable col.c-dealer { width: 10%; }
.pipetable col.c-kw { width: 46px; } .pipetable col.c-scope { width: 96px; } .pipetable col.c-pm { width: 44px; } .pipetable col.c-next { width: 24%; } .pipetable col.c-alert { width: auto; }
.pipetable td.pcell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipetable td.pcell .psel { width: auto; margin: 0 6px 0 0; vertical-align: -2px; }
.pipetable .pnum { font-size: 12px; color: var(--muted); margin-left: 4px; }
.pipetable .paddr { font-size: 12px; color: var(--muted); }
.pipetable td.nextcell { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; cursor: default; }
.pipetable td.nextcell .ns1 { display: inline-block; max-width: calc(100% - 82px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
table.list.pipetable td.alert { display: table-cell; -webkit-line-clamp: unset; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.pipetable .scope { flex-wrap: nowrap; }
.pipetable tr.pgrphead td { padding: 4px 10px; font-size: 14px; }
.pipetable tr.sgrphead td { padding: 5px 10px; font-size: 14px; }
.pipetable tbody.pgrp.sub tr.pgrphead td { padding-left: 26px; }
#taskpop { position: absolute; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 8px 10px; width: 360px; max-height: 320px; overflow: auto; }
#taskpop .tp { display: flex; flex-direction: column; padding: 4px 0; border-top: 1px solid #eef1ee; font-size: 13px; }
.pipetable.classic thead th { position: sticky; top: calc(var(--navh, 48px) + var(--tbh, 44px)); z-index: 3; }
.pipetable.classic td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { table.list.pipetable { table-layout: auto; } .pipetable thead th { position: static; } .pipetable td.pcell, .pipetable td.nextcell, table.list.pipetable td.alert { white-space: normal; } }
/* Compact look on the other lists (same content, less space) */
.convtable.compact { table-layout: fixed; }
.convtable.compact td.esel { width: 30px; } .convtable.compact tr.conv td { padding-top: 5px; padding-bottom: 5px; vertical-align: middle; }
.convtable.compact tr.conv td:nth-child(3) { width: 220px; }
.convtable.compact tr.conv td:nth-child(4) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convtable.compact tr.conv td:last-child { width: 92px; white-space: nowrap; text-align: right; }
.convtable.compact .cwho { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convtable.compact .cwho > div { display: inline; margin-left: 4px; }
.convtable.compact tr:first-child th:nth-child(1), .convtable.compact tr:first-child th:nth-child(2) { width: 30px; }
.wp-table td { padding: 3px 8px; line-height: 1.3; font-size: 13.5px; } .wp-table th { padding: 5px 8px; }
@media (max-width: 760px) { .convtable.compact { table-layout: auto; } .convtable.compact tr.conv td:nth-child(4) { white-space: normal; } }
.ptoolbar .dchips { flex: 0 0 auto; flex-wrap: nowrap; margin: 0; gap: 4px; }
.ptoolbar .dchips button { white-space: nowrap; padding: 3px 9px; font-size: 13px; }
/* Pipeline toolbar in two sticky rows (Rick, Oct 6): 1 = title, search, dealers, View, Bottlenecks; 2 = the stage chips at normal size */
.ptoolbar { flex-direction: column; align-items: stretch; gap: 4px; }
.ptoolbar .ptrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ptoolbar .ptrow .chiprow { flex: 1 1 auto; padding-bottom: 0; }
.ptoolbar .ptrow .chiprow { gap: 4px; }
.ptoolbar .ptrow .chiprow button { padding: 4px 8px; font-size: 13.5px; }
.ptoolbar .ptrow .dchips button { padding: 4px 11px; font-size: 14px; }
.ptoolbar .pcount { margin-left: auto; }
.ptoolbar .chiprow.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); }
@media (max-width: 760px) { .ptoolbar .ptrow { flex-wrap: wrap; } }
@media (max-width: 760px) { .ptoolbar .dchips { flex-wrap: wrap; flex: 1 1 100%; } .ptoolbar .ptrow .chiprow { min-width: 0; max-width: 100%; } .ptoolbar .pcount { margin-left: 0; } }
.ptoolbar, .ptoolbar .ptrow { min-width: 0; max-width: 100%; }
.ptoolbar .ptrow .chiprow { min-width: 0; }

/* Weekly Pipeline: a dealer that pays SolarLink (Arcasa) */
.wp-nosow { color: #8a5a00; background: #fff3d6; border-radius: 4px; padding: 0 5px; font-size: 12px; white-space: nowrap; }
.wp-overdue { color: #a11; font-weight: 600; }

/* In-page "Are you sure?" dialog (lib.js ask / askText / tell): above any open modal */
.modal.askdlg { z-index: 10050; }
.askdlg .modal-box { max-width: 520px; width: calc(100% - 32px); }
.askdlg .askmsg { white-space: pre-wrap; line-height: 1.45; margin: 2px 0 12px; overflow-wrap: anywhere; }
.askdlg .askin { width: 100%; margin-bottom: 12px; }
.askdlg .askbtns { gap: 8px; }

/* ESA CompanyCam: background copy progress */
.ccprogress { margin: 8px 0; }
.ccbar { height: 10px; background: #e6ece8; border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
.ccbar span { display: block; height: 100%; background: #2d7a46; transition: width .4s; }
/* Re-roof cards (public/roof.js) */
.roofnote { background: #f3eef9; border: 1px solid #ddd0ee; color: #4b3470; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.roofwarn { background: #fff4e5; border: 1px solid #f3cf9a; color: #8a5300; border-radius: 6px; padding: 6px 10px; margin: 4px 0; font-size: 13px; }
.rooflic { display: flex; flex-wrap: wrap; gap: 8px; } .rooflic label { flex: 1 1 140px; font-size: 12px; }
.rooffile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rooffile .rfpick { display: inline-flex; gap: 6px; align-items: center; } .rooffile select { width: auto; max-width: 260px; }
.roofco { display: flex; gap: 6px; margin-bottom: 4px; } .roofco [data-co=amount] { width: 120px; flex: none; } .roofco [data-co=reason] { flex: 1; }
.rooffee { display: flex; gap: 6px; align-items: center; } .rooffee input { flex: 1; min-width: 90px; } .rooffee button { padding: 4px 8px; } .rooffee button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.roofphotos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .roofphotos .chip.muted { opacity: .6; }
.chip.roofchip { margin-left: 6px; font-weight: 500; white-space: normal; max-width: 100%; }
.roofco input, .rooffile select, .rooffile .btn { font-size: 14px; padding: 6px 8px; }
@media (max-width: 600px) { .roofco { flex-wrap: wrap; } .roofco [data-co=reason] { flex: 1 1 100%; order: 3; } .rooffee { flex-wrap: wrap; } }
[data-t=roofgap] .chip, .roofphotos .chip { white-space: normal; }
/* SGIP tag (public/sgip.js) */
.chip.sgipchip { background: #e8f1fb; color: #1d4f91; font-weight: 600; margin-left: 6px; } .chip.sgipchip.tiny { font-size: 10.5px; padding: 0 6px; }
.scope .sgip { background: #e8f1fb; color: #1d4f91; font-weight: 600; } .pinfo > span.pinfo-sgip { background: #1d4f91; border-color: #1d4f91; color: #fff; font-weight: 700; }
.hsgip { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 4px 0 8px; }
/* Email suggestions on a project: one compact line under the address (opens to show them) */
.psuggline { margin: 6px 0 0; font-size: 14px; } .psuggline > summary { cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; padding: 3px 10px; border-radius: 99px; background: #fff8e1; border: 1px solid #f1d58a; }
.psuggline[open] > summary { margin-bottom: 6px; } .psuggline .sugg { margin: 4px 0; }
.arsale td { background: #fffbe8; }
/* "New version available — Reload" (a newer deploy is live) */
.newbuild { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999; display: flex; gap: 12px; align-items: center; background: #1f6b3a; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-weight: 600; }
.newbuild button { background: #ffe100; color: #1a1a1a; border: 0; font-weight: 700; }

/* Installer portal on the phone (Paul, Oct 7): send-queue bar, "put it on your phone" card, photo markup, staff crew box */
#outbox { position: sticky; top: 0; z-index: 30; padding: 9px 16px; padding-top: calc(9px + env(safe-area-inset-top, 0px)); font-size: 13.5px; }
#outbox.off { background: #fff4d9; color: #7a5600; border-bottom: 1px solid #f2c25c; }
#outbox.sending { background: #eef4fa; color: #24557f; border-bottom: 1px solid #bcd3e8; }
#outbox button { margin-left: 8px; padding: 2px 10px; }
.ia-card { border-color: #a9d3b2; background: #f3faf5; }
.ia-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
@media (max-width: 560px) { .ia-grid { grid-template-columns: minmax(0, 1fr); } }
.ia-qr { width: 120px; height: 120px; background: #fff; border-radius: 8px; padding: 4px; }
.ia-qr svg { width: 100%; height: 100%; display: block; }
.ia-txt { display: grid; gap: 6px; min-width: 0; }
.ia-link { font-size: 12.5px; background: #fff; border: 1px solid #dfe5df; border-radius: 6px; padding: 3px 8px; overflow-wrap: anywhere; }
.ia-more summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 13.5px; }
.ia-how { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 620px) { .ia-how { grid-template-columns: minmax(0, 1fr); } }
.ia-how > div { border: 1px solid #e4e9e4; border-radius: 10px; padding: 8px 12px; background: #fff; }
.ia-how h4 { margin: 0 0 4px; }
.ia-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
/* Help › Getting started and the crew sign-in steps (Rick, Oct 8): big text, plain steps, iPhone and Android side by side even on a phone. */
.ia-gs .ip-cb { display: grid; gap: 14px; font-size: 17px; line-height: 1.45; }
.ia-gsi { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.ia-gsn { width: 34px; height: 34px; border-radius: 50%; background: #1f6b3a; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 17px; }
.ia-gsi h3 { margin: 4px 0 2px; font-size: 19px; } .ia-gsi p { margin: 0; }
.ia-gs .ia-how { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ia-gs .ia-how > div { padding: 8px; } .ia-gs .ia-how h4 { font-size: 17px; } .ia-gs .ia-steps { font-size: 15px; padding-left: 18px; gap: 6px; }
@media (max-width: 420px) { .ia-gsi { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; } .ia-gsn { width: 26px; height: 26px; font-size: 15px; margin-top: 2px; } .ia-gs .ia-steps { font-size: 14px; padding-left: 16px; } }
.ia-gsno, .hs-help { font-size: 17px; font-weight: 600; margin: 4px 0 0; }
.ip-helpbtn { background: #fff; color: #1f2b23; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.hs-steps { font-size: 18px; line-height: 1.45; padding-left: 24px; margin: 6px 0 12px; display: grid; gap: 6px; }
.homesignin input { font-size: 18px; }
.kbd { font-family: ui-monospace, Menlo, monospace; background: #f6f8f6; border: 1px solid #dfe5df; border-radius: 5px; padding: 0 5px; font-size: 12px; }
.ip-th { position: relative; display: block; }
.ip-mk { position: absolute; right: 4px; bottom: 4px; border: 0; background: rgba(255,255,255,.92); border-radius: 999px; width: 30px; height: 30px; padding: 0; font-size: 15px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mkmodal .modal-box { width: min(900px, 100%); display: grid; gap: 10px; }
.mkhead { display: flex; align-items: center; gap: 8px; }
.mktools { display: inline-flex; border: 1px solid #dfe5df; border-radius: 10px; padding: 2px; gap: 2px; }
.mktools button { border: 0; background: none; border-radius: 8px; padding: 6px 12px; font-weight: 600; }
.mktools button.on { background: var(--brand); color: #fff; }
.mkwrap { background: #111; border-radius: 10px; overflow: hidden; display: flex; justify-content: center; }
.mkwrap canvas { max-width: 100%; max-height: 70vh; touch-action: none; cursor: crosshair; display: block; }
.ia-admin { display: grid; gap: 6px; }
.ia-arow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; border: 1px solid #e4e9e4; border-radius: 10px; padding: 6px 10px; }
.ia-seg { display: inline-flex; border: 1px solid #dfe5df; border-radius: 10px; padding: 2px; gap: 2px; background: #f6f8f6; }
.ia-seg button { border: 0; background: none; border-radius: 8px; padding: 5px 10px; font-weight: 600; color: #556; }
.ia-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.crewbox { display: grid; gap: 8px; }
.crewfeed { border: 1px solid #e4e9e4; border-radius: 10px; overflow: hidden; max-height: 320px; overflow-y: auto; }
.crewit { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; padding: 6px 10px; border-bottom: 1px solid #eef1ee; font-size: 13.5px; }
.crewit:last-child { border-bottom: 0; }
.crewit time { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* Opened from the home screen: room for the phone's status bar. */
@media (display-mode: standalone) { .top { padding-top: calc(10px + env(safe-area-inset-top, 0px)); } }

/* Photo quality: too dark / blurry (public/photoquality.js) */
.pq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pq-item { display: grid; gap: 3px; border: 1px solid #e4e9e4; border-radius: 10px; padding: 6px; background: #fff; font-size: 12.5px; }
.pq-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #111; }
.pq-why { font-weight: 700; color: #9b2c1f; text-transform: capitalize; }
.pf-th { position: relative; } .pf-qflag { position: absolute; left: 4px; top: 4px; z-index: 1; background: #fff4d9; color: #7a5600; border: 1px solid #f2c25c; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 6px; }
.ia-ai { margin-top: 14px; border-top: 1px solid #e4e9e4; padding-top: 10px; } .ia-ai h3 { margin: 0 0 4px; font-size: 15px; }
.ia-aibar { height: 8px; background: #e6ece8; border-radius: 6px; overflow: hidden; margin: 6px 0 4px; } .ia-aibar span { display: block; height: 100%; background: #2d7a46; }

/* ───────── Project page theme (Oct 2026): info pills, tab tray, status card, project search, side panel, sections ───────── */
/* 1) Info pills under the address (Dealer, Financing, SGIP, Installer). Dealer and Installer open a menu. */
.pinfo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pinfo > span:not(.pinfo-sub):not(.pinfo-hoa):not(.pinfo-sgip) { background: #eef3ef; border: 0; box-shadow: none; border-radius: 999px;
  padding: 4px 16px; line-height: 1.15; text-align: center; position: relative; }
.pinfo > span .muted { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #7a867e; }
.pinfo > span b { font-size: 14px; color: #1d2a22; }
.pinfo > span.pinfo-edit { cursor: pointer; padding: 4px 20px; }
.pinfo > span.pinfo-edit:hover { background: #e3ece6; }
.pinfo > span.pinfo-edit:focus-visible { outline: 2px solid #1f5c3a; outline-offset: 1px; }
.pinfo > span.pinfo-edit .car { position: absolute; right: 7px; bottom: 6px; font-size: 10px; opacity: .6; }
.pinfo-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 999; background: #fff; border: 1px solid #d6dfd9; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px; min-width: 220px; text-align: left; max-height: 320px; overflow-y: auto; cursor: default; }
.pinfo-menu div { padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; font-size: 14px; color: #1d2a22; }
.pinfo-menu div:hover { background: #eef5f0; }
.pinfo-menu div.on { background: #2f7d4f; color: #fff; }

/* 2) Tab row: one tray, the open tab raised in green with yellow text. Scrolls sideways instead of wrapping. */
.tabs.ptray { display: flex; flex-wrap: nowrap; gap: 1px; background: #eef3ef; border-radius: 12px; padding: 4px; overflow-x: auto; scrollbar-width: thin; }
.tabs.ptray button { flex: 1 0 auto; justify-content: center; background: transparent; border: 1px solid #1f5c3a; border-radius: 9px; padding: 6px 6px; font: inherit; font-size: 13.5px; color: #3c4a41;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; transition: background .12s; }   /* thin dark green outline; 6px sides so all 13 tabs fit the column at desktop width */
.tabs.ptray button:hover { background: #fff; }
.tabs.ptray button.on { background: #2f7d4f; color: #ffe100; font-weight: 700; box-shadow: 0 2px 6px rgba(47,125,79,.35); }
.tabs.ptray button .n { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; background: #dfe8e2; color: #3c4a41; }
.tabs.ptray button.on .n { background: #ffe100; color: #2f7d4f; }
.tabs.ptray .tabnew { margin-left: 0; }

/* 3) "Where it stands" card: colored stripe, stage › sub stage headline, days chip, blockers, next step; picker tray on the right. */
.statuscard { --sc-c: #5d6b62; --sc-tray: #eef1ef; --sc-chip: #d5ddd8; grid-template-columns: minmax(0, 1fr) auto; border-left: 5px solid #8a958e; background: #fff; border-color: #d5ddd8; min-height: 62px; }
.statuscard.sc-green { --sc-c: #2f7d4f; --sc-tray: #dcefe2; --sc-chip: #9fd8b1; background: #ecf9f0; border-color: #9fd8b1; border-left-color: #2f7d4f; }
.statuscard.sc-amber { --sc-c: #7a5600; --sc-tray: #f7e3b0; --sc-chip: #f2c25c; background: #fff4d9; border-color: #f2c25c; border-left-color: #b07a00; }
.statuscard.sc-red { --sc-c: #9b2c1f; --sc-tray: #f6d3cf; --sc-chip: #eea59d; background: #fdeceb; border-color: #eea59d; border-left-color: #9b2c1f; }
.statuscard .sc-info { gap: 2px; }
.statuscard .sc-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.statuscard .sc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.statuscard .sc-stage { flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--sc-c); }
.statuscard .sc-big { flex: none; font-size: 17px; font-weight: 800; color: var(--sc-c); }
.statuscard:not(.sc-green):not(.sc-amber):not(.sc-red) .sc-big { text-decoration: line-through; text-decoration-thickness: 1px; }   /* cancelled */
.statuscard .sc-days .chip { background: #fff; border: 1px solid var(--sc-chip); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--sc-c); padding: 1px 8px; }
.statuscard .sc-days .chip.bad { color: #9b2c1f; border-color: #eea59d; }
.statuscard .sc-dmeta { flex: none; font-size: 12px; color: #5d6b62; margin-left: -4px; }
.statuscard .sc-dmeta:empty { display: none; }
.statuscard .sc-blockers { margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.statuscard .sc-blockers .sc-h { font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; color: var(--sc-c); }
.statuscard .sc-block { font-size: 13px; color: var(--sc-c); }
.statuscard .sc-nextl { font-size: 13px; color: #5d6b62; }
.statuscard .sc-nextl b { color: #1d2a22; font-weight: 700; }
.statuscard .sc-picks { display: block; position: relative; }
.sc-tray { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sc-tray); }
.sc-tray .sc-pick { background: transparent; border: 1px solid #1f5c3a; border-radius: 9px; padding: 5px 11px; font-size: 13px; color: #3c4a41; white-space: nowrap; }
.sc-tray .sc-pick:hover { background: #fff; }
.sc-tray .sc-pick b { color: #1d2a22; }
.statuscard.sc-red .sc-pickstage { background: #9b2c1f; color: #fff; } .statuscard.sc-red .sc-pickstage b { color: #fff; }
.statuscard.sc-red .sc-pickstage:hover { background: #86251a; }
.sc-menu { position: absolute; z-index: 999; width: 300px; max-height: 300px; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid #d6dfd9; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 4px; text-align: left; }
.sc-menu .sc-mhead { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #7a867e; padding: 8px 10px 3px; }
.sc-menu .sc-mitem { padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; color: #1d2a22; white-space: normal; overflow-wrap: anywhere; }
.sc-menu .sc-mitem:hover { background: #eef5f0; }
.sc-menu .sc-mitem.on { background: #2f7d4f; color: #ffe100; font-weight: 700; }
@media (max-width: 1150px) { .statuscard { grid-template-columns: minmax(0, 1fr); } .statuscard .sc-picks { justify-self: start; } }
@media (max-width: 700px) { .statuscard .sc-line { white-space: normal; } .statuscard .sc-top { flex-wrap: wrap; } .statuscard .sc-dmeta { margin-left: 0; } .sc-tray { flex-wrap: wrap; } .sc-menu { width: min(300px, calc(100vw - 40px)); } }

/* 4) Project name row: name + "← Projects" on the left, the project search centered. Also at the top of the Calendar. */
.pjumprow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.pjumprow .pjleft { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pjumprow h1, .pstick .pjumprow h1 { font-size: 28px; font-weight: 800; line-height: 1.1; margin: 0; }
.pstick .pjumprow .pback { margin-left: 0; }
.pjumprow .pjump, .pstick .pjumprow .pjump { position: relative; width: 420px; max-width: 100%; min-width: 0; flex: none; }
.pjump .pjicon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #2f7d4f; pointer-events: none; }
.pjump input#pjump { width: 100%; background: #eef3ef; border: 1px solid #1f5c3a; border-radius: 999px; padding: 8px 44px 8px 36px; font-size: 14px; outline: none; }
.pjump input#pjump:focus { background: #fff; border-color: #1f5c3a; box-shadow: 0 0 0 3px rgba(47,125,79,.18); }
.pjump input#pjump::-webkit-search-cancel-button { display: none; }
.pjump kbd, #pjumpres kbd { font: inherit; font-size: 11px; line-height: 1; background: #fff; border: 1px solid #d6dfd9; border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; color: #5d6b62; }
.pjump .pjkbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pjump input#pjump:focus ~ .pjkbd { opacity: 0; }
#pjumpres { top: calc(100% + 6px); left: 0; right: auto; width: 100%; min-width: 420px; max-height: none; overflow: visible; background: #fff; border: 1px solid #d6dfd9; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.16); padding: 6px; z-index: 60; }
#pjumpres .pjhead { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #7a867e; padding: 4px 10px 6px; }
#pjumpres a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; border-bottom: 0; color: #1d2a22; text-decoration: none; }
#pjumpres a:hover, #pjumpres a.on { background: #eef5f0; }
#pjumpres .pjmain { flex: 1; min-width: 0; display: grid; }
#pjumpres .pjmain b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pjumpres .pjsub { font-size: 12px; color: #6b7a70; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pjumpres .pjstage { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: #dcefe2; color: #2f7d4f; white-space: nowrap; }
#pjumpres a.on .pjstage { background: #2f7d4f; color: #ffe100; }
#pjumpres mark { background: #fff3a6; color: inherit; border-radius: 3px; padding: 0 1px; }
#pjumpres .pjmsg { padding: 8px 10px; font-size: 13px; color: #6b7a70; }
#pjumpres .pjfoot { border-top: 1px solid #edf2ee; margin-top: 4px; padding: 7px 10px 3px; font-size: 11px; color: #7a867e; }
#pjumpres .pjfoot span { margin-left: 12px; }
.calsearch { margin-bottom: 12px; }
@media (max-width: 900px) { .pjumprow { grid-template-columns: minmax(0, 1fr); } .pjumprow > span:empty { display: none; } .pjumprow .pjump, .pstick .pjumprow .pjump { width: 100%; } #pjumpres { min-width: 0; } .pjump .pjkbd { display: none; } .pjumprow h1, .pstick .pjumprow h1 { font-size: 22px; } }

/* 5) Right side panel, Expand all / Hide empty fields, sections and Alerts (project page only: .side, .psec, .psecgroup, .secbtns). */
.side > .panel { background: #fff; border: 1px solid #d9dfd8; border-left: 5px solid #2f7d4f; border-radius: 12px; padding: 12px 14px; box-shadow: none; }
.side > .panel h2 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #2f7d4f; margin: 0 0 8px; }
.side > .panel > .row:first-child { align-items: center; margin-bottom: 6px; }
.side > .panel > .row:first-child h2 { margin: 0; }
.side button, .side a.btn, .side a.gdrive { font: inherit; font-size: 13px; background: #eef3ef; border: 0; border-radius: 999px; padding: 6px 13px; color: #1d2a22; cursor: pointer;
  box-shadow: none; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.side button:hover, .side a.btn:hover { background: #e3ece6; }
.side #addtask, .side #addnote, .side button.primary { background: #2f7d4f; color: #ffe100; font-weight: 700; }
.side #addtask:hover, .side #addnote:hover, .side button.primary:hover { background: #286b44; }
.side .tlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.side .tlist li { background: #f6f9f7; border: 0; border-radius: 10px; padding: 8px 10px; display: flex; gap: 10px; align-items: flex-start; }
.side .tlist li.muted { background: transparent; padding: 4px 0; }
.side .tlist input[type=checkbox] { accent-color: #2f7d4f; width: 16px; height: 16px; margin-top: 2px; flex: none; }
.side .tlist .subj { font-weight: 700; }
.side .tlist .tedit { background: transparent; padding: 0 4px; color: #7a867e; }
.side .tlist .sub { font-size: 12px; color: #6b7a70; margin-top: 2px; }
.side .chip.warn { background: #fff4d9; color: #7a5600; border: 1px solid #f2c25c; border-radius: 999px; font-weight: 700; font-size: 11px; padding: 1px 8px; }
.side .commsbtns { display: flex; flex-wrap: wrap; gap: 2px; background: #eef3ef; border-radius: 12px; padding: 4px; }
.side .commsbtns button { background: transparent; border-radius: 9px; padding: 6px 10px; }
.side .commsbtns button:hover:not(:disabled) { background: #fff; }
.side #notesubj, .side #note, .side select { font: inherit; font-size: 13px; background: #eef3ef; border: 1px solid #c9d6cd; border-radius: 10px; padding: 7px 11px; outline: none; color: #1d2a22; box-sizing: border-box; }
.side #notesubj { width: 100%; margin-bottom: 6px; }
.side #note { width: 100%; min-height: 64px; }
.side select { border-radius: 999px; padding: 5px 10px; }
.side #notesubj:focus, .side #note:focus, .side select:focus { background: #fff; border-color: #ffe100; box-shadow: 0 0 0 3px rgba(47,125,79,.18); }
/* Right column chips (public/sidechips.js): sticky light green box at the top of the column, 8px below the app's sticky header rows. */
.side > .sidechips { position: sticky; top: calc(var(--toph, 52px) + var(--tabh, 0px) + var(--pstickh, 0px) + 8px); z-index: 3; margin: 0 0 14px;
  background: #eef3ef; border: 1px solid #c9d6cd; border-radius: 12px; padding: 12px; gap: 8px; justify-content: center; }   /* rows centred, like the Details section chips */
/* Notes filters: category row, then who created it (public/app.js notesFeed). */
.side .notefilter { margin: 8px 0 12px; }
.side .notewho { margin: 0 0 12px; }
.side .notesfeed .note { background: #f6f9f7; border: 0; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.side .notesfeed .nhead { font-size: 11px; color: #6b7a70; gap: 6px; align-items: flex-start; flex-wrap: nowrap; }
/* Note header: name, time and category on the left (they wrap); Read / Edit / Delete stay on the right of the same line. */
.notesfeed .nhead .nmeta { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.notesfeed .nhead .nacts { flex: none; display: flex; gap: 4px; white-space: nowrap; }
/* Edited by someone other than the creator, and not yet read by you (db/0103_note_reads.sql). */
.side .notesfeed .note.flag { background: #fdecec; border-left: 4px solid #d32f2f; }
.notesfeed .chip.noteflag { background: #d32f2f; color: #fff; font-weight: 600; margin: 0 0 6px; }
.side .notesfeed .noteread { font-size: 11px; padding: 3px 9px; background: #d32f2f; border: 1px solid #d32f2f; color: #fff; font-weight: 700; }
.side .notesfeed .noteread:hover { background: #b71c1c; }
/* One note large (click a note, public/app.js): the note in the shared pop-out, bigger text; Read / Edit / Delete work there too. */
.pgrid > .side .notesfeed .note { cursor: pointer; }
.pgrid > .side .notesfeed .note:hover { box-shadow: 0 0 0 2px rgba(47,125,79,.25); }
.modal-box.notepopbox { width: min(760px, 100%); padding: 16px 20px; }
.modal.notepopwrap .modal-box.notepopbox { margin: auto 0; }   /* centred top to bottom; a long note still scrolls from its top */
@media (min-width: 1001px) { .modal.notepopwrap { justify-content: flex-end; padding-right: var(--popright, 16px); } }   /* toward the right column */
.notepopbox .notepop-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #2f7d4f; }
.notepopbox .notepop-top button { text-transform: none; letter-spacing: 0; white-space: nowrap; flex: none; }
.notepopbox .notesfeed { max-height: none; }
.notepopbox .notesfeed .note { font-size: 16px; line-height: 1.55; padding: 14px 18px; margin: 0; }
.notepopbox .notesfeed .nsubj { font-size: 19px; }
.notepopbox .notesfeed .nhead { font-size: 13px; }
.notepopbox .notesfeed .nhead .when { font-size: 13px; }
.notepopbox .notesfeed :is(.noteread, .noteedit, .notedel) { font-size: 13px; padding: 5px 12px; }
.notepopbox .notesfeed .nedit .rtein { min-height: 160px; }
.side .notesfeed .nhead select { font-size: 11px; padding: 2px 8px; background: #fff; }
.side .notesfeed .noteedit, .side .notesfeed .notedel { font-size: 11px; padding: 3px 9px; background: #fff; border: 1px solid #d9dfd8; }
.side .notesfeed .notedel { color: #9b2c1f; border-color: #eea59d; }
.side .notesfeed .notedel:hover { background: #fdeceb; }
.side .pvlinks { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

.secbtns { display: inline-flex; gap: 4px; background: #eef3ef; border-radius: 12px; padding: 4px; float: right; }
.secbtns button { font: inherit; font-size: 14px; color: #1d2a22; background: #dcefe2; border: 1px solid #1f5c3a; border-radius: 9px; padding: 6px 12px; cursor: pointer; box-shadow: none;
  display: inline-flex; align-items: center; gap: 6px; }
.secbtns button:hover { background: #cfe6d6; }
#expandall::before { content: "⇕"; font-size: 11px; opacity: .8; }
#hideempty::before { content: "◌"; font-size: 11px; opacity: .8; }
#collapseall::before { content: "⊟"; font-size: 11px; opacity: .8; }

details:is(.psec, .psecgroup) { background: #fff; border: 1px solid #d9dfd8; border-left: 5px solid #2f7d4f; border-radius: 12px; box-shadow: none; }
details:is(.psec, .psecgroup) > summary h2 { font-size: 15px; font-weight: 800; color: #1d2a22; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details:is(.psec, .psecgroup) > summary h2::before { color: #2f7d4f; }   /* the ▸ marker */
details:is(.psec, .psecgroup) > summary:hover h2 { color: #2f7d4f; }
details:is(.psec, .psecgroup)[open] > summary { border-bottom: 1px solid #edf2ee; margin-bottom: 8px; padding-bottom: 8px; }
details:is(.psec, .psecgroup) .count { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: #dcefe2; color: #2f7d4f; }
details:is(.psec, .psecgroup) summary a.gdrive { background: #eef3ef; border: 0; border-radius: 999px; padding: 4px 12px; }
details:is(.psec, .psecgroup) > summary button, details:is(.psec, .psecgroup) > summary .btn { font: inherit; font-size: 13px; font-weight: 500; background: #eef3ef; border: 0; border-radius: 999px;
  padding: 5px 12px; color: #1d2a22; box-shadow: none; }
details:is(.psec, .psecgroup) > summary button:hover { background: #e3ece6; }
details:is(.psec, .psecgroup) > summary button.primary { background: #2f7d4f; color: #ffe100; font-weight: 700; }
details:is(.psec, .psecgroup) > summary .chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: #eef3ef; color: #3c4a41; border: 0; }
.wchead { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wchead .chip { background: #fff4d9; color: #7a5600; }
details.psecgroup details.psec { border: 1px solid #e3ebe5; border-left: 3px solid #9fd8b1; background: #fbfdfb; border-radius: 10px; }
details.psecgroup details.psec > summary h2 { font-size: 14px; }
details:is(.psec, .psecgroup) .fields input:not([type=checkbox]):not([type=radio]),
details:is(.psec, .psecgroup) .fields select,
details:is(.psec, .psecgroup) .fields textarea { background: #eef3ef; border: 1px solid #c9d6cd; border-radius: 9px; outline: none; box-shadow: none; }
details:is(.psec, .psecgroup) .fields input:focus,
details:is(.psec, .psecgroup) .fields select:focus,
details:is(.psec, .psecgroup) .fields textarea:focus { background: #fff; border-color: #ffe100; box-shadow: 0 0 0 3px rgba(47,125,79,.18); }
details:is(.psec, .psecgroup) .fields label { color: #5d6b62; }
details:is(.psec, .psecgroup) input[type=checkbox] { accent-color: #2f7d4f; }
/* the auto-save colors still show on top of the soft fill */
details:is(.psec, .psecgroup) .fields label.dirty :is(input, select, textarea) { border-color: var(--sun); background: #fffbf2; }

/* Alerts box. No open alerts: the green theme of the project page (calm, ✓). Open alerts: red. The box's red outline and
   pink background are Rick's UI standard at the end of this file (never restyled here); these rules only colour what is
   inside the box (icon, heading, count, input, buttons, rows) so the whole box changes together. */
details.psec[data-sec=Alerts]:not(.hasalert) { border: 1px solid #b9d9c4; border-left: 5px solid #2e7d4f; background: #f3f9f5; }
details.psec[data-sec=Alerts] > summary h2 { color: #1d5a35; }
details.psec.fixed[data-sec=Alerts] > summary h2::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: #2e7d4f; color: #fff; font-size: 11px; font-weight: 900; transform: none; }
details.psec.fixed.hasalert[data-sec=Alerts] > summary h2::before { content: "!"; background: #c62828; font-size: 12px; }
details.psec[data-sec=Alerts][open] > summary { border-bottom-color: #cfe5d6; }
details.psec[data-sec=Alerts] .count { background: #dcefe2; color: #1d5a35; }
details.psec[data-sec=Alerts] > summary button { background: #fff; border: 1px solid #9cc8ad; border-radius: 999px; padding: 3px 11px; font-size: 12px; text-decoration: none; color: #1d5a35; }
details.psec.hasalert[data-sec=Alerts] > summary button { border-color: #e9a29b; color: #8b1d12; }
.alertadd { display: flex; gap: 8px; align-items: center; }
details:is(.psec, .psecgroup) .fields #newalert { flex: 1; background: #fff; border: 1px solid #9cc8ad; border-radius: 999px; padding: 8px 14px; }
details:is(.psec, .psecgroup) .fields #newalert:focus { border-color: #2e7d4f; box-shadow: 0 0 0 3px rgba(46,125,79,.2); }
details.psec.hasalert .fields #newalert { border-color: #e9a29b; }
details.psec.hasalert .fields #newalert:focus { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198,40,40,.15); }
#addalert { background: #2f7d4f; color: #ffe100; font-weight: 700; border: 0; border-radius: 999px; padding: 8px 16px; }
#addalert:hover { background: #286b44; }
.alertbox .muted { color: #4f7a60; }
details.psec.hasalert .alertlist li { border-color: #f1b8b2; background: #fff; }
details.psec.hasalert[data-sec=Alerts] > summary :is(.chip, .secst) { background: #fde0dd; color: #8b1d12; }

/* Open project tabs (top bar): dark green outline and ✕; the open project's tab light green (like Expand all). */
a.ptab { border: 1.5px solid #1f5c3a; border-bottom: 0; border-radius: 8px 8px 0 0; margin-right: 4px; }
a.ptab:hover { background: #eef5f0; text-decoration: none; }
a.ptab [data-ptabx] { color: #1f5c3a; opacity: 1; font-weight: 700; }
a.ptab [data-ptabx]:hover { background: #dcefe2; border-radius: 50%; color: #1f5c3a; }
a.ptab.is-current { background: #dcefe2; color: #1d2a22; font-weight: 700; box-shadow: none; }
a.ptab.is-current [data-ptabx] { color: #1f5c3a; }
a.ptab.is-current [data-ptabx]:hover { background: #cfe6d6; color: #1f5c3a; }

/* Installer picker inside the section (moved out of the section header) */
.ctrrow { display: flex; margin: 0 0 10px; }
.ctrrow .ctrbtn { margin-left: 0; background: #eef3ef; border: 1px solid #d9dfd8; border-radius: 999px; padding: 4px 14px 4px 8px; }
.ctrrow .ctrbtn:hover { background: #e3ece6; border-color: #2f7d4f; }
.ctrrow .ctrbtn.empty { background: #fff4d9; border-color: #f2c25c; color: #7a5600; }

/* Section header status chip (replaces the "filled / total" count) */
.secst { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: #eef3ef; color: #5d6b62; white-space: nowrap; }
.secst.ok { background: #dcefe2; color: #2f7d4f; }
.secst.warn { background: #fff4d9; color: #7a5600; }
.secst.bad { background: #fdeceb; color: #9b2c1f; }

/* MPU group: utility / AHJ card buttons inside the group, above its steps */
.mpulinks { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.mpulinks button { font: inherit; font-size: 13px; background: #eef3ef; border: 0; border-radius: 999px; padding: 5px 12px; color: #1d2a22; cursor: pointer; }
.mpulinks button:hover { background: #e3ece6; }
details.psecgroup[data-group="mpu"] > .hoasteps { margin: 0 0 10px; }
/* Headers show one status chip only: the scheduling / appointment date chips stay inside the sections */
details:is(.psec, .psecgroup) > summary .schhdr { display: none; }
/* Expand all / Hide empty fields: under the Alerts section */
.secbar.secbar-in { margin: 0 0 14px; }

/* Project header row: SL # · address · phone · email, then the Dealer … Installer pills on the same line */
.pline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.pline .paddr { font-size: 16.5px; }
.pline .pinfo { margin-top: 0; }
.phead > div:first-child { flex: 1 1 0; min-width: 0; } .phead > .spacer { display: none; }   /* the header row runs the full width (an ON HOLD box stays at its right)… */
.pline .pinfo { margin-left: auto; }                          /* …so the Dealer … Installer pills sit at its right end */

/* ON HOLD / CANCELLED / JOB IN JEOPARDY: a stamp laid over the header (tilted, see-through, clicks pass through),
   so the address row and the Dealer … Installer pills stay where they are */
.phead { position: relative; }
.phead > .alarm { position: absolute; z-index: 3; right: 400px; top: 100%; transform: translateY(-28%) rotate(-6deg); min-width: 0; width: auto;
  padding: 6px 24px; background: rgba(253, 236, 234, .6); border-width: 4px; pointer-events: none; }   /* over the stage bar */
.phead > .alarm .alarm-name { font-size: 38px; white-space: nowrap; }
.phead > .alarm .alarm-why { font-size: 13px; max-width: 340px; }
@media (max-width: 1100px) { .phead > .alarm { right: 16px; } .phead > .alarm .alarm-name { font-size: 28px; } }

/* Dealer … Installer pills: thin dark green outline; the row's text sizes in one place */
.pinfo > span:not(.pinfo-sub):not(.pinfo-hoa):not(.pinfo-sgip) { border: 1px solid #1f5c3a; }
.pline { --pl-addr: 19px; --pl-val: 16px; --pl-lab: 11px; }   /* size option B */
.pline .paddr { font-size: var(--pl-addr); }
.pline .pinfo > span b { font-size: var(--pl-val); }
.pline .pinfo > span .muted { font-size: var(--pl-lab); }

/* Side column (Open tasks …) starts level with the Alerts box */
@media (min-width: 1001px) { .pgrid > .side { margin-top: 10px; } }   /* the tab row now runs above both columns; this matches the gap above Alerts */

/* Tab row (Details … History) across the full page width: a little bigger, a small gap between tabs, and free room at the right for more tabs later */
.tabs.ptray { gap: 5px; padding: 5px; margin-bottom: 12px; }
.tabs.ptray button { flex: 0 0 auto; font-size: 14.5px; padding: 7px 11px; }
.tabs.ptray button .n { font-size: 12px; }

/* Name row: "← Projects" first (larger), then the project name and its SL #; the search moves right when the name needs the room */
.pjumprow { grid-template-columns: minmax(max-content, 1fr) auto 1fr; }
.pjumprow .pjleft { gap: 14px; align-items: baseline; }
.pjumprow .pjleft .pback, .pstick .pjumprow .pback { font-size: 17px; font-weight: 600; color: #2f7d4f; white-space: nowrap; }
.pjumprow .pjleft .pnum { font-size: 18px; font-weight: 600; color: #5d6b62; white-space: nowrap; }
.pline { --pl-addr: 17px; }   /* address · phone · email a little smaller (pills keep their size) */
@media (max-width: 900px) { .pjumprow { grid-template-columns: minmax(0, 1fr); } .pjumprow .pjleft { flex-wrap: wrap; } }

/* Welcome call script: a panel docked on the right that stays open until Close / ✕ (it doesn't block the page) */
.wcscriptpanel { position: fixed; z-index: 900; right: 16px; top: calc(var(--toph, 52px) + 12px); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - var(--toph, 52px) - 28px);
  overflow-y: auto; background: #fff; border: 1px solid #d9dfd8; border-left: 5px solid #2f7d4f; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 14px 16px; }
.wcscriptpanel h2 { margin: 0 70px 10px 0; font-size: 16px; font-weight: 800; color: #1d2a22; }
.wcscriptpanel .wcsp-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #1f5c3a; background: #eef3ef; color: #1f5c3a; font-weight: 700; cursor: pointer; padding: 0; }
.wcscriptpanel .wcsp-x:hover { background: #dcefe2; }
.wcscriptpanel .wcsp-min { position: absolute; top: 10px; right: 44px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #1f5c3a; background: #eef3ef; color: #1f5c3a; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; }
.wcscriptpanel .wcsp-min:hover { background: #dcefe2; }
/* minimized: just the title bar, bottom right */
.wcscriptpanel.min { top: auto; bottom: 16px; width: 300px; max-height: none; overflow: hidden; cursor: pointer; padding: 10px 14px; }
.wcscriptpanel.min h2 { margin: 0 70px 0 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcscriptpanel.min > :not(h2):not(.wcsp-x):not(.wcsp-min) { display: none; }
.wcscriptpanel.min .wcsp-x, .wcscriptpanel.min .wcsp-min { top: 7px; }

/* Header: address line on the left, the Dealer … Installer pills on their own row below it (also left) */
.pline { flex-direction: column; align-items: flex-start; gap: 8px; }
.pline .pinfo { margin-left: 0; }
.pline .pinfo { align-self: center; }   /* the Dealer … Installer row centered under the address line */

/* ===== Project › Details: Welcome & Site Survey (#onbhub) — projhubs.js ===== */
#onbhub { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 14px; }
#onbhub .ob-hero { background: #9cc8ad; color: var(--ink); padding: 16px 18px; min-height: 159px; display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 16px; align-items: stretch; cursor: pointer; }
#onbhub .ob-id { display: flex; gap: 12px; align-items: flex-start; align-self: center; }
#onbhub .ob-avcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#onbhub .ob-av { width: 46px; height: 46px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; }
#onbhub .ob-open { background: #fff; border: 1px solid rgba(47,125,79,.35); color: var(--brand); font: inherit; font-size: 11px; font-weight: 700; padding: 2px 0; width: 46px; border-radius: 6px; cursor: pointer; }
#onbhub.collapsed .ob-open { background: #e9b949; border-color: #e9b949; color: #15241b; }
#onbhub .ob-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
#onbhub .ob-sub { font-size: 12.5px; color: #24362b; margin-top: 3px; }
#onbhub .ob-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#onbhub .ob-step { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.55); border: 1px solid rgba(47,125,79,.25); color: var(--ink); border-radius: 999px; padding: 3px 10px 3px 4px; font: inherit; font-size: 12px; cursor: pointer; }
#onbhub .ob-step:hover { background: rgba(255,255,255,.85); }
#onbhub .ob-step b { background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 800; }
#onbhub .ob-step.on { background: var(--brand); color: #fff; border-color: var(--brand); }
#onbhub .ob-step.on b { background: #fff; color: var(--brand); }
#onbhub .ob-step i { font-style: normal; opacity: .85; }
#onbhub .ob-step .dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa79f; }
#onbhub .ob-step .dot.ok { background: #2f9a5a; } #onbhub .ob-step .dot.warn { background: #d48a00; } #onbhub .ob-step .dot.bad { background: var(--bad); }
#onbhub .ob-step.on .dot.ok { background: #8fe0a8; }
#onbhub .ob-chips, #syshub .sy-chips { display: grid; grid-template-columns: repeat(2, minmax(0,210px)); gap: 8px; align-self: center; justify-self: end; }
/* Header buttons in every combined section: the same light green as the Customer & Deal Arcasa / Drive buttons. */
#onbhub .ob-chip, #onbhub .ob-chips .ctrbtn, #syshub .sy-chip, #syshub .sy-chips .ctrbtn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; width: 100%; padding: 0 12px; border-radius: 999px; background: #e7f2ea; color: #15241b; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
#onbhub .ob-chip:hover, #onbhub .ob-chips .ctrbtn:hover, #syshub .sy-chip:hover, #syshub .sy-chips .ctrbtn:hover { background: #d6ecdc; }
#onbhub .ob-chip span, #syshub .sy-chip span { font-weight: 500; opacity: .92; overflow: hidden; text-overflow: ellipsis; }
:is(#onbhub .ob-chips, #syshub .sy-chips) .ctrrow { margin: 0; display: block; }
:is(#onbhub .ob-chips, #syshub .sy-chips) .ctrbtn .ctricon { display: none; }
:is(#onbhub .ob-chips, #syshub .sy-chips) .ctrbtn .ctrtxt { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 5px; }
:is(#onbhub .ob-chips, #syshub .sy-chips) .ctrbtn .ctrtxt :is(small, b) { display: inline !important; line-height: 1 !important; margin: 0 !important; font-size: 13px; color: #15241b; text-transform: none; letter-spacing: 0; }
:is(#onbhub .ob-chips, #syshub .sy-chips) .ctrbtn .ctrtxt small { font-weight: 500; opacity: .92; }
:is(#onbhub .ob-chips, #syshub .sy-chips) .ctrbtn .ctrtxt small::after { content: ':'; }
#onbhub.collapsed .ob-body { display: none; }
#onbhub .ob-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 12px; }
#onbhub .ob-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 11px 14px; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; display: flex; gap: 7px; align-items: center; }
#onbhub .ob-tab.on { color: var(--ink); border-bottom-color: var(--brand); }
#onbhub .ob-tab .n { width: 18px; height: 18px; border-radius: 50%; background: var(--chip); font-size: 11px; display: grid; place-items: center; }
#onbhub .ob-tab.on .n { background: var(--brand); color: #fff; }
#onbhub .ob-pane { display: none; padding: 14px 16px; } #onbhub .ob-pane.on { display: block; }
#onbhub .ob-pane > details.psec { margin: 0 0 10px; }
#onbhub .ob-next { display: flex; justify-content: flex-end; margin-top: 10px; }
#onbhub .ob-next button { background: var(--chip); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; color: var(--brand); }
#onbhub .ob-layout { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; background: #fbfcfb; }
#onbhub .ob-layout b { font-size: 13px; } #onbhub .ob-layout small { color: var(--muted); font-size: 12px; display: block; }
#onbhub .ob-layout .sp { flex: 1; }
#onbhub .ob-layout :is(a, button) { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; cursor: pointer; }

/* ===== Project › Details: System, MPU & Battery (#syshub) — projhubs.js ===== */
#syshub { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 14px; }
#syshub .sy-hero { background: rgba(47,125,79,.82); color: #fff; padding: 16px 18px; min-height: 159px; display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 16px; align-items: stretch; cursor: pointer; }
#syshub .sy-id { display: flex; gap: 12px; align-items: flex-start; align-self: center; }
#syshub .sy-avcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#syshub .sy-av { width: 46px; height: 46px; border-radius: 10px; background: #e9b949; color: #15241b; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
#syshub .sy-open { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font: inherit; font-size: 11px; font-weight: 700; padding: 2px 0; width: 46px; border-radius: 6px; cursor: pointer; }
#syshub.collapsed .sy-open { background: #e9b949; border-color: #e9b949; color: #15241b; }
#syshub .sy-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
#syshub .sy-sub { font-size: 13px; opacity: .96; margin-top: 3px; }
#syshub .sy-sub2 { font-size: 12px; color: #e3f1e8; margin-top: 2px; }
#syshub .sy-sub2 .warn { color: #ffd27a; font-weight: 700; }
#syshub.collapsed .sy-body { display: none; }
#syshub .sy-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
#syshub .sy-sec { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; overflow: hidden; background: #fff; }
#syshub .sy-sec.off { border-left-color: #c9d3cc; }
#syshub .sy-sechead { display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 12px; background: #f3f8f4; cursor: pointer; }
#syshub .sy-sec.off .sy-sechead { background: #f6f7f6; }
#syshub .sy-sectitle { display: flex; align-items: center; gap: 8px; min-width: 150px; }
#syshub .sy-sectitle b { font-size: 15px; }
#syshub .sy-secst { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); font-weight: 600; white-space: nowrap; }
#syshub .sy-secst.ok { background: #dcefe2; color: #1d5a35; } #syshub .sy-secst.warn { background: #fff3dc; color: var(--warn); }
#syshub .sy-secst:not(.ok)::before { content: 'Next: '; font-weight: 500; } #syshub .sy-sec.off .sy-secst::before { content: none; }
#syshub .sy-tog { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--brand); font-size: 13px; transition: transform .15s; margin-right: -4px; }
#syshub .sy-sec.shut .sy-tog { transform: rotate(-90deg); }
#syshub .sy-sec.shut .sy-secbody { display: none; }
#syshub .sy-steps { display: flex; gap: 4px; min-width: 0; }
#syshub .sy-step { all: unset; cursor: pointer; flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; line-height: 1.25; }
#syshub .sy-step b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#syshub .sy-step small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#syshub .sy-step.done { background: #dcefe2; border-color: #dcefe2; }
#syshub .sy-step.done b::before { content: '✓ '; color: var(--brand); }
#syshub .sy-step.cur { background: #fff3dc; border-color: var(--sun); }
#syshub .sy-step.gap { border: 1px dashed #d9a441; }
#syshub .sy-step.gap small { color: var(--warn); }
#syshub .sy-offnote { font-size: 12.5px; color: var(--muted); }
#syshub .sy-offnote button { all: unset; cursor: pointer; color: var(--brand); font-weight: 700; margin-left: 6px; }
#syshub .sy-secbody { padding: 12px 14px 14px; border-top: 1px solid var(--line); }
#syshub .sy-pane > details.psec { margin: 0 0 10px; }
#syshub .sy-pane > .fields { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px 14px; }
#syshub .sy-pane > .fields > label { grid-column: auto !important; }
#syshub .sy-pane > .fields > :is(label:has(textarea), .flabel, .fblock) { grid-column: 1 / -1 !important; }
#syshub .sy-pane > .fields :is(input, select) { width: 100%; box-sizing: border-box; }
#syshub [data-p="mpu"] > .hoasteps { display: none; }
/* numbered groups (System → Electrical intake → Design; MPU in workflow order) */
#syshub .sy-grp { margin: 0 0 14px; }
#syshub .sy-grp:last-child { margin-bottom: 0; }
#syshub .sy-grp + .sy-grp { border-top: 1px dashed var(--line); padding-top: 12px; }
#syshub .sy-grph { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
#syshub .sy-grph i, #syshub .sy-num { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-grid; place-items: center; font-size: 11px; letter-spacing: 0; }
#syshub .sy-grph em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11.5px; color: var(--muted); background: var(--chip); border-radius: 999px; padding: 1px 8px; }
#syshub [data-p="mpu"] > details.psec { border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; margin: 0 0 14px !important; }
#syshub [data-p="mpu"] > details.psec > summary { list-style: none; pointer-events: none; padding: 0 0 8px !important; }
#syshub [data-p="mpu"] > details.psec > summary::-webkit-details-marker { display: none; }
#syshub [data-p="mpu"] > details.psec > :is(summary, summary h2)::before, #syshub [data-p="mpu"] > details.psec > summary::marker { display: none !important; content: none !important; }
#syshub [data-p="mpu"] > details.psec > summary h2 { font-size: 12px !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 8px; margin: 0; }
#syshub [data-p="mpu"] > details.psec > summary h2 :is(.secst, .chip) { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
#syshub [data-p="mpu"] > details.psec + details.psec, #syshub [data-p="mpu"] > .sy-grp { border-top: 1px dashed var(--line); padding-top: 12px !important; }
#syshub [data-p="mpu"] .mpulinks { margin: 0 0 12px; }
#syshub [data-p="mpu"] details .fields > label:has(.sy-date) { grid-column: span 3 !important; }
/* date fields as calendar buttons */
#syshub .sdate .sdq, #syshub .sdate .sdmeta { display: none !important; }
#syshub .sdate { position: relative; display: block; }
#syshub label:has(> input[type=date]), #syshub label:has(.sdate) { position: relative; }
#syshub input[type=date] { position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 38px !important; opacity: 0 !important; pointer-events: none; margin: 0 !important; }
#syshub .sy-date { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 240px; height: 38px; padding: 0 12px; border: 1px solid #c9d6cd; border-radius: 9px; background: #eef3ef; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
#syshub .sy-date:hover { border-color: var(--brand); color: var(--brand); }
#syshub .sy-date.set { color: var(--ink); }
#syshub .sy-date .ic { font-size: 14px; }
#syshub .sy-date .x { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
#syshub .sy-date .x:hover { background: #fff; color: var(--bad); }
#syshub .sy-date:not(.set) .x { display: none; }
@media (max-width: 1100px) {
  #onbhub .ob-hero, #syshub .sy-hero { grid-template-columns: 1fr; }
  #onbhub .ob-chips, #syshub .sy-chips { justify-self: stretch; }
  #syshub .sy-sechead { grid-template-columns: auto 1fr; }
  #syshub .sy-steps { grid-column: 1 / -1; flex-wrap: wrap; }
  #syshub .sy-pane > .fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* One search box for the whole CRM, the same as the Projects page: 260px wide, compact, no label, no icon. Full width on a phone. */
input[type=search].sbar { width: 260px; flex: 0 1 260px; max-width: 100%; padding: 5px 8px; border-radius: 7px; }
.taskbar .sbar { align-self: flex-end; }
@media (max-width: 760px) { input[type=search].sbar { flex: 1 1 100%; width: 100%; } }

/* ===== Project › Details: Customer & Deal (#crmhub) — crmhub.js ===== */
#crmhub { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 14px; }
#crmhub .ch-hero { position: relative; background: rgba(47,125,79,.82); color: #fff; padding: 16px 18px; display: grid; grid-template-columns: max-content 1fr auto; gap: 16px; align-items: stretch; cursor: pointer; }
#crmhub .ch-id { display: flex; gap: 12px; align-items: flex-start; }
#crmhub .ch-avcol { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
#crmhub .ch-av { width: 46px; height: 46px; border-radius: 10px; background: #e9b949; color: #15241b; font-weight: 800; font-size: 17px; display: grid; place-items: center; }
#crmhub .ch-open { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; font: inherit; font-size: 11px; font-weight: 700; padding: 2px 0; width: 46px; border-radius: 6px; cursor: pointer; }
#crmhub .ch-open:hover { background: rgba(255,255,255,.26); }
#crmhub.collapsed .ch-open { background: #e9b949; border-color: #e9b949; color: #15241b; }
#crmhub .ch-name { font-size: 20px; font-weight: 800; line-height: 1.2; }
#crmhub .ch-sub { font-size: 13px; margin-top: 3px; }
#crmhub .ch-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
#crmhub .ch-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.12); white-space: nowrap; }
#crmhub .ch-chip.ok { background: #d6ecdc; color: #1d5a35; font-weight: 600; }
#crmhub .ch-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
#crmhub .ch-ring { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }
#crmhub .ch-ring span { width: 30px; height: 30px; border-radius: 50%; background: #549470; display: grid; place-items: center; }
#crmhub .ch-prog b { display: block; font-size: 13.5px; } #crmhub .ch-prog small { opacity: .7; font-size: 11.5px; }
#crmhub .ch-hscope { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); text-align: center; }
#crmhub .ch-hscope small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 5px; font-weight: 700; }
#crmhub .ch-hscope div { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: center; }
#crmhub .ch-hscope span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #d6ecdc; color: #1d5a35; font-weight: 700; white-space: nowrap; }
#crmhub .ch-links { grid-column: 3; display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
/* Arcasa and Google Drive buttons: the same light green; a missing link keeps the background and only greys out. */
#crmhub .ch-link { background: #e7f2ea; color: #15241b; border-radius: 9px; padding: 8px 12px; text-decoration: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; }
#crmhub .ch-link small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
#crmhub .ch-link.off { color: #7d8a82; pointer-events: none; }
#crmhub .ch-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; padding: 14px 16px 4px; }
#crmhub .ch-stat { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; }
#crmhub .ch-stat b { display: block; font-size: 16px; } #crmhub .ch-stat small { color: var(--muted); font-size: 12px; }
#crmhub .ch-body { padding: 12px 16px 16px; }
#crmhub.collapsed .ch-stats, #crmhub.collapsed .ch-body { display: none; }
#crmhub .ch-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#crmhub.collapsed .ch-tlrow, #crmhub.collapsed .ch-ctrow { display: none; }
#crmhub .ch-body > .ch-card { border: 2px solid #1d5a35; }   /* the tabbed box: dark green outline */
#crmhub .ch-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; }
#crmhub .ch-card.tabbox.open .ch-tabs { border-bottom: 1px solid #1d5a35; }
/* Tab buttons: each opens its details below; the open one is filled dark green. */
#crmhub .ch-tab { background: var(--tint, #e7f2ea); border: 1px solid #1d5a35; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13.5px; font-weight: 700; color: #1d5a35; cursor: pointer; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
#crmhub .ch-tab:hover { background: #d6ecdc; }
#crmhub .ch-tab::after { content: '▾'; font-size: 11px; }
#crmhub .ch-tab[hidden] { display: none; }
#crmhub .ch-tab.on { background: #1d5a35; color: #fff; } #crmhub .ch-tab.on::after { content: '▴'; }
#crmhub .ch-pane { padding: 14px 16px; display: none; } #crmhub .ch-pane.on { display: block; }
#crmhub .ch-h { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--brand); text-transform: uppercase; margin: 4px 0 8px; }
#crmhub .ch-h + .fields { margin-bottom: 14px; }
#crmhub .fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 14px; }
#crmhub .fields.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
#crmhub .fields.c4[data-g="prop"] { grid-template-columns: 2fr 1.2fr .6fr .8fr; }
#crmhub .fields.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
#crmhub .fields > * { grid-column: auto; }
#crmhub .fields > .span2 { grid-column: span 2; } #crmhub .fields > .spanall { grid-column: 1 / -1; }
#crmhub .fields input, #crmhub .fields select { width: 100%; box-sizing: border-box; }
#crmhub .fields > .fblock { display: flex; flex-direction: row; align-items: center; gap: 10px; justify-content: flex-start; background: var(--chip); border-radius: 9px; padding: 8px 12px; }
#crmhub .fblock .flabel { font-weight: 700; color: var(--ink); font-size: 12.5px; margin: 0; width: auto; }
#crmhub .fblock .ownbox { display: flex; flex-direction: row; align-items: center; gap: 8px; }
#crmhub .ch-group { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin-bottom: 12px; background: #fbfcfb; }
#crmhub .ch-group .ch-h { margin-top: 0; }
#crmhub .ch-note { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
#crmhub .ch-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
#crmhub .ch-member { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
#crmhub .ch-member label { flex: 1; min-width: 0; }
#crmhub .ch-hint { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); }
#crmhub .ch-mav { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 12.5px; display: grid; place-items: center; flex: none; }
#crmhub .ch-mav.none { background: var(--chip); color: var(--muted); }
/* Contacts: one row of cards under the timeline (wraps on narrow screens). */
#crmhub .ch-ctrow { margin: 10px 16px 0; display: grid; gap: 8px; }
#crmhub .ch-ctrow .ch-h { margin: 0; }
#crmhub .ch-cts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
#crmhub .ch-ct { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
#crmhub .ch-ct > div:last-child { min-width: 0; overflow-wrap: anywhere; }
#crmhub .ch-ct .ch-mav { width: 30px; height: 30px; background: var(--chip); color: var(--brand); font-size: 11.5px; }
#crmhub .ch-ct b { font-size: 13.5px; display: block; } #crmhub .ch-ct small { color: var(--muted); font-size: 11.5px; display: block; }
#crmhub .ch-ct a { color: var(--brand); font-size: 12.5px; text-decoration: none; margin-right: 8px; }
#crmhub .ch-ct.empty b { color: var(--muted); font-weight: 500; }
/* Deal timeline: one row of steps joined by a line, above the tabs box. */
#crmhub .ch-tlrow { margin: 10px 16px 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#crmhub .ch-tlrow .ch-h { margin: 0; }
#crmhub .ch-tl { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; gap: 0; min-width: 0; }
#crmhub .ch-tl li { flex: 1; display: flex; gap: 8px; align-items: center; font-size: 13px; position: relative; padding-right: 14px; min-width: 0; }
#crmhub .ch-tl li:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--line); min-width: 16px; }
#crmhub .ch-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
#crmhub .ch-dot.done { background: var(--brand); border-color: var(--brand); } #crmhub .ch-dot.next { border-color: var(--sun); background: #fff3dc; }
#crmhub .ch-tl span { white-space: nowrap; font-weight: 600; } #crmhub .ch-tl em { font-style: normal; color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 700px) { #crmhub .ch-tl { flex-direction: column; gap: 4px; } #crmhub .ch-tl li::after { display: none; } }
@media (max-width: 1200px) { #crmhub .ch-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { #crmhub .ch-hero { grid-template-columns: 1fr; } #crmhub .ch-hscope { position: static; transform: none; text-align: left; } #crmhub .ch-hscope div { justify-content: flex-start; flex-wrap: wrap; } #crmhub .ch-links { grid-column: auto; } }
@media (max-width: 700px) { #crmhub .fields, #crmhub .fields.c4, #crmhub .fields.c4[data-g="prop"] { grid-template-columns: 1fr 1fr; } }

/* ===== Project › Details: Roof (#roofhub, roofhub.js), Permit (#permithub, permithub.js) and Install & Final (#insthub, insthub.js)
   Utility & PTO (#ptohub, ptohub.js) Monitoring (#monhub) and Commission (#comhub) (both mchub.js) share these styles. Headers alternate:
   Roof light, Permit medium (overrides below), Install & Final light, Utility & PTO medium, Monitoring light, Commission medium. ===== */
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 14px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-hero { background: #9cc8ad; color: var(--ink); padding: 16px 18px; min-height: 140px; display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 16px; align-items: stretch; cursor: pointer; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-id { display: flex; gap: 12px; align-items: flex-start; align-self: center; min-width: 0; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-avcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-av { width: 46px; height: 46px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-open { background: #fff; border: 1px solid rgba(47,125,79,.35); color: var(--brand); font: inherit; font-size: 11px; font-weight: 700; padding: 2px 0; width: 46px; border-radius: 6px; cursor: pointer; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub).collapsed .rf-open { background: #e9b949; border-color: #e9b949; color: #15241b; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-sub { font-size: 13px; color: #1d2d23; margin-top: 3px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-sub2 { font-size: 12.5px; color: #24362b; margin-top: 2px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-sub2 .warn { color: var(--warn); font-weight: 700; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-warn { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-warn:empty { display: none; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips { display: grid; grid-template-columns: repeat(2, minmax(0,210px)); gap: 8px; align-self: center; justify-self: end; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chip, :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips .ctrbtn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; width: 100%; padding: 0 12px; border-radius: 999px; background: #e7f2ea; color: #15241b; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chip:hover, :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips .ctrbtn:hover { background: #d6ecdc; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chip span { font-weight: 500; opacity: .92; overflow: hidden; text-overflow: ellipsis; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips .ctrrow { margin: 0; display: block; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips .ctrbtn .ctricon { display: none; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips .ctrbtn .ctrtxt { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 5px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips .ctrbtn .ctrtxt :is(small, b) { display: inline !important; line-height: 1 !important; margin: 0 !important; font-size: 13px; color: #15241b; text-transform: none; letter-spacing: 0; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips .ctrbtn .ctrtxt small { font-weight: 500; opacity: .92; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips .ctrbtn .ctrtxt small::after { content: ':'; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub).collapsed .rf-body { display: none; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-flow { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; padding: 10px 12px; background: #f3f8f4; display: grid; gap: 8px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub).off .rf-flow { border-left-color: #c9d3cc; background: #f6f7f6; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-flowh { display: flex; align-items: center; gap: 8px; } :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-flowh b { font-size: 15px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-st { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); font-weight: 600; white-space: nowrap; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-st.ok { background: #dcefe2; color: #1d5a35; } :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-st.warn { background: #fff3dc; color: var(--warn); }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-steps { display: flex; gap: 4px; min-width: 0; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step { all: unset; cursor: pointer; flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; line-height: 1.25; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step.done { background: #dcefe2; border-color: #dcefe2; } :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step.done b::before { content: '✓ '; color: var(--brand); }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step.cur { background: #fff3dc; border-color: var(--sun); }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step.gap { border: 1px dashed #d9a441; } :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step.gap small { color: var(--warn); }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step:focus-visible, :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chip:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-offnote { font-size: 12.5px; color: var(--muted); }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-cards > details.psec { margin: 0 0 10px; }
:is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-cards > details.psec:last-child { margin-bottom: 0; }
@media (max-width: 1100px) { :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-hero { grid-template-columns: 1fr; } :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-chips { justify-self: stretch; } :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-steps { flex-wrap: wrap; } :is(#roofhub, #permithub, #insthub, #ptohub, #monhub, #comhub) .rf-step { flex: 1 1 120px; } }
/* Permit and Utility & PTO: medium green header with white text, like Customer & Deal and System, MPU & Battery. */
:is(#permithub, #ptohub, #comhub) .rf-hero { background: rgba(47,125,79,.82); color: #fff; }
:is(#permithub, #ptohub, #comhub) .rf-av { background: #e9b949; color: #15241b; font-size: 13px; }
:is(#permithub, #ptohub, #comhub) .rf-open { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
:is(#permithub, #ptohub, #comhub).collapsed .rf-open { background: #e9b949; border-color: #e9b949; color: #15241b; }
:is(#permithub, #ptohub, #comhub) :is(.rf-sub, .rf-sub2) { color: #eef7f1; }
:is(#permithub, #ptohub, #comhub) .rf-sub2 .warn, :is(#permithub, #ptohub, #comhub) .rf-sub .warn { color: #ffd27a; }
:is(#permithub, #ptohub, #comhub) .rf-cards > details.psec > summary { display: none; }

/* "Not in scope" chip next to a combined section's name (projhubs.js scopeChip): System scope turned that part off. */
.scopechips { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.scopechips:empty { display: none; }
.scopechip { font-size: 11.5px; font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: 999px; background: #fff3dc; color: #8a4b00; border: 1px solid #f1d29a; white-space: nowrap; letter-spacing: 0; }
.scopechip::before { content: '⊘ '; }

/* System, MPU & Battery › Battery: [qty, narrow] [Battery 1 model] [Battery 2 model] … [Type of backup] on one row (projhubs.js batteryRow). */
#syshub .batrow { grid-column: 1 / -1 !important; display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
#syshub .batrow > label { margin: 0; min-width: 0; }
#syshub .batrow > label.batqty { flex: 0 0 80px; white-space: nowrap; }
#syshub .batrow > label.batqty input { width: 80px !important; text-align: center; padding-left: 4px; padding-right: 4px; -moz-appearance: textfield; }
#syshub .batrow > label.batqty input::-webkit-inner-spin-button { margin-left: -14px; }
#syshub .batmodels { flex: 1 1 auto; display: flex; gap: 8px; min-width: 0; }
#syshub .batmodels > label { flex: 1 1 0; min-width: 120px; margin: 0; }
#syshub .batrow > label.batback { flex: 0 1 220px; }
@media (max-width: 760px) { #syshub .batrow { flex-wrap: wrap; } #syshub .batmodels { flex: 1 1 100%; flex-wrap: wrap; order: 3; } }

#monhub .rf-av { font-size: 13px; }

/* Section chips under Alerts (sectionnav.js): centered in a green-bordered box, sticky under the project header. */
#secnav { position: sticky; top: calc(var(--toph, 52px) + var(--tabh, 0px) + var(--pstickh, 0px)); z-index: 3; background: var(--bg); padding: 6px 0; margin: 0 0 12px; }
#secnav .secnav-in { border: 2px solid #2e7d4f; border-radius: 12px; background: #fff; padding: 7px 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
#secnav .secchip { background: #e7f2ea; color: #15241b; border: 1.5px solid #2f7d4f; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#secnav .secchip:hover { background: #d6ecdc; }
#secnav .secchip.on { border-color: #2e7d4f; background: #fff; box-shadow: 0 0 0 2px rgba(46,125,79,.35); }
#secnav .secchip.na { background: #f1f2f1; color: #8a948e; font-weight: 600; border-color: #b8c0bb; }
#secnav .secchip.na.on { border-color: #8a948e; }
#secnav .secchip:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
@media (max-width: 760px) { #secnav .secchip { padding: 8px 10px; font-size: 12.5px; } }

/* ═══ Project › Files table (Rick, Oct 9): never wider than its panel. Wide: fixed columns (size and date sit under the name),
   selects fill their column, the Share boxes wrap inside theirs, long notes are cut with the full text on hover.
   Narrow panel (under 760px) or phone: each file is a card — name on top, then Category / Folder / Share with, wrapping. ═══ */
.ftwrap { container-type: inline-size; max-width: 100%; }
table.list.ftable { table-layout: fixed; width: 100%; display: table; }
table.list.ftable col.c-sel { width: 34px; } table.list.ftable col.c-cat { width: 160px; } table.list.ftable col.c-fold { width: 165px; } table.list.ftable col.c-share { width: 190px; }
table.list.ftable td { overflow-wrap: anywhere; min-width: 0; }
table.list.ftable select { width: 100%; max-width: 100%; padding: 3px 6px; font-size: 13px; min-height: 0; height: auto; }
table.list.ftable .shares { display: flex; flex-wrap: wrap; gap: 2px 10px; white-space: normal; }
table.list.ftable .shares label { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; font-size: 12px !important; white-space: nowrap; }
table.list.ftable .fnote, table.list.ftable .fmeta { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
table.list.ftable .flabel { display: none; }
@container (max-width: 760px) {
  table.list.ftable, table.list.ftable tbody { display: block; border: 0; }
  table.list.ftable colgroup, table.list.ftable tr.fhead { display: none; }
  table.list.ftable tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
  table.list.ftable td { display: block; border: 0 !important; padding: 0 !important; font-size: 14px; }
  table.list.ftable td.fsel { grid-row: 1 / span 3; padding-top: 2px !important; }
  table.list.ftable td.fname { grid-column: 2 / -1; }
  table.list.ftable td.fshare { grid-column: 2 / -1; }
  table.list.ftable td.ffold:empty { display: none; }
  table.list.ftable .flabel { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
}
@container (min-width: 561px) and (max-width: 760px) {
  table.list.ftable tr { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  table.list.ftable td.fsel { grid-row: 1 / span 2; }
  table.list.ftable td.fshare { grid-column: auto; }
}
@container (max-width: 480px) {
  table.list.ftable tr { grid-template-columns: 26px minmax(0, 1fr); }
  table.list.ftable td.fcat, table.list.ftable td.ffold, table.list.ftable td.fshare { grid-column: 2; }
}

/* Project › Files › E-signatures card (public/esign.js): buttons wrap, one row per document, never wider than the panel. */
#esigncard .eshead { gap: 8px; flex-wrap: wrap; align-items: center; }
#esigncard .eslist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#esigncard .esrow { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; min-width: 0; }
#esigncard .esdoc { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
#esigncard .esst { flex: 0 1 260px; min-width: 0; text-align: right; }
#esigncard .esst .linkbtn.inline { margin-left: 0; margin-right: 8px; }
@container (max-width: 560px) { #esigncard .esst { text-align: left; flex-basis: 100%; } }
#esigncard { container-type: inline-size; }
.esrole { margin-top: 4px; }

/* SOW tab: the current SOW's e-signature status next to its Send button (public/sow.js signHtml). */
.sowsign { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }

/* ═══ Project photos (Paul, Oct 10: Project Photo Revision Build) ═══
   Staff Photos tab: Site Survey · Installation · Final (.pv-sec) › folders (.pv-folder) › sub-folders (.pv-sub) › photo slots (.pv-slot).
   Uses the shared .chips rows for Show / Slots; counts like "5/7" in .pv-cnt (.ok green, .late red). */
.ph-fin .ip-ch { border-left-color: #b07d12; background: #fcf4e2; }
.pv-bar { gap: 8px 14px; margin: 4px 0 10px; }
.pv-secs { display: grid; gap: 12px; }
.pv-sec { border: 1px solid #dfe5df; border-radius: 12px; background: #fff; overflow: hidden; }
.pv-sec > summary, .pv-folder > summary, .pv-sub > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; user-select: none; }
.pv-sec > summary::-webkit-details-marker, .pv-folder > summary::-webkit-details-marker, .pv-sub > summary::-webkit-details-marker { display: none; }
.pv-tw { display: inline-block; width: 12px; color: var(--muted); font-size: 12px; transition: transform .15s; }
details[open] > summary > .pv-tw { transform: rotate(90deg); }
.pv-sec > summary { padding: 10px 14px; border-left: 5px solid #9aa79f; background: #f6f8f6; flex-wrap: wrap; }
.pv-sec.ph-ss > summary { border-left-color: #2f6f9f; background: #edf4fa; } .pv-sec.ph-in > summary { border-left-color: #3f7a4a; background: #edf6ef; } .pv-sec.ph-fin > summary { border-left-color: #b07d12; background: #fcf4e2; }
.pv-stitle { font-size: 16px; }
.pv-when { font-size: 13px; font-weight: 600; color: #2b3a31; white-space: nowrap; } .pv-status { font-weight: 700; }
.pv-prog { width: 140px; height: 8px; border-radius: 99px; background: #dfe5df; overflow: hidden; } .pv-prog > i { display: block; height: 100%; background: var(--brand); }
.pv-sreq, .pv-pics { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pv-sbody { padding: 8px 10px 10px; display: grid; gap: 6px; }
.pv-folder { border: 1px solid #e4e9e4; border-radius: 10px; background: #fbfcfb; }
.pv-folder > summary { padding: 8px 12px; } .pv-folder[open] > summary { border-bottom: 1px solid #e4e9e4; }
.pv-fic { font-size: 17px; }
.pv-cnt { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 0 8px; background: #eef1ee; color: #445; }
.pv-cnt.ok { background: #dff1e4; color: #1f6b3a; } .pv-cnt.late { background: #fde7e5; color: var(--bad); }
.pv-folder > summary .redcnt { background: #d32f2f; color: #fff; border-radius: 99px; padding: 0 7px; font-size: 12px; font-weight: 700; }
.pv-fbody { padding: 8px; display: grid; gap: 8px; }
.pv-sub { border-left: 3px solid #dfe5df; padding-left: 8px; } .pv-sub > summary { padding: 4px 0; font-size: 13.5px; } .pv-sub > .pv-slots { margin-top: 6px; }
.pv-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.pv-slot { border: 1px solid #e4e9e4; border-radius: 10px; background: #fff; padding: 8px 10px; display: grid; gap: 4px; align-content: start; transition: box-shadow .2s; }
.pv-slot.has { border-color: #b9dcc4; } .pv-slot.miss { border-left: 3px solid #f2c25c; } .pv-slot.late { border-left: 3px solid #e57373; }
.pv-slot.st-na, .pv-slot.st-off { opacity: .6; background: #f7f8f7; }
.pv-slot.pf-over, .pv-unsorted .pf-over { border-color: var(--brand); background: #eef6f0; box-shadow: 0 0 0 2px rgba(47,125,79,.25); }
.pv-slot.pv-focus { box-shadow: 0 0 0 3px #f5a623; }
.pv-shead { display: flex; align-items: flex-start; gap: 6px; }
.pv-sfoot { display: flex; align-items: center; gap: 6px; border-top: 1px dashed #e9ece9; padding-top: 5px; margin-top: 2px; }
.pv-late { font-size: 11px; font-weight: 700; color: var(--bad); }
.pv-addtile { width: 64px; height: 64px; flex: none; padding: 0; border: 1.5px dashed #b9c6bc; border-radius: 8px; background: #fbfcfb; color: var(--brand); font-size: 20px; line-height: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pv-addtile small { font-size: 10.5px; color: var(--muted); } .pv-addtile:hover { border-color: var(--brand); background: #eef6f0; }
.pv-mark { width: 16px; text-align: center; color: #99a; font-weight: 700; } .pv-slot.has .pv-mark { color: var(--brand); } .pv-slot.late .pv-mark { color: #c62828; }
.pv-slabel { font-size: 13.5px; line-height: 1.25; font-weight: 600; }
.pv-n { font-size: 11.5px; font-weight: 700; background: #dff1e4; color: #1f6b3a; border-radius: 99px; padding: 0 7px; }
.pv-flag { font-size: 11px; font-weight: 700; background: #fff4d9; color: #7a5600; border: 1px solid #f2c25c; border-radius: 99px; padding: 0 6px; }
.pv-rule { width: auto; font-size: 12px; padding: 1px 4px; border-radius: 6px; color: var(--muted); border-color: #e4e9e4; background: #fff; }
.pv-rule.st-na, .pv-rule.st-off { color: #99a; } .pv-rule.st-opt { color: #445; }
.pv-btn { padding: 2px 8px; font-size: 14px; line-height: 1.3; }
.pv-badge { font-size: 11px; color: var(--muted); }
.pv-hint { font-size: 12px; color: var(--muted); line-height: 1.35; } .pv-hint i { font-style: normal; color: #7a5600; }
.pv-na { color: #445; font-weight: 600; } .pv-new { font-size: 10.5px; font-weight: 700; color: #6a4c93; background: #f3eef9; border: 1px solid #ddd0ee; border-radius: 6px; padding: 0 5px; }
.pv-thumbs { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; border-radius: 8px; }
.pv-th { width: 64px; height: 64px; aspect-ratio: auto; flex: none; cursor: zoom-in; } .pv-th[draggable="true"] { cursor: grab; }
.pv-vid { font-size: 22px; color: #fff; background: #1f2b23; }
.pv-empty { font-size: 12px; color: #99a; border: 1.5px dashed #dfe5df; border-radius: 8px; padding: 8px 10px; width: 100%; }
.pv-unsorted { border: 1.5px dashed #f2c25c; background: #fffaeb; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; display: grid; gap: 6px; }
.pv-unsorted > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; user-select: none; } .pv-unsorted > summary::-webkit-details-marker { display: none; }
.pv-unsorted[open] > summary { margin-bottom: 6px; }
.pv-name { flex: 1; min-width: 220px; }
.pv-tools { display: flex; align-items: center; gap: 14px; width: 100%; } .pv-tools .linkbtn { padding: 0; }
.pv-copylink { font-size: 13px; font-weight: 700; padding: 5px 12px; border-color: #1f5a38; color: #ffd34d; background: #1f5a38; white-space: nowrap; } .pv-copylink:hover { background: #17462b; border-color: #17462b; }
.pf-lbimg video { max-width: 100%; max-height: 70vh; display: block; }
.pv-lbflag { background: #fff4d9; border: 1px solid #f2c25c; color: #7a5600; border-radius: 8px; padding: 6px 10px; font-size: 13px; display: flex; gap: 10px; align-items: center; }
@media (max-width: 600px) { .pv-slots { grid-template-columns: 1fr; } .pv-prog { width: 80px; } .pv-th { width: 56px; height: 56px; } }
/* Installer portal photos: one line per photo slot, 📷 to take it. */
.ip-slots { display: grid; gap: 4px; padding: 0 8px 8px; }
.ip-subh { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #4a5a4f; margin: 8px 0 0 2px; }
.ip-slot { border: 1px solid #e4e9e4; border-radius: 10px; background: #fff; }
.ip-slot.open { border-left: 4px solid #f2c25c; } .ip-slot.ok { border-color: #b9dcc4; } .ip-slot.na { opacity: .6; background: #f7f8f7; }
.ip-sline { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; min-height: 48px; }
.ip-smark { width: 16px; text-align: center; font-weight: 800; color: #99a; } .ip-slot.ok .ip-smark { color: #1f6b3a; }
.ip-slbl { flex: 1; font-size: 14.5px; line-height: 1.3; } .ip-slbl small { display: block; font-size: 12px; color: #667; }
.ip-slot .ip-plus { font-size: 20px; min-width: 48px; min-height: 40px; }
.ip-nabtn { font-size: 12px; padding: 5px 8px; white-space: nowrap; }
.ip-folder.ip-vids { border-style: dashed; }
.ip-pickf { border: 1px solid #e4e9e4; border-radius: 8px; margin: 4px 0; } .ip-pickf > summary { padding: 8px 10px; cursor: pointer; font-weight: 600; }
.ip-pickf > div { display: grid; gap: 6px; padding: 0 8px 8px; }
.ip-pickf .ip-pickb { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: auto; min-height: 44px; aspect-ratio: auto; padding: 8px 12px; text-align: left; font-size: 14.5px; font-weight: 500; }
/* Admin › Photo slots */
.pc-table input[type=text] { padding: 4px 6px; font-size: 13px; } .pc-table td { vertical-align: middle; }
.pc-table tr.pc-off td { opacity: .55; } .pc-subh td { background: #f6f8f6; font-size: 12.5px; }
.pc-add { padding: 6px 8px; gap: 6px; }
.pv-folder > table.pc-table { border: 0; border-radius: 0; }

/* Sort old photos (public/photos.js, src/photosort.js): "A" = auto-sorted, 💡 = a suggested slot; the suggestions strip. */
.pv-th { position: relative; }
.pv-th .pv-auto, .pv-th .pv-sugg { position: absolute; left: 3px; bottom: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.pv-th .pv-auto { background: #2f7d4f; color: #ffe100; }
.pv-th .pv-sugg { background: #fff; box-shadow: 0 0 0 1px #e0a800; }
.pv-sglist { display: grid; gap: 6px; margin-top: 6px; }
.pv-sg { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv-sg .pv-th { flex: none; }
.pv-sgtxt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pv-lbauto { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: #eef6f0; font-size: 13px; }
.pv-sortline { gap: 8px; flex-wrap: wrap; margin: 4px 0; }

/* ═══ Leads CRM (public/leads.js): GHL-style board, list and lead page. Shared chips / panel / chip tones; SolarLink green. ═══ */
.ld-bar { gap: 8px 12px; flex-wrap: wrap; align-items: center; margin: 4px 0 6px; }
.ld-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; max-width: 100%; }
.ld-col { background: #eef3ef; border: 1px solid #d5e2d9; border-radius: 12px; padding: 8px; min-width: 0; display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.ld-col.side { background: #f4f5f4; }
.ld-col.over { outline: 2px dashed #2f7d4f; outline-offset: -4px; }
.ld-col > header { padding: 2px 4px 8px; } .ld-col > header b { font-size: 14px; }
.ld-n { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #fff; border: 1px solid #c9d6cd; font-size: 12px; font-weight: 700; text-align: center; }
.ld-cards { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 40px; }
.ld-card { display: block; background: #fff; border: 1px solid #d9dfd8; border-left: 4px solid #2f7d4f; border-radius: 8px; padding: 8px 10px; color: inherit; text-decoration: none; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ld-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); } .ld-card.dragging { opacity: .5; }
.ld-card.late { border-left-color: #c62828; }
.ld-card b { overflow-wrap: anywhere; }
.ld-empty { padding: 6px 4px; }
.ld-list tr[data-lead] { cursor: pointer; } .ld-list tr.ld-late td:first-child { box-shadow: inset 4px 0 0 #c62828; }
.bad-t { color: var(--bad); font-weight: 600; }
.ld-stages { flex-wrap: wrap; margin: 4px 0 10px; }
.ld-page { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1000px) { .ld-page { grid-template-columns: minmax(0, 1fr); } }
.ld-feed { margin-top: 10px; max-height: 70vh; overflow-y: auto; } .ld-feed .item.ld-auto { opacity: .8; } .ld-feed .item.ld-stage .when { color: #1f6b3a; }
.ld-files { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ld-sale { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; margin: 0 0 10px; border: 1px solid #d5e2d9; background: #f3f8f4; }
.ld-sale.wait { border-color: #e9c46a; background: #fff8e6; } .ld-sale.back { border: 3px solid #c62828; background: #fff5f5; } .ld-sale.won { border-color: #9cc9aa; background: #eaf5ee; }
.ld-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 10px; } @media (max-width: 1100px) { .ld-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .ld-kpis { grid-template-columns: 1fr 1fr; } }
.ld-statwrap { overflow-x: auto; }
@media (max-width: 700px) {   /* Results stays a real table on phones (scroll sideways), not the stacked list cards */
  table.list.ld-stats { display: table; } table.list.ld-stats thead { display: table-header-group; } table.list.ld-stats tbody { display: table-row-group; }
  table.list.ld-stats tr { display: table-row; border: 0; padding: 0; margin: 0; border-radius: 0; background: none; }
  table.list.ld-stats td, table.list.ld-stats th, table.list.ld-stats td:first-child { display: table-cell; font-size: 13px; padding: 6px 8px !important; border-bottom: 1px solid var(--line) !important; } } .ld-stats td, .ld-stats th { white-space: nowrap; } .ld-stats tr.ld-total td { border-top: 2px solid #c9d6cd; font-weight: 700; background: #f3f8f4; }
.ld-imap { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: 42vh; overflow-y: auto; } .ld-imap label { display: grid; gap: 2px; min-width: 0; } .ld-imap label > span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ld-imap small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ho-reflink { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid #d5e2d9; border-radius: 10px; background: #f3f8f4; margin: 6px 0; } .ho-reflink:empty { display: none; }
.ld-camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .ld-camps .panel { margin: 0; }
.ld-tpl { display: grid; gap: 4px; margin: 10px 0; } .ld-tpl textarea { font-family: ui-monospace, monospace; font-size: 12px; }

/* In-app pop-ups (public/notices.js): stacked bottom-right, above the page, shared panel look. */
.notice-stack { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; }
.notice-card { margin: 0; padding: 12px 14px; border-left: 4px solid #2f7d4f; box-shadow: 0 8px 24px rgba(0,0,0,.14); }

/* ═══ UI standard: OPEN ALERTS (Rick, Oct 9) — keep this the last rule in the file; never restyle (docs/ui-standards.md) ═══
   A project's Alerts box with open alerts (.hasalert) is a thick red outline + light pink background, on every page and theme. */
details.psec.hasalert, details.psec.hasalert[data-sec=Alerts] { border: 3px solid #c62828 !important; background: #fff5f5 !important; box-shadow: none !important; }
details.psec.hasalert[data-sec=Alerts] > summary h2 { color: #8b1d12; }
details.psec.hasalert[data-sec=Alerts][open] > summary { border-bottom-color: #f5c6c2; }
details.psec.hasalert[data-sec=Alerts] .count { background: #fde0dd; color: #8b1d12; }

/* Top bar (Oct 12): logo left, nav links centered on the page, avatar right (desktop only) */
@media (min-width: 761px) {
  .top { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr); }
  .top .brand { justify-self: start; }
  .top .me { justify-self: end; }
}