:root {
  --green: #16a34a; --green-d: #14532d; --ink: #1f2937; --muted: #6b7280;
  --line: #e5e7eb; --bg: #f6f7f8; --red: #b91c1c; --amber: #b45309;
}
* { box-sizing: border-box; }
body { font: 14px/1.5 -apple-system, Segoe UI, Roboto, sans-serif; color: var(--ink); margin: 0; background: var(--bg); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 6px; }
code { background: #eef2f0; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* Buttons */
.btn { border: 1px solid #d1d5db; background: #fff; color: #111827; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #f3f4f6; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-d); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.block { width: 100%; margin-top: 6px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--green); }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; width: 340px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.login-card .logo { font-size: 20px; font-weight: 800; color: var(--green-d); }
.login-card label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-top: 14px; }
.login-card input { width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.login-card .hint { margin-top: 14px; font-size: 12px; text-align: center; }

/* Topbar / tabs */
.topbar { display: flex; align-items: center; gap: 20px; background: #fff; border-bottom: 1px solid var(--line); padding: 0 20px; height: 56px; position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 800; color: var(--green-d); }
.tabs { display: flex; gap: 4px; }
.tab { border: none; background: none; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tab:hover { background: #f3f4f6; }
.tab.active { background: #ecfdf5; color: var(--green-d); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mode-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.mode-badge.api { background: #dcfce7; color: #14532d; }
.mode-badge.local { background: #fef3c7; color: #92400e; }

.content { max-width: 1080px; margin: 0 auto; padding: 22px 20px 70px; }
.view-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.view-head h2 { margin: 0; font-size: 20px; color: var(--green-d); }
.view-head .spacer { flex: 1; }

/* Cards */
.cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.card { flex: 1; min-width: 160px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.card.danger { border-color: #fecaca; background: #fef2f2; }
.card .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.card .v { font-size: 22px; font-weight: 700; color: var(--green-d); }
.card.danger .v { color: var(--red); }

/* Filters */
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filters label { font-size: 12px; color: var(--muted); font-weight: 600; }
.filters select, .filters input { padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; background: #fff; }
.seg { display: inline-flex; gap: 3px; background: #eef2f0; border-radius: 8px; padding: 3px; }
.seg button { border: none; background: none; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.active { background: var(--green); color: #fff; }

/* Tables */
table.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.grid th, table.grid td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; text-align: left; }
table.grid th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #fafafa; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tr:last-child td { border-bottom: none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #374151; }
td.owed { color: var(--red); font-weight: 600; }
td.empty { text-align: center; color: #9ca3af; padding: 30px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.badge { display: inline-block; color: #fff; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge.PAID { background: #15803d; } .badge.PARTIAL { background: var(--amber); } .badge.DUE { background: var(--red); }

/* Report bars */
.bar-row { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 10px; padding: 5px 0; }
.bar-track { background: #eef2f0; border-radius: 6px; height: 16px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--green); }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.panel h3 { margin: 0 0 10px; font-size: 14px; color: var(--green-d); }
@media (max-width: 760px) { .report-grid { grid-template-columns: 1fr; } }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { font-size: 12px; font-weight: 600; color: #374151; }
.form-grid input, .form-grid textarea { width: 100%; margin-top: 3px; padding: 8px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; }
.form-grid .full { grid-column: 1 / -1; }
.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin: 6px 0 -4px; grid-column: 1 / -1; }

/* Modal */
.modal-root { position: fixed; inset: 0; background: rgba(17,24,39,.5); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { background: #fff; border-radius: 14px; max-width: 780px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-head .x { margin-left: auto; border: none; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.modal-body { padding: 18px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: #fff; }
.mock-note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12px; padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; }

/* Toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.toast.ok { background: #15803d; } .toast.bad { background: var(--red); }

/* Invoice (screen preview + print) */
#print-root { display: none; }
.sheet { background: #fff; padding: 32px; }
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--green); padding-bottom: 16px; }
.biz h1 { margin: 0; font-size: 20px; color: var(--green-d); }
.biz div { color: var(--muted); font-size: 13px; }
.inv-meta { text-align: right; } .inv-meta .n { font-size: 18px; font-weight: 700; } .inv-meta .badge { margin-top: 6px; }
.parties { display: flex; gap: 40px; margin: 22px 0; }
.parties h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
table.lines { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.lines th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line); padding: 8px; }
table.lines td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
table.lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub { color: #9ca3af; font-size: 12px; max-width: 380px; }
table.lines tfoot td { border: none; font-weight: 600; }
table.lines tfoot .total td { font-size: 16px; color: var(--green-d); border-top: 2px solid var(--line); padding-top: 12px; }
.pay-strip { margin-top: 20px; background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.terms { margin-top: 18px; color: var(--muted); font-size: 12px; border-top: 1px solid #eee; padding-top: 12px; }

table.lines.totals { max-width: 320px; margin-left: auto; }
table.lines.totals td { border: none; padding: 4px 8px; }

/* Extended UI */
.sel-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: #eef2f0; border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; font-weight: 600; color: var(--green-d); }
.pill-x { border: none; background: #d1d5db; border-radius: 50%; width: 16px; height: 16px; cursor: pointer; line-height: 1; }
.btn.danger-btn { color: var(--red); border-color: #fecaca; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #374151; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.modal.wide { max-width: 940px; }
.inv-preview, #te-preview { border: 1px solid var(--line); border-radius: 10px; overflow: auto; }

/* form dynamic rows */
.row-block { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.row-block input, .row-block select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }
.contact-row .c-phone { width: 130px; } .contact-row .c-label { width: 120px; } .contact-row .c-names { flex: 1; min-width: 160px; }

/* Templates */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tpl-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.tpl-thumb { height: 90px; border: 2px solid var(--green); border-radius: 8px; display: grid; place-items: center; margin-bottom: 10px; overflow: hidden; background: #fff; }
.tpl-thumb img { max-height: 70px; max-width: 90%; }
.tpl-meta { margin-bottom: 8px; }
.tpl-editor { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
.tpl-controls label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 10px; }
.tpl-controls input, .tpl-controls textarea { width: 100%; margin-top: 3px; padding: 7px 8px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; }
.tpl-controls input[type=color] { height: 34px; padding: 2px; }
ul.dnd { list-style: none; margin: 6px 0 0; padding: 0; }
ul.dnd li { display: flex; align-items: center; gap: 8px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; cursor: grab; }
ul.dnd li.dragging { opacity: .4; }
ul.dnd .grip { color: #9ca3af; }
@media (max-width: 800px) { .tpl-editor { grid-template-columns: 1fr; } }

/* Account */
.plan-box { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.plan-name { font-weight: 700; color: var(--green-d); }
.plan-price { font-size: 28px; font-weight: 800; color: var(--green-d); } .plan-price span { font-size: 14px; color: var(--muted); font-weight: 500; }
.plan-feats { margin: 10px 0; padding-left: 18px; color: #374151; font-size: 13px; }
.card-on-file { font-size: 16px; margin: 10px 0; }
.wide-panel { grid-column: 1 / -1; }
.report-grid .panel h3 { display: flex; align-items: center; gap: 10px; justify-content: space-between; }

/* Tables scroll horizontally instead of overflowing the page */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Oak Lawn invoice format ---- */
.sheet.ols { font-family: Arial, Helvetica, sans-serif; color: #111; padding: 40px 44px; }
.ols-head { position: relative; min-height: 110px; }
.ols-code { text-align: right; font-size: 20px; }
.ols-title { font-size: 30px; font-weight: 800; text-decoration: underline; margin: 8px 0 0; }
.ols-logo { max-height: 70px; margin-top: 6px; }
.ols-meta { position: absolute; right: 0; top: 40px; text-align: right; font-size: 15px; line-height: 1.9; }
.ols-from { margin: 18px 0 10px; font-size: 14px; line-height: 1.5; }
.ols-to { margin: 14px 0 8px; font-size: 14px; }
.ols-to strong { font-size: 16px; }
table.ols-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.ols-table th, table.ols-table td { border: 1.5px solid #111; padding: 8px 10px; text-align: left; vertical-align: top; font-size: 13px; }
table.ols-table th { font-weight: 800; }
table.ols-table td.amt { font-weight: 700; white-space: nowrap; }
table.ols-table td.rt { text-align: right; font-weight: 700; }
table.ols-table .ln-desc, table.ols-table .ln-addr { font-weight: 400; font-size: 12px; color: #333; margin-top: 3px; }
table.ols-table tr.tot-row td { font-weight: 800; }
table.ols-table tr.tot-row td[colspan="5"], table.ols-table tr.tot-row td[colspan="6"] { text-align: center; font-size: 15px; }

/* Live-editable invoice preview (openInvoiceModal / crewBatchPreview) */
.inv-edit-hint { margin: 0 0 8px; font-size: 12px; }
.ols-editing td.inv-e-act, .ols-editing th:last-child { width: 34px; text-align: center; padding: 4px; }
.ols-editing input.inv-e, .ols-editing input.inv-a { width: 100%; min-width: 62px; box-sizing: border-box; padding: 4px 6px; font: inherit; font-size: 13px; border: 1px solid #c7ccd1; border-radius: 5px; background: #fff; }
.ols-editing input.inv-e:focus, .ols-editing input.inv-a:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.ols-editing td.amt input.inv-e { font-weight: 700; }
.ols-editing .inv-e-del, .ols-editing .inv-e-add { cursor: pointer; border: 1px solid #c7ccd1; background: #fff; border-radius: 5px; width: 26px; height: 26px; line-height: 1; font-size: 13px; }
.ols-editing .inv-e-del:hover { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.ols-editing .inv-e-add { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.ols-editing tr.inv-add-row td { background: #f8fafc; }
.ols-editing tr.inv-add-row input.inv-a::placeholder { color: #94a3b8; font-style: italic; }
.inv-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.inv-photos img { max-height: 200px; max-width: 32%; border: 1px solid #ccc; border-radius: 4px; object-fit: cover; }
.od-banner { background: #fef2f2; border: 1.5px solid #fecaca; color: #b91c1c; font-weight: 700; padding: 8px 12px; border-radius: 8px; margin: 10px 0; text-align: center; }
.od-tag { background: #b91c1c; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
table.ols-table tr.od-row td { background: #fff5f5; }
.inv-state { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.st-scheduled { background: #dbeafe; color: #1e40af; } .st-sent { background: #e5e7eb; color: #374151; } .st-overdue { background: #fee2e2; color: #b91c1c; } .st-paid { background: #dcfce7; color: #166534; }
tr.od-row > td { background: #fff5f5; }
.pay-note { text-align: center; font-weight: 800; margin: 26px 0 10px; }
.pay-opts { font-size: 13px; } .pay-opts ul { margin: 6px 0; padding-left: 20px; } .pay-opts li { margin: 3px 0; }

/* ---- Property + service editor ---- */
.prop-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: #fcfcfc; }
.prop-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.prop-head input, .prop-head select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }
.prop-head .p-address { flex: 1; min-width: 160px; } .prop-head .p-city { width: 120px; }
.svc-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: #fff; }
.svc-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.svc-line select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }
.svc-line .s-type { font-weight: 600; }
.svc-visit, .svc-fixed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.svc-visit label, .svc-fixed label { font-size: 12px; font-weight: 600; color: #374151; }
.svc-visit input, .svc-fixed input, .svc-fixed textarea { width: 100%; margin-top: 3px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; }
.svc-visit .full, .svc-fixed .full { grid-column: 1 / -1; }
.svc-visit .s-gen { align-self: end; }
.svc-card[data-mode="visit"] .svc-fixed { display: none; }
.svc-card[data-mode="fixed"] .svc-visit { display: none; }
.s-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.s-thumbs .thumb { position: relative; }
.s-thumbs img { height: 60px; width: 60px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.s-thumbs .thumb-x { position: absolute; top: -6px; right: -6px; background: #b91c1c; color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: 12px; line-height: 1; }

/* ---- Schedule board ---- */
.who { font-size: 12px; font-weight: 700; color: var(--green-d); background: #ecfdf5; padding: 2px 8px; border-radius: 999px; }
.sched-body.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sched-body.day { max-width: 520px; }
.day-col { border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 90px; }
.day-head { font-size: 12px; font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.day-jobs { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.day-add { padding: 0 6px; }
.job-chip { font-size: 11px; padding: 4px 6px; border-radius: 6px; cursor: pointer; color: #fff; background: #6b7280; line-height: 1.25; }
.job-chip.crew-0 { background: #16a34a; } .job-chip.crew-1 { background: #2563eb; } .job-chip.crew-2 { background: #b45309; }
.job-chip.done { opacity: .55; text-decoration: line-through; }
.mini-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mcell { border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 82px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.mcell.off { background: #fafafa; color: #bbb; }
.mcell.today { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.mnum { font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.route-list { margin: 6px 0; padding-left: 20px; } .route-list li { margin: 6px 0; }
.route-list a { color: var(--green); margin-left: 6px; }

/* ---- Crews / people ---- */
.crew-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.chips { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: #eef2f0; border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.est-item { gap: 8px; } .est-item .ei-desc { flex: 1; }

/* ---- Refinements: larger search, sortable headers, phone rows ---- */
.search-lg { min-width: 300px; padding: 10px 14px; font-size: 14px; border-radius: 9px; }
@media (min-width: 900px) { .search-lg { min-width: 340px; } }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--green-d); background: #f0fdf4; }
.phone-row { align-items: center; }
.phone-row .ph-num { flex: 1; min-width: 140px; }
.inline-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #374151; }
.inline-lbl select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; }
.prop-workers { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 6px 0 10px; padding: 6px 8px; background: #f6f7f8; border-radius: 8px; }

/* ---- Modern job modal + date-picker calendar ---- */
.job-modal { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
@media (max-width: 820px) { .job-modal { grid-template-columns: 1fr; } }
.job-cal { border-left: 1px solid var(--line); padding-left: 18px; }
.job-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.job-cal-head .spacer { flex: 1; }
.jc-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jc-cell { position: relative; aspect-ratio: 1/1; border: 1px solid var(--line); border-radius: 7px; display: flex; align-items: flex-start; justify-content: flex-start; padding: 4px; cursor: pointer; font-size: 12px; background: #fff; }
.jc-cell:hover { border-color: var(--green); }
.jc-cell.off { background: #fafafa; color: #bbb; }
.jc-cell.today { box-shadow: inset 0 0 0 1px var(--green); }
.jc-cell.sel { background: var(--green); color: #fff; border-color: var(--green); }
.jc-busy { position: absolute; bottom: 3px; right: 4px; background: var(--amber); color: #fff; border-radius: 999px; font-size: 9px; min-width: 14px; height: 14px; display: grid; place-items: center; padding: 0 3px; }
.jc-cell.sel .jc-busy { background: #fff; color: var(--amber); }

/* ---- Delivery badge, expandable charge rows, mini tables ---- */
.deliv { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.deliv-email { background: #dbeafe; color: #1e40af; }
.deliv-print { background: #f3f4f6; color: #374151; }
.deliv-text { background: #dcfce7; color: #166534; }
.plan-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef2f0; color: #374151; }
.cstate { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.cstate-active { background: #dcfce7; color: #166534; }
.cstate-inactive { background: #f3f4f6; color: #6b7280; }
.cstate-canceled { background: #fee2e2; color: #b91c1c; }
.expander { padding: 2px 7px; line-height: 1; }
tr.detail-row > td { background: #f9fafb; padding: 8px 12px; }
table.grid.mini { border: 1px solid var(--line); }
table.grid.mini th, table.grid.mini td { padding: 6px 10px; font-size: 12px; }

/* ---- Row actions + popover menu ---- */
.row-actions.nowrap { flex-wrap: nowrap; }
.btn.kebab { padding: 5px 9px; font-size: 15px; line-height: 1; }
.rowmenu { position: absolute; z-index: 80; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 5px; min-width: 170px; }
.rowmenu-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 12px; border-radius: 7px; font-size: 13px; cursor: pointer; color: #111827; }
.rowmenu-item:hover { background: #f3f4f6; }
.rowmenu-item.danger { color: var(--red); }

/* ---- Reports KPIs + charts ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.kpi .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.kpi .v { font-size: 24px; font-weight: 800; color: var(--green-d); margin: 2px 0; }
.kpi .tgt { font-size: 12px; color: var(--muted); }
.kpi .meter { height: 8px; background: #eef2f0; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.kpi .meter > div { height: 100%; background: var(--green); }
.kpi.good .meter > div { background: var(--green); } .kpi.warn .meter > div { background: var(--amber); } .kpi.bad .meter > div { background: var(--red); }
.chart-v { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 10px; }
.chart-v .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.chart-v .bar { width: 70%; background: var(--green); border-radius: 5px 5px 0 0; min-height: 2px; transition: height .2s; }
.chart-v .bar.alt { background: #93c5b3; }
.chart-v .lbl { font-size: 10px; color: var(--muted); } .chart-v .val { font-size: 10px; font-weight: 700; color: var(--green-d); }
.panel h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chart-toggle { display: inline-flex; gap: 2px; background: #eef2f0; border-radius: 7px; padding: 2px; margin-left: auto; }
.chart-tg { border: none; background: none; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; }
.chart-tg.active { background: #fff; color: var(--green-d); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.panel h3 [data-more] { font-size: 11px; padding: 3px 8px; }

/* ============ Responsive / mobile ============ */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; position: sticky; }
  .brand { font-size: 15px; }
  .topbar-right { order: 2; }
  .tabs { order: 3; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 2px; padding-bottom: 2px; }
  .tab { padding: 7px 12px; white-space: nowrap; }
  .content { padding: 16px 12px 60px; }

  .cards { gap: 10px; }
  .card { min-width: calc(50% - 5px); padding: 12px; }
  .card .v { font-size: 19px; }

  .view-head h2 { font-size: 18px; }
  .filters { gap: 8px; }
  .filters input, .filters select { flex: 1 1 auto; min-width: 0; }
  .filters #d-search, .filters #c-search, .filters #i-search { width: 100%; flex-basis: 100%; }

  .table-wrap table { min-width: 560px; }   /* keep columns readable; container scrolls */

  .form-grid { grid-template-columns: 1fr; }
  .modal-root { padding: 0; }
  .modal, .modal.wide { max-width: 100%; width: 100%; min-height: 100vh; border-radius: 0; max-height: 100vh; }
  .modal-head, .modal-foot { position: sticky; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }

  .tpl-editor { grid-template-columns: 1fr; }
  .tpl-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .parties { flex-direction: column; gap: 16px; }
  .sched-body.week { grid-template-columns: 1fr; }
  .month-grid, .mini-dow { font-size: 9px; gap: 3px; }
  .mcell { min-height: 54px; }
  .sheet { padding: 18px; }
  .row-actions { justify-content: flex-start; }
  .inv-top { flex-direction: column; gap: 10px; }
  .inv-meta { text-align: left; }
}
@media (max-width: 420px) {
  .card { min-width: 100%; }
}

@media print {
  body { background: #fff; }
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  .invoice-page { page-break-after: always; }
  .invoice-page:last-child { page-break-after: auto; }
  .sheet { padding: 0; }
  .table-wrap { overflow: visible; }
}

/* ============ Help "?" button + in-app user manual ============ */
.help-q { width: 30px; height: 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--green); color: #fff; font-size: 17px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.help-q:hover { background: var(--green-d); }

.help { max-width: 820px; color: var(--ink); line-height: 1.6; }
.help-modal { max-width: none; }
.help .help-cover { background: linear-gradient(135deg, var(--green-d), var(--green)); color: #fff;
  border-radius: 14px; padding: 26px 28px; position: relative; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.help .help-cover::after { content: "🌿"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 110px; opacity: .14; line-height: 1; }
.help .help-cover .kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; font-weight: 700; }
.help .help-cover h1 { margin: 6px 0; font-size: 27px; line-height: 1.05; }
.help .help-cover p { margin: 0; font-size: 14.5px; opacity: .95; max-width: 48ch; }
.help .help-cover .meta { margin-top: 14px; font-size: 12px; opacity: .92; display: flex; gap: 16px; flex-wrap: wrap; }
.help .help-note { display: flex; gap: 10px; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a;
  color: #92400e; border-radius: 10px; padding: 12px 14px; margin: 16px 0; font-size: 13px; }
.help h3.help-sec { display: flex; align-items: center; gap: 9px; font-size: 18px; color: var(--ink); margin: 26px 0 4px; }
.help h3.help-sec .n { width: 22px; height: 22px; border-radius: 6px; background: #dcfce7; color: var(--green-d);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.help h4 { margin: 18px 0 4px; font-size: 15px; }
.help p { margin: 8px 0; }
.help ul { padding-left: 20px; margin: 8px 0; }
.help ul li { margin: 5px 0; }
.help table.grid { margin: 14px 0; }
.help .tab-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.help .tab-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.help .tab-card h4 { margin: 0 0 4px; font-size: 14px; display: flex; gap: 7px; align-items: center; }
.help .tab-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.help ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 12px 0; }
.help ol.steps > li { position: relative; padding: 0 0 14px 40px; border-left: 2px solid var(--line); margin-left: 13px; }
.help ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.help ol.steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: -14px; top: -3px;
  width: 27px; height: 27px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.help ol.steps ul { margin: 5px 0 0; }
.help .help-tip { background: #dcfce7; border-left: 3px solid var(--green); border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin: 14px 0; font-size: 13.5px; color: var(--ink); }
.help code { background: #f3f4f6; padding: 1.5px 6px; border-radius: 5px; font-size: 12.5px; }
@media (max-width: 640px) { .help .tab-cards { grid-template-columns: 1fr; } }

@media print {
  body.printing #print-root .help { max-width: none; }
  .help .help-cover, .help ol.steps > li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .help h3.help-sec, .help h4 { break-after: avoid; }
  .help .tab-card, .help ol.steps > li, .help table.grid, .help .help-tip, .help .help-note { break-inside: avoid; }
}

/* ============================================================================
 * MODERN SHELL — grouped sidebar, refreshed tokens, Routes grid  (v4 redesign)
 * Appended last so these tokens/rules win over the earlier top-tab styles.
 * ==========================================================================*/
:root {
  --bg: #f4f6f8; --line: #e7e9ee;
  --brand: #16a34a; --brand-d: #15803d; --brand-ink: #14532d;
  --side-bg: #0f2e1d; --side-ink: #dcece3;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 1px 3px rgba(16,24,40,.09), 0 1px 2px rgba(16,24,40,.04);
}
body { background: var(--bg); -webkit-font-smoothing: antialiased; }

/* Layout: sidebar + main column */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 240px; flex-shrink: 0; background: var(--side-bg); color: var(--side-ink);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.side-brand { display: flex; align-items: center; gap: 9px; padding: 18px 18px 14px; font-weight: 800; font-size: 16px; color: #fff; }
.side-logo { font-size: 20px; }
.side-nav { flex: 1; overflow-y: auto; padding: 6px 10px 10px; }
.nav-group { text-transform: uppercase; font-size: 10.5px; letter-spacing: .09em; font-weight: 700;
  color: rgba(220,236,227,.5); padding: 15px 10px 5px; }
.navlink { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; cursor: pointer;
  color: rgba(220,236,227,.78); padding: 9px 11px; border-radius: 9px; font-size: 14px; font-weight: 600; text-align: left; transition: background .12s, color .12s; }
.navlink:hover { background: rgba(255,255,255,.07); color: #fff; }
.navlink.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.nav-ico { width: 18px; height: 18px; flex-shrink: 0; }
.side-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.side-user { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.side-user .who { background: rgba(255,255,255,.12); color: #eafaf0; }

/* Topbar */
.topbar { display: flex; align-items: center; gap: 14px; background: #fff; border-bottom: 1px solid var(--line);
  padding: 0 22px; height: 60px; position: sticky; top: 0; z-index: 20; }
.page-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.icon-btn { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 8px; }
.icon-btn:hover { background: #f3f4f6; }
.menu-btn { display: none; }
.topbar .topbar-right { margin-left: auto; }

.content { max-width: 1180px; margin: 0; padding: 24px 26px 80px; width: 100%; }
.view-head h2 { display: none; }   /* page name already shown in the topbar */

/* Softer, more modern surfaces */
.card, table.grid, .panel { box-shadow: var(--shadow); border-color: var(--line); }
.card { border-radius: 14px; }
.cards { gap: 16px; }
.card .v { color: var(--brand-ink); }

/* Pills / summaries / empty states */
.pill { display: inline-block; background: #ecfdf5; color: var(--brand-ink); padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.route-hint { margin: -4px 0 14px; }
.route-summary { display: flex; gap: 18px; margin: 4px 0 14px; }
.rs-item { font-size: 13px; color: var(--muted); }
.rs-item b { font-size: 17px; color: var(--ink); margin-right: 4px; }
.rs-item.ok b { color: var(--brand-d); }
.rs-item.warn b { color: var(--amber); }
.empty-state { text-align: center; color: var(--muted); padding: 54px 20px; background: #fff;
  border: 1px dashed #d4d8de; border-radius: 14px; font-weight: 500; }

/* Routes grid */
.route-grid th.rt-datecol, .route-grid td.rt-cell { text-align: center; white-space: nowrap; }
.route-grid td.rt-cell { padding: 8px 6px; }
.route-grid .rt-note { font-size: 12px; color: var(--muted); max-width: 160px; }
.rt-chk { width: 18px; height: 18px; cursor: pointer; accent-color: var(--brand); }
.route-grid td.rt-cell.skipped { background: #fff5f4; }

/* Printable route sheet (shown only via #print-root when printing) */
.route-print { color: #000; font: 12px/1.4 -apple-system, Segoe UI, Roboto, sans-serif; }
.route-print .rp-head h1 { margin: 0; font-size: 20px; }
.route-print .rp-sub { font-weight: 700; margin: 2px 0 12px; font-size: 13px; }
.route-print .rp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.route-print .rp-table th, .route-print .rp-table td { border: 1px solid #888; padding: 4px 6px; text-align: left; }
.route-print .rp-table th { background: #eee; }
.route-print .rp-mark { text-align: center; font-weight: 700; font-size: 13px; }
.route-print .rp-foot { margin-top: 10px; font-size: 11px; color: #333; }

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
  body.nav-open .sidebar { transform: none; }
  .menu-btn { display: inline-block; }
  .side-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 55; }
  body.nav-open .side-scrim { display: block; }
  .content { padding: 18px 16px 70px; }
}

/* Routes — "All days" grouping + multi-sheet print */
.route-dayhead { font-size: 15px; font-weight: 800; color: var(--brand-ink); margin: 24px 0 8px; }
.route-dayhead:first-of-type { margin-top: 4px; }
@media print { .route-print + .route-print { page-break-before: always; } }

/* Customer form: recurring-cut pickers + route stop hint */
.svc-visit select { width: 100%; margin-top: 3px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; background: #fff; }
.svc-visit .s-start, .svc-visit .s-end { cursor: pointer; }
.s-preview { font-size: 12.5px; color: var(--muted); padding: 4px 2px 0; }
.s-preview.ok { color: var(--brand-d); font-weight: 600; }
.route-stop-hint { display: block; margin-top: 4px; font-size: 11.5px; }

/* Prepaid credit (three payment patterns: on-time / late / prepaid) */
.badge.CREDIT { background: #1e5fa8; }
td.credit { color: #1e5fa8; font-weight: 600; }
.card.credit-card { border-color: #cfe0f5; background: #f2f7fd; }
.card.credit-card .v { color: #1e5fa8; }

/* Service card: per-service note, hold, pricing */
.svc-common { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; display: grid; gap: 6px; }
.svc-common label.full { font-size: 12px; font-weight: 600; color: #374151; }
.svc-common .s-note { width: 100%; margin-top: 3px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }
.svc-common .s-holdwrap { font-size: 12px; }
.pricing-row { font-size: 12px; color: #374151; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.pricing-row input { padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 12px; }
.svc-card[data-mode="fixed"] .s-pricing { display: none; }

/* Routes: inline editors + crew section headers */
.route-crewhead { font-size: 17px; font-weight: 800; color: #fff; background: var(--side-bg); border-radius: 8px; padding: 8px 12px; margin: 22px 0 8px; }
.route-crewhead .muted { color: rgba(255,255,255,.7); font-weight: 600; }
.route-grid .rt-crew, .route-grid .rt-day { padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; background: #fff; }
.route-grid .rt-note-in { width: 130px; padding: 4px 6px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px; }

.credit-note { background: #f2f7fd; border: 1px solid #cfe0f5; color: #1e5fa8; font-size: 13px; padding: 9px 11px; border-radius: 8px; margin-bottom: 12px; }

/* Season / Hold badges, clickable customer name, detail modal, held rows */
.badge.SEASON { background: #0369a1; }
.badge.HOLD { background: #b45309; }
.link-name { color: var(--brand-d); font-weight: 600; cursor: pointer; text-decoration: none; }
.link-name:hover { text-decoration: underline; }
.detail-head { margin-bottom: 14px; }
.detail-head .detail-flags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.detail-notes { margin-top: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
tr.held-row { background: #fff7ed; }
tr.held-row td { color: #9a6a2a; }
td.rt { text-align: right; }

.pill.pill-sm { font-size: 10px; padding: 1px 7px; background: #eef2f0; color: #4b5563; }
.filters .seg { flex-wrap: wrap; }

/* Card-on-file entry + credit-card delivery pill */
.card-entry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card-entry input { padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; }
.card-entry #cf-num { flex: 1; min-width: 180px; }
.card-entry .mock-note { width: 100%; }
.deliv-credit-card { background: #ede9fe; color: #5b21b6; }

.tip-amt { color: #15803d; font-weight: 600; }
.pill.tip-pill { background: #dcfce7; color: #15803d; }

/* Routes: per-date Done / Skipped / Cancelled dropdown */
.route-grid .rt-state { padding: 3px 4px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 12px; background: #fff; }
.route-grid td.rt-cell.st-done { background: #ecfdf5; }
.route-grid td.rt-cell.st-skipped { background: #fff7ed; }
.route-grid td.rt-cell.st-cancelled { background: #fef2f2; }
.route-grid td.rt-cell.st-cancelled .rt-state { color: #b91c1c; font-weight: 600; }
.route-grid .rt-date { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.route-grid td.rt-cell.rt-off { color: #cbd5e1; }
.route-grid th.rt-datecol { font-size: 11px; line-height: 1.25; }
.route-grid td.rt-stop { min-width: 180px; }
/* Routes needs every column visible — let it use the whole window and tighten the grid. */
body.wide-tab .content { max-width: none; }
body.wide-tab .route-grid { font-size: 12.5px; }
body.wide-tab .route-grid th, body.wide-tab .route-grid td { padding-left: 7px; padding-right: 7px; }
.route-grid .rt-crew, .route-grid .rt-day { max-width: 78px; }
.route-grid .rt-note-in { width: 100%; min-width: 120px; }
.route-grid td.rt-cell { padding-left: 4px; padding-right: 4px; }
.route-grid .rt-state { font-size: 11px; padding: 2px 3px; }
/* Route ordering, drag-reorder, add/remove, upload */
.route-grid td.rt-ord { white-space: nowrap; padding-right: 2px; }
.route-grid .rt-grip { cursor: grab; color: #9aa3ad; margin-right: 4px; user-select: none; }
.route-grid input.rt-num { width: 52px; padding: 5px 4px; border: 1px solid #94a3b8; border-radius: 5px; font: inherit; font-size: 13px; font-weight: 700; text-align: center; background: #fff; }
.route-grid input.rt-num:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.route-grid .rt-grip { touch-action: none; }
.route-grid .rt-grip:active { cursor: grabbing; }

/* ---- Edit customer: make properties and services read as distinct blocks ---- */
.prop-block { border: 1px solid #cbd5e1; border-left: 5px solid var(--brand); border-radius: 10px;
  background: #f8fafc; padding: 14px 14px 10px; margin: 0 0 16px; }
.prop-block > h4, .prop-block .prop-title { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--brand-ink); }
.prop-services { margin-top: 10px; }
.svc-card { border: 1px solid #d7dde3; border-left: 4px solid #94a3b8; border-radius: 9px;
  background: #fff; padding: 12px; margin: 0 0 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.svc-card:hover { border-left-color: var(--brand); }
.svc-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 10px;
  margin-bottom: 10px; border-bottom: 1px dashed #dde3e9; }
.svc-line .s-type { font-weight: 700; }
/* buttons that were easy to miss */
.form-grid .btn, .prop-block .btn { border: 1px solid #94a3b8; background: #fff; font-weight: 700; }
.prop-block .btn:hover, .form-grid .btn:hover { background: #eef2f6; border-color: var(--brand); color: var(--brand-ink); }
/* keep primary/ghost/danger buttons styled even inside forms (the generic form-grid rule above would otherwise make them white-on-white) */
.form-grid .btn.primary, .prop-block .btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.form-grid .btn.primary:hover, .prop-block .btn.primary:hover { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.form-grid .btn.ghost, .prop-block .btn.ghost { background: transparent; border-color: transparent; color: var(--green); }
.form-grid .btn.danger-btn, .prop-block .btn.danger-btn { color: var(--red); border-color: #fecaca; }
[data-add-service], [data-add-prop] { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
[data-add-service]:hover, [data-add-prop]:hover { filter: brightness(1.06); color: #fff !important; }
[data-remove-row] { color: #b91c1c; border-color: #e5b4b4 !important; }
[data-remove-row]:hover { background: #fee2e2 !important; border-color: #ef4444 !important; }
/* label-first checkboxes */
.chk.chk-after { display: inline-flex; align-items: center; gap: 8px; flex-direction: row; }
.chk.chk-after input[type="checkbox"] { order: 2; margin: 0; }
.s-holdwrap.chk-after { justify-content: flex-start; font-weight: 600; }
/* active rate marker */
label.rate-active { background: #ecfdf5; border-radius: 8px; padding: 4px 8px; }
.rate-tick { color: var(--brand-d); font-weight: 800; font-size: 11px; }
.lp-rate-opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d7dde3; border-radius: 8px; padding: 6px 10px; }
.lp-rate-opt.is-active { border-color: var(--brand); background: #ecfdf5; }
.lp-tick { color: var(--brand-d); font-weight: 800; width: 10px; }
/* price history ranges */
.price-hist { margin-top: 8px; }
.ph-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.ph-table { border-collapse: collapse; font-size: 12.5px; }
.ph-table td { padding: 2px 12px 2px 0; }
.ph-table .ph-amt { font-weight: 700; }
.ph-table .ph-when { color: var(--muted); }
.ph-table tr.ph-now .ph-amt { color: var(--brand-d); }
/* pay-by-cut picker */
.pay-cuts { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; background: #f8fafc; }
.pc-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px; }
.pc-list { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pc-item { border: 1px solid #d7dde3; background: #fff; border-radius: 7px; padding: 4px 9px; font-size: 13px; }
.tips-card .v { color: var(--brand-d); }
.svc-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 6px; }
/* Collapsible sections in the customer form */
.section-title.collapsible, .prop-title.collapsible { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.section-title.collapsible::before, .prop-title.collapsible::before { content: "▾"; font-size: 10px; color: var(--muted); transition: transform .12s; }
.section-title.collapsible.is-shut::before, .prop-title.collapsible.is-shut::before { content: "▸"; }
.section-title.collapsible:hover, .prop-title.collapsible:hover { color: var(--brand-ink); }
.prop-title.collapsible.is-shut { margin-bottom: 0; }
.svc-toggle { width: 26px; padding: 2px 0; font-weight: 700; }
/* Real form sections — each collapses as a whole */
.fsec { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 12px; background: #fff; overflow: hidden; }
.fsec > .section-title { margin: 0; padding: 10px 12px; background: #f1f5f9; border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: .03em; color: var(--brand-ink); }
.fsec.is-shut > .section-title { border-bottom: none; }
.fsec > .fsec-body { padding: 12px; }
.fsec > .fsec-body[hidden] { display: none !important; }
#cust-form { display: block; }
/* Service card: labelled Category / Service / Pricing selects */
.svc-lbl { display: inline-flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.svc-lbl select { font-size: 13px; font-weight: 600; padding: 5px 7px; border: 1px solid #c7ccd1; border-radius: 6px; background: #fff; }
/* Services page */
.svc-cat { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.svc-cat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f1f5f9; border-bottom: 1px solid var(--line); }
.svc-cat-head strong { font-size: 14px; color: var(--brand-ink); }
.svc-cat table.grid { margin: 0; }
/* Invoicing by month — clickable drill-down */
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.panel-head h3 { margin: 0; }
.panel-head select { padding: 5px 8px; border: 1px solid #c7ccd1; border-radius: 6px; font-size: 13px; }
.mbm-hint { font-size: 12px; margin: 2px 0 8px; }
table.mbm td.mbm-cell { cursor: pointer; }
table.mbm td.mbm-cell:hover { background: #eef6f1; box-shadow: inset 0 0 0 1px var(--brand); }
table.mbm td.cell-on { background: var(--brand); color: #fff; font-weight: 800; }
table.mbm td.cell-on.owed { color: #fff; }
.drill-pill { background: var(--brand); color: #fff; }
/* month table: category sub-rows */
table.mbm tr.mbm-cat td { background: #fbfcfd; font-size: 12.5px; }
table.mbm tr.mbm-cat td.mbm-catname { padding-left: 26px; color: var(--muted); }
table.mbm tr.mbm-month td { border-top: 2px solid var(--line); }
.oneoff-title { margin: 16px 0 6px; font-size: 14px; }
table.mbm tr.mbm-cat.no-month td { background: #fffbeb; }
table.mbm tr.mbm-cat.no-month td.mbm-catname { color: var(--amber); font-weight: 600; }
/* reconciliation against the spreadsheet */
.disc-box { border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; overflow: hidden; }
.disc-box.has-diff { border-color: var(--amber); }
.disc-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; user-select: none; background: #f8fafc; font-size: 13px; }
.disc-box.has-diff .disc-head { background: #fffbeb; }
.disc-head:hover { filter: brightness(.98); }
.disc-body { padding: 10px 12px 12px; }
.disc-table { font-size: 12.5px; }
.disc-table tr.disc-off td { background: #fffbeb; }
.disc-table tr.disc-detail > td { background: #fff; padding: 8px 10px; }
.disc-table tr.disc-detail table { margin: 0; }
/* pager under the dashboard customer table */
.pager { display: flex; align-items: center; gap: 10px; padding: 10px 2px 0; font-size: 13px; }
.pager-info { color: var(--muted); }
.pager select { padding: 4px 7px; border: 1px solid #c7ccd1; border-radius: 6px; font-size: 13px; }
.pager label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
/* Routes grouped like the Route By Day sheet: Crew Lead → Day, both collapsible */
.rt-lead { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 14px; overflow: hidden; background: #fff; }
.rt-lead-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; user-select: none;
  background: var(--side-bg); color: #fff; }
.rt-lead-head .muted { color: rgba(255,255,255,.72); }
.rt-lead-head:hover { filter: brightness(1.08); }
.rt-lead-body { padding: 8px 10px 4px; }
.rt-day { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.rt-day-head { display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; user-select: none;
  background: #eef2f6; font-size: 13px; }
.rt-day-head:hover { background: #e2e8f0; }
.rt-day-body { padding: 0; }
.rt-chev { width: 12px; font-size: 10px; opacity: .8; }
th.rt-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.rt-sort:hover { color: var(--brand-d); }
th.rt-sort.on { color: var(--brand-d); }
.route-grid a.rt-open { font-weight: 700; color: var(--brand-ink); text-decoration: none; }
.route-grid a.rt-open:hover { text-decoration: underline; color: var(--brand-d); }
.svc-card.is-shut { padding-bottom: 8px; }
.svc-card.is-shut .svc-line { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.route-grid tr.rt-row.rt-dragging { opacity: .45; }
.route-grid tr.rt-row.rt-over td { border-top: 3px solid var(--brand); }
.route-grid td.rt-act { text-align: center; }
.route-grid .rt-del { cursor: pointer; border: 1px solid #d1d5db; background: #fff; border-radius: 5px; width: 24px; height: 24px; line-height: 1; font-size: 12px; }
.route-grid .rt-del:hover { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.ru-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-bottom: 10px; }
.ru-result { margin-top: 10px; font-size: 13px; }
.ru-sum { font-weight: 700; }
.ru-missed { margin-top: 4px; color: var(--amber); font-size: 12px; line-height: 1.5; }
.pricing-row .price-chain { font-weight: 600; }
/* Customer screen — cutting pricing & per-cut overrides */
.lp-rates { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 10px; font-size: 13px; }
.lp-rates label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.lp-rates input { width: 92px; padding: 5px 7px; border: 1px solid #c7ccd1; border-radius: 6px; font: inherit; }
.lp-hist { margin: -4px 0 10px; font-size: 12px; }
.lp-table tr.lp-month td { background: #f8fafc; font-weight: 600; }
.lp-table tr.cut-row td { padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.lp-table td.cut-date { padding-left: 26px; }
.lp-table tr.cut-over td.cut-date { font-weight: 700; color: var(--brand-d); }
.lp-table tr.cut-over td.cut-date::before { content: "● "; color: var(--brand); }
.lp-table input { width: 84px; padding: 4px 6px; border: 1px solid #c7ccd1; border-radius: 5px; font: inherit; font-size: 13px; text-align: right; }

/* Account logo upload */
.acc-logo-row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.acc-logo-prev{width:130px;height:62px;border:1px solid #e5e7eb;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;flex:0 0 auto}
.acc-logo-prev img{max-width:100%;max-height:100%;object-fit:contain}

/* Catalog admin (Services / Products) + template presets + invoice warranty */
.cat-h{margin:16px 0 6px;font-size:1rem;color:#374151}
.tpl-preset-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.tpl-preset{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:2px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:.9rem}
.tpl-preset:hover{background:#f9fafb}
.tpl-preset-dot{width:14px;height:14px;border-radius:50%;display:inline-block}
.inv-warranty{margin-top:14px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px;background:#fafafa;font-size:.82rem;color:#4b5563;line-height:1.4}

/* New per-job customer form */
.job-card{border:1px solid #e5e7eb;border-radius:10px;margin:8px 0;background:#fff}
.job-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f9fafb;border-bottom:1px solid #eef2f7;border-radius:10px 10px 0 0}
.job-title{font-size:.95rem}
.job-amt{font-weight:700}
.job-card.collapsed .job-body{display:none}
.job-body{padding:10px}
.job-sub{font-weight:700;font-size:.82rem;color:#374151;margin:12px 0 6px;text-transform:uppercase;letter-spacing:.02em}
.li-list{display:flex;flex-direction:column;gap:8px}
.li-row{border:1px solid #eef2f7;border-radius:8px;padding:8px;background:#fcfcfd}
.li-main{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.li-f{display:flex;flex-direction:column;font-size:.75rem;color:#6b7280;gap:2px}
.li-descf{flex:1 1 220px}
.li-sm input{width:80px}
.li-row .li-main input,.li-row .li-main select{font-size:.9rem}
.li-extra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.li-notef{flex:1 1 220px;display:flex;flex-direction:column;font-size:.72rem;color:#6b7280}
.li-thumb img{height:38px;border-radius:6px;vertical-align:middle}
.li-thumb .li-imgx{border:none;background:#ef4444;color:#fff;border-radius:50%;width:18px;height:18px;cursor:pointer;margin-left:-8px}
.li-imgbtn input{display:none}
.inst-row{display:flex;gap:6px;align-items:center;margin:4px 0}
.inst-row .inst-label{flex:1}
.inst-row .inst-pct{width:70px}
.job-preview:not(:empty){margin-top:10px;border-top:1px dashed #e5e7eb;padding-top:10px}
.job-inv-title{margin:8px 0;font-size:1.05rem}
.inv-li-img img{height:60px;border-radius:6px;margin-top:4px}
.inv-schedule{margin-top:10px;font-size:.85rem}
.inv-schedule ul{margin:4px 0 0 18px}
.li-bill{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
.li-bill select{font-size:.9rem}

/* Dashboard: All revenue card + Revenue by category */
.revenue-card{background:linear-gradient(135deg,#065f46,#16a34a);color:#fff;border:none}
.revenue-card .k{color:rgba(255,255,255,.85)}
.revenue-card .v{color:#fff}
.estimate-card{background:linear-gradient(135deg,#3730a3,#6366f1);color:#fff;border:none}
.estimate-card .k{color:rgba(255,255,255,.85)}
.estimate-card .v{color:#fff}
.catbar-wrap{display:flex;align-items:center;gap:8px;min-width:160px}
.catbar{flex:1;height:10px;background:#eef2f7;border-radius:6px;overflow:hidden}
.catbar-fill{height:100%;background:#16a34a;border-radius:6px}

/* Batch: inline Active checkbox, product thumb, structured mailing, payment terms */
.chk-inline{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.chk-inline input{margin:0}
.prod-thumb{height:28px;width:28px;object-fit:cover;border-radius:5px;vertical-align:middle}
.section-subhead{font-weight:700;font-size:.82rem;color:#374151;margin-top:6px}
.dep-wrap{display:flex;align-items:center;gap:6px}
.dep-wrap .j-deposit{flex:0 0 110px}
.dep-wrap .j-dep-mode{width:56px}
.j-dep-calc{font-size:.82rem}
.j-total-tag{font-weight:400;text-transform:none;letter-spacing:0;color:#6b7280;margin-left:8px}
.j-total-tag .j-total{color:#16a34a}
.inst-remaining:not(:empty){padding:4px 0;font-size:.85rem}

/* Estimates: searchable customer picker + invoice separators */
.cust-pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cust-pick #est-cust-search{flex:1;min-width:200px}
.inv-sep{border:none;border-top:2px dashed #cbd5e1;margin:18px 0}

/* ---- AI assistant box (Dashboard + Jobs) ---- */
.ai-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 16px}
.ai-box .ai-row{display:flex;gap:8px;align-items:center}
.ai-box .ai-input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.ai-box .ai-input:focus{outline:2px solid var(--brand);outline-offset:-1px}
.ai-box .ai-out{margin-top:10px}
.ai-box .ai-out:empty{display:none}
.ai-box .ai-out p{margin:4px 0}
.ai-list{margin:6px 0 2px;padding-left:18px}
.ai-list li{margin:2px 0}
.ai-box .ai-out .owed{color:var(--red);font-weight:600}

/* ---- Jobs pipeline stepper ---- */
.stepper{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.stepper .step{font-size:11px;font-weight:600;color:var(--muted);padding:3px 9px;border-radius:999px;background:#f1f5f9;white-space:nowrap}
.stepper .step.current{background:var(--brand);color:#fff}
.stepper .step.done{background:#dcfce7;color:var(--green-d)}
.stepper .step-arr{color:#cbd5e1;font-size:12px}
.stepper2{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.stepper2 .step2{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:92px;border:1px solid transparent;border-radius:8px;padding:5px 10px;font:inherit;cursor:pointer;text-align:left;line-height:1.15}
.stepper2 .step2 .s2a{font-size:11px;font-weight:700;letter-spacing:.01em}
.stepper2 .step2 .s2b{font-size:10px;font-weight:600;opacity:.85}
.stepper2 .step2.st-green{background:#dcfce7;border-color:#86efac;color:var(--green-d)}
.stepper2 .step2.st-yellow{background:#fef9c3;border-color:#fde047;color:#854d0e}
.stepper2 .step2:hover{filter:brightness(.97);box-shadow:0 0 0 2px rgba(22,163,74,.2)}
.pay-choose{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tot-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.tot-grid label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--muted)}
.tot-grid input{font-weight:500}
.bld-totals{border-top:1px solid var(--line);padding-top:8px}
.bld-totals .bt-row{display:flex;justify-content:space-between;padding:3px 0;font-size:13px;color:var(--ink)}
.bld-totals .bt-row span:first-child{color:var(--muted)}
.bld-totals .bt-total{border-top:1px solid var(--line);margin-top:4px;padding-top:7px;font-size:15px;font-weight:800}
.pt-head,.pt-row{display:grid;grid-template-columns:1.2fr 1.4fr 1.8fr 32px;gap:8px;align-items:center}
.pt-head{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.pt-row{margin-bottom:7px}
.pt-amtwrap,.pt-whenwrap{display:flex;gap:5px}
.pt-amtwrap .pt-amode{flex:0 0 52px}
.pt-amtwrap .pt-amt{flex:1;min-width:0}
.pt-whenwrap .pt-tmode{flex:0 0 108px}
.pt-whenwrap .pt-due,.pt-whenwrap .pt-cpct{flex:1;min-width:0}
.pt-row .pt-del{padding:4px 8px}
#view-estimates table.ols-table .sub-row td,.inv-preview .ols-table .sub-row td,.invoice-page .ols-table .sub-row td{border-top:none;padding-top:2px;padding-bottom:2px;color:#475569}
.pt-list{margin:4px 0 0;padding-left:18px}
.prop-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.prop-actions-hint{font-size:12px}
.row-actions.nowrap{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}

/* ---- Account: payment options editor ---- */
.pm-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.pm-row .pm-type{font-weight:700;min-width:120px}
.pm-row .pm-detail-e{flex:1;min-width:120px;padding:6px 9px;border:1px solid var(--line);border-radius:7px}
.pm-toggle{display:flex;align-items:center}
.pm-add{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.pm-add select,.pm-add #pm-detail{padding:7px 10px;border:1px solid var(--line);border-radius:8px}
.pm-add #pm-detail{flex:1;min-width:160px}
.acc-legal{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;resize:vertical}

/* ===== Themed invoice / estimate ===== */
.sheet.ols.inv-themed { color:#1f2937; padding-top:0; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.inv-themed .inv-accentbar { height:12px; margin:0 -44px 22px; background:linear-gradient(90deg, var(--inv-accent), var(--inv-accent2)); }
.inv-themed .ols-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; min-height:0; }
.inv-themed .ols-brand { display:flex; flex-direction:column; gap:6px; }
.inv-themed .ols-title { font-size:26px; font-weight:800; text-decoration:none; margin:0; color:var(--inv-accent); }
.inv-themed .ols-logo { max-height:64px; margin:0; }
.inv-themed .ols-from { position:static; margin:2px 0 0; font-size:12.5px; line-height:1.5; color:#4b5563; }
.inv-themed .ols-meta { position:static; text-align:right; font-size:13px; line-height:1.3; min-width:200px; }
.inv-themed .inv-word { font-size:24px; font-weight:800; letter-spacing:.06em; color:var(--inv-accent); margin-bottom:8px; }
.inv-themed .im-row { display:flex; justify-content:flex-end; gap:12px; padding:2px 0; }
.inv-themed .im-row .im-k { color:#6b7280; }
.inv-themed .im-row .im-v { font-weight:700; min-width:92px; text-align:right; }
.inv-themed .ols-to { margin:18px 0 6px; font-size:14px; }
/* table theming */
.inv-themed table.ols-table th, .inv-themed table.ols-table td { border:none; padding:9px 11px; font-size:13px; }
.inv-themed table.ols-table thead th { background:var(--inv-accent); color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:11.5px; }
.inv-themed table.ols-table thead th:first-child { border-top-left-radius:7px; }
.inv-themed table.ols-table thead th:last-child { border-top-right-radius:7px; }
.inv-themed.tbl-striped tbody tr:nth-child(even) td { background:color-mix(in srgb, var(--inv-accent) 7%, #fff); }
.inv-themed.tbl-lines tbody td { border-bottom:1px solid #e5e7eb; }
.inv-themed.tbl-bordered table.ols-table th, .inv-themed.tbl-bordered table.ols-table td { border:1px solid #e5e7eb; }
.inv-themed.tbl-minimal tbody td { border-bottom:1px dotted #e5e7eb; }
.inv-themed table.ols-table tr.tot-row td { background:color-mix(in srgb, var(--inv-accent) 14%, #fff); color:#111827; font-weight:800; border-top:2px solid var(--inv-accent); }
.inv-themed table.ols-table tr.od-row td { background:#fff5f5; }
.inv-themed .pay-opts { border-left:3px solid var(--inv-accent); padding:6px 0 6px 12px; margin-top:16px; }
.inv-themed .pay-opts ul { margin:6px 0 0; padding-left:18px; }
.inv-themed .pay-note { color:var(--inv-accent2); font-weight:700; margin-top:14px; }
.inv-themed .inv-warranty { margin-top:16px; font-size:11.5px; color:#6b7280; border-top:1px solid #e5e7eb; padding-top:8px; }
/* header style variants */
.inv-themed.hdr-band .inv-accentbar { height:0; margin:0; }
.inv-themed.hdr-band .ols-head { background:linear-gradient(90deg, var(--inv-accent), var(--inv-accent2)); margin:0 -44px 22px; padding:26px 44px; border-radius:0; }
.inv-themed.hdr-band .ols-title, .inv-themed.hdr-band .inv-word, .inv-themed.hdr-band .ols-from, .inv-themed.hdr-band .im-row .im-k, .inv-themed.hdr-band .im-row .im-v { color:#fff; }
.inv-themed.hdr-band .im-row .im-k { opacity:.85; }
.inv-themed.hdr-side { padding-left:52px; }
.inv-themed.hdr-side .inv-accentbar { position:absolute; left:0; top:0; bottom:0; width:12px; height:auto; margin:0; }
.inv-themed.hdr-side .sheet, .inv-themed.hdr-side { position:relative; }
.inv-themed.hdr-plain .inv-accentbar { height:0; margin:0; border-bottom:2px solid var(--inv-accent); }

/* template editor extra controls */
.te-row{display:flex;gap:10px}
.te-row label{flex:1}
.te-fields{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:4px}
.te-fields .chk{font-size:13px;display:flex;align-items:center;gap:6px;justify-content:flex-start;margin-bottom:4px}
.te-fields .chk input[type="checkbox"]{width:auto;flex:0 0 auto;margin:0}

/* editable estimate inputs */
.inv-editable .est-e{border:1px solid #cbd5e1;border-radius:6px;padding:4px 7px;font:inherit}
.inv-editable .est-e:focus{outline:2px solid var(--inv-accent,#16a34a);outline-offset:-1px}
.inv-editable .est-e-title{font-size:17px;font-weight:700;width:60%}
.inv-editable .est-e-desc,.inv-editable .est-e-disc{width:100%}
.inv-editable .est-e-del{margin-left:8px;border:none;background:none;color:var(--red);cursor:pointer;font-weight:700}
.inv-editable .est-titleline{margin:10px 0}
.inv-editable table.ols-table thead th:last-child{border-top-right-radius:7px}

/* Admin (Demo) */
.admin-acct{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.admin-acct .aa-name{font-weight:700;min-width:140px}
.admin-acct .aa-tenant{color:var(--muted);font-size:12px}
.admin-banner{background:#fef3c7;border:1px solid #fcd34d;color:#92400e;padding:10px 14px;border-radius:10px;margin-bottom:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ===== AI assistant: topbar button + dedicated page ===== */
.topbar-right{display:flex;align-items:center;gap:8px}
.ai-q{width:30px;height:30px;border-radius:999px;border:0;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.ai-q:hover{filter:brightness(1.08)}
.ai-page{display:flex;flex-direction:column;height:calc(100vh - 56px - 40px);min-height:420px}
.ai-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ai-top h2{margin:0}
.ai-cols{display:flex;gap:16px;flex:1;min-height:0}
.ai-chatcol{display:flex;flex-direction:column;flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ai-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.ai-msg{display:flex}
.ai-msg.ai-me{justify-content:flex-end}
.ai-bubble{max-width:82%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5}
.ai-me .ai-bubble{background:var(--green);color:#fff;border-bottom-right-radius:4px}
.ai-bot .ai-bubble{background:#f1f5f9;color:#1f2937;border-bottom-left-radius:4px}
.ai-bot .ai-bubble a{color:var(--green-d);font-weight:600;cursor:pointer;text-decoration:underline}
.ai-sugg{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ai-sugg li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;font-size:13px;transition:border-color .1s}
.ai-sugg li:hover{border-color:var(--green)}
.ai-acts{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.ai-composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fafafa}
.ai-composer input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.ai-composer input:focus{outline:2px solid var(--green);outline-offset:-1px}
.ai-sidecol{width:320px;flex-shrink:0;overflow-y:auto}
.ai-side-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.ai-side-card h4{margin:0 0 10px}
.ai-cando{margin:0;padding-left:0;list-style:none;font-size:13px;color:#4b5563;display:flex;flex-direction:column;gap:8px}
.ai-estprev .ep-row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}
.ai-estprev .ep-row span{color:var(--muted)}
.ai-estprev hr{border:none;border-top:1px solid var(--line);margin:6px 0}
.ai-estprev .ep-total strong{color:var(--green-d);font-size:16px}
@media(max-width:820px){.ai-cols{flex-direction:column}.ai-sidecol{width:auto}.ai-page{height:auto}.ai-thread{min-height:300px;max-height:50vh}}

/* Admin account cards */
.admin-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.ac-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ac-head .aa-tenant{color:var(--muted);font-size:12px}
.ac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.ac-box{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ac-box h5{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ac-box .chk-inline{display:block;margin:3px 0}
.ac-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.ac-row label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:3px}
.ac-row input,.ac-row select,.aa-cclink{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px}
.aa-cclink{width:100%}
.ac-row .aa-price{width:80px}
.ac-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}

/* ===== Catalog tree ===== */
.cat-tree{margin-top:8px}
.cn-node{margin:0}
.cn-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;margin:6px 0}
.cn-node.lvl1>.cn-head{background:#f8fafc;font-weight:700}
.cn-node.lvl2>.cn-head{font-weight:600}
.cn-head.cn-off{opacity:.55}
.cn-tog{border:none;background:none;cursor:pointer;width:20px;color:var(--muted);font-size:13px}
.cn-name{font-size:14px}
.cn-price{background:#ecfdf5;color:var(--green-d);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;margin-left:6px}
.cn-kids{margin-left:22px;border-left:2px solid var(--line);padding-left:10px}
.pill-sm{font-size:10px;background:#eef2ff;color:#4338ca;border-radius:999px;padding:1px 7px;font-weight:700}

/* ===== Estimate builder ===== */
.builder-cols{display:flex;gap:16px;align-items:flex-start}
.builder-form{flex:1;min-width:0}
.builder-preview{width:380px;flex-shrink:0;position:sticky;top:70px}
.builder-preview #b-preview{transform-origin:top left}
.b-lines-head{display:grid;grid-template-columns:18px minmax(60px,1fr) 48px 78px 68px 64px 86px;gap:8px;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:0 2px 6px}
.b-lines-head.rec,.b-line-rec .bl-main{grid-template-columns:18px minmax(60px,1fr) 112px 68px 64px 86px}
.b-line{margin:6px 0}
.b-line input,.b-line select{padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:13px;width:100%}
.b-line .bl-amt{font-weight:700;font-size:13px;text-align:right}
.b-line .bl-del{padding:5px 8px}
@media(max-width:900px){.builder-cols{flex-direction:column}.builder-preview{width:100%;position:static}
  .b-lines-head{display:none}.b-line{grid-template-columns:1fr 1fr;gap:6px}.b-line .bl-desc{grid-column:1/3}}

/* ===== Estimate builder v2 ===== */
.builder-preview{width:500px}
.builder-preview #b-preview{max-height:calc(100vh - 130px);overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.b-line{display:block;margin:4px 0}
.bl-main{display:grid;grid-template-columns:18px minmax(60px,1fr) 48px 78px 68px 64px 86px;gap:8px;align-items:center}
.bl-main .bl-amt{overflow:hidden;text-overflow:ellipsis}
.bl-tools{justify-content:flex-end}
.bl-drag{cursor:grab;color:#94a3b8;text-align:center;user-select:none;font-size:14px}
.bl-drag:active{cursor:grabbing}
.b-line.dragging{opacity:.4}
.b-line.drag-over{box-shadow:0 -2px 0 var(--green)}
.builder-cols.preview-hidden .builder-preview{display:none}
.builder-cols.preview-hidden .builder-form{max-width:900px;margin:0 auto}
.bl-main input,.bl-main select{padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:13px;width:100%}
.bl-main .bl-amt{font-weight:700;font-size:13px;text-align:right;white-space:nowrap}
.bl-tools{display:flex;gap:2px;align-items:center}
.bl-ic{border:1px solid var(--line);background:#fff;border-radius:6px;width:26px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;padding:0}
.bl-ic:hover{background:#f3f4f6}
.bl-ic.bl-x{color:var(--red);border-color:#fecaca}
.bl-thumb{margin:4px 0 0 2px;position:relative;display:inline-block}
.bl-thumb img{height:54px;border-radius:7px;border:1px solid var(--line)}
.bl-thumb .bl-imgx{position:absolute;top:-6px;right:-6px;background:#111827;color:#fff;border:none;border-radius:999px;width:18px;height:18px;cursor:pointer;font-size:11px;line-height:1}
.bl-below{padding:2px 0 2px}
.linkish{border:none;background:none;color:var(--green-d);font-size:12px;cursor:pointer;padding:0}
.linkish:hover{text-decoration:underline}
.b-pays{display:flex;flex-direction:column;gap:5px}
.b-pays .chk-inline{font-size:13px}
.est-li-img img{height:60px;border-radius:6px;margin-top:5px;border:1px solid #e5e7eb}
@media(max-width:900px){.builder-preview{width:100%}.builder-preview #b-preview{max-height:none}
  .bl-main{grid-template-columns:1fr 1fr;gap:6px}.bl-main .bl-drag{display:none}.bl-main .bl-desc{grid-column:1/3}.bl-tools{grid-column:1/3;justify-content:flex-end}}

/* ===== Jobs page: bulk, selection, clickable stage ===== */
.bulkbar{display:flex;align-items:center;gap:10px;background:#eef6ff;border:1px solid #bfdbfe;border-radius:10px;padding:8px 14px;margin:8px 0;flex-wrap:wrap}
.bulkbar select{padding:5px 8px;border:1px solid var(--line);border-radius:7px}
th.chk-col{width:34px}
tr.row-sel td{background:#eff6ff}
.stepper .step{border:none;font:inherit;cursor:pointer}
.stepper .step:hover{filter:brightness(.95);box-shadow:0 0 0 2px rgba(22,163,74,.25)}
/* ===== Schedule modal (calendar + workers) ===== */
.sched-modal{display:flex;gap:20px;flex-wrap:wrap}
.sched-cal{flex:1;min-width:280px}
.sched-workers{width:230px;flex-shrink:0;max-height:320px;overflow:auto}
.sched-cal .jc-month{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.sched-cal .mini-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:11px;color:var(--muted);margin-bottom:4px}
.sched-cal .jc-cell{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px}
.sched-cal .jc-cell.off{color:#cbd5e1}
.sched-cal .jc-cell.today{border-color:var(--green);font-weight:700}
.sched-cal .jc-cell.sel{background:var(--green);color:#fff;border-color:var(--green)}

/* template editor: two-list section picker */
.xfer{display:flex;gap:12px}
.xfer-col{flex:1;min-width:0}
.xfer-col h5{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.xfer-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:9px;min-height:120px;background:#fff}
.xfer-list li{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:13px}
.xfer-list li:last-child{border-bottom:none}
.xfer-list li span:first-of-type,.xfer-list li>span{flex:1}
.xfer-list .xf-ord{display:flex;gap:2px;flex:0}
.xfer-list .xf-rm{color:var(--red);border-color:#fecaca}
.xfer-empty{color:var(--muted);justify-content:center}

/* estimate status select colors */
.est-status{padding:4px 8px;border:1px solid var(--line);border-radius:7px;font-weight:600;font-size:12px;cursor:pointer}
.est-status.status-draft{background:#f1f5f9;color:#475569}
.est-status.status-sent{background:#dbeafe;color:#1d4ed8}
.est-status.status-accepted{background:#dcfce7;color:#15803d}
.est-status.status-declined{background:#fee2e2;color:#b91c1c}

/* catalog node thumbnail */
.cn-thumb{width:34px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.cn-img-prev{width:84px;height:60px}
.cn-img-prev img{width:100%;height:100%;object-fit:cover;border-radius:7px}

/* ===== Pre-built invoices (cards + editor) ===== */
.pbi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:8px}
.pbi-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.pbi-thumb{height:190px;overflow:hidden;border-bottom:1px solid var(--line);background:#fff;position:relative}
.pbi-thumb .invoice-page{transform:scale(.42);transform-origin:top left;width:238%;pointer-events:none}
.pbi-thumb .sheet{box-shadow:none;padding:28px 30px}
.pbi-body{padding:11px 13px}
.pbi-body .linkish{cursor:pointer}
.et-editor{display:flex;gap:18px}
.et-form{flex:1;min-width:0}
.et-preview{width:360px;flex-shrink:0;max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
@media(max-width:820px){.et-editor{flex-direction:column}.et-preview{width:100%;max-height:none}}

/* ===== Reports dashboard ===== */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:8px}
.rep-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.rep-card-stat{text-align:center}
.rep-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rep-head strong{flex:1;font-size:14px}
.rep-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px}
.rep-x:hover{color:var(--red)}
.rep-stat{font-size:34px;font-weight:800;color:var(--green-d);padding:14px 0}
.rep-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rep-pick-btn{text-align:left;border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;cursor:pointer;font-size:13px;font-weight:600}
.rep-pick-btn:hover{border-color:var(--green);background:#f0fdf4}
/* payroll inputs */
.pr-in{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-size:13px;text-align:right}

/* ===== Notifications bell + panel ===== */
.bell-btn{position:relative;width:30px;height:30px;border-radius:999px;border:0;cursor:pointer;background:#eef2f7;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.bell-btn:hover{background:#e2e8f0}
.bell-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;border-radius:999px;min-width:16px;height:16px;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 3px}
.notif-panel{position:fixed;z-index:70;width:330px;max-height:60vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 36px rgba(0,0,0,.14)}
.notif-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.notif-head strong{flex:1}
.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.notif-item.unread{background:#f0f9ff}
.notif-dot{font-size:15px}
.notif-empty{padding:18px;text-align:center}

/* ===== Public approval / payment pages ===== */
#public{min-height:100vh;background:#f1f5f9}
.pub-wrap{max-width:760px;margin:0 auto;padding:24px 16px 60px}
.pub-top{display:flex;align-items:center;gap:10px;padding:10px 2px 18px}
.pub-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.pub-actions{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
.pub-ok{color:var(--green-d);font-weight:700}
.pub-pay{max-width:440px;margin:0 auto}
.pub-pay .btn.block{margin-top:14px}
.pub-success{text-align:center;max-width:440px;margin:40px auto}
.pub-check{width:64px;height:64px;border-radius:999px;background:var(--green);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}

/* payroll: fill cell so inputs sit under their right-aligned headers */
.grid td .pr-in{width:100% !important;min-width:46px;text-align:right}
.grid td:has(.pr-in){text-align:right}

/* contact field validation + estimates zebra rows */
.input-bad{border-color:var(--red) !important;background:#fef2f2}
#view-estimates table.grid tbody tr:nth-child(even):not(.row-sel) td{background:#f8fafc}

.req{color:var(--red);font-weight:700}

/* ---- Brand two-liner (sidebar) ---- */
.side-brand { align-items: center; }
.side-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.side-name .brand-co { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-name .brand-powered { font-weight: 600; font-size: 10.5px; opacity: .72; letter-spacing: .01em; }

/* ---- Admin: platform brand picker ---- */
.brand-choose { display: flex; gap: 10px; flex-wrap: wrap; }
.brand-pick { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 180px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; }
.brand-pick:hover { border-color: var(--green); }
.brand-pick.active { border-color: var(--green); background: #ecfdf5; }
.brand-pick-mark { font-size: 22px; }
.brand-pick-name { font-weight: 800; color: var(--green-d); }
.brand-pick-dom { font-size: 12px; }

/* ---- Home (landing) ---- */
.home { max-width: 1040px; }
.home-hero { margin-bottom: 18px; }
.home-hello { margin: 0 0 2px; font-size: 26px; color: var(--green-d); }
.home-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.home-tile { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: default; font: inherit; color: inherit; }
button.home-tile { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
button.home-tile:hover { border-color: var(--green); box-shadow: 0 2px 10px rgba(22,163,74,.08); }
.home-tile .ht-k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.home-tile .ht-v { font-size: 28px; font-weight: 800; color: var(--green-d); margin: 4px 0 2px; }
.home-tile .ht-sub { color: var(--muted); font-size: 12px; }
.home-tile.ht-warn .ht-v { color: var(--amber); }
.home-ai { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.home-ai-title { margin: 0 0 12px; font-size: 18px; color: var(--green-d); }
.home-ai-form { display: flex; gap: 8px; }
.home-ai-form input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.home-ai-form input:focus { outline: none; border-color: var(--green); }
.home-ai-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.home-chip { border: 1px solid var(--line); background: #f9fafb; border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--ink); cursor: pointer; }
.home-chip:hover { border-color: var(--green); color: var(--green-d); background: #ecfdf5; }
@media (max-width: 860px) { .home-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .home-tiles { grid-template-columns: 1fr; } .home-ai-form { flex-direction: column; } }

/* ---- AI chat history ---- */
.ai-hist { margin-bottom: 12px; }
.ai-hist-head { display: flex; align-items: center; gap: 8px; }
.ai-hist-head h4 { margin: 0; flex: 1; }
.ai-hist-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; }
.ai-hist-item { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.ai-hist-item:hover { background: #f3f4f6; }
.ai-hist-item.active { background: #ecfdf5; }
.ai-hist-item .ah-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; color: var(--ink); }
.ai-hist-item.active .ah-title { color: var(--green-d); }
.ai-hist-item .ah-time { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ai-hist-item .ah-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 6px; opacity: 0; }
.ai-hist-item:hover .ah-del { opacity: 1; }
.ai-hist-item .ah-del:hover { background: #fee2e2; color: var(--red); }

/* ---- AI typing indicator ---- */
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .4; animation: ai-blink 1.2s infinite both; }
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } }

/* ---- Email outreach (js/app-outreach.js) ---- */
.or-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
@media (max-width: 1000px) { .or-grid { grid-template-columns: minmax(0, 1fr); } }
.or-grid .form-grid select { display: block; width: 100%; margin-top: 3px; padding: 8px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; background: #fff; }
.or-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.or-tags .btn.small { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.or-list { max-height: 460px; overflow: auto; border-radius: 10px; }
.or-list tr.or-skip td { color: #9ca3af; }
.or-why { display: inline-block; font-size: 10px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.or-count { font-size: 13px; }
.or-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.or-actions .spacer { flex: 1; }
.or-prev-head { display: grid; gap: 4px; font-size: 13px; padding: 8px 12px; background: #f9fafb; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.or-prev-head .muted { display: inline-block; width: 58px; }
.or-prev { border: 1px solid var(--line); border-radius: 8px; padding: 6px 16px; background: #fff; }
.or-bar { height: 8px; background: #eef2f0; border-radius: 999px; overflow: hidden; }
.or-bar > div { height: 100%; width: 0; background: var(--green); transition: width .2s; }
/* outreach: options editor, results, client booking page */
.or-opt-row { display: grid; grid-template-columns: minmax(0, 2fr) 110px minmax(0, 2fr) auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.or-opt-row input { width: 100%; padding: 7px 8px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; }
.or-o-price-wrap { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .or-opt-row { grid-template-columns: minmax(0, 1fr) 100px auto; } .or-opt-row .or-o-desc { grid-column: 1 / -1; grid-row: 2; } }
.or-opt-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; font-size: 12px; font-weight: 600; color: #374151; }
.or-opt-tools select { margin-left: 6px; padding: 5px 7px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 12px; }
.or-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; }
.or-ends { font-size: 12px; font-weight: 600; color: #374151; }
.or-ends input { padding: 5px 7px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 12px; }
.or-confirm { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.or-hist-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.or-hist-head .spacer { flex: 1; }
.or-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.or-tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fafafa; }
.or-tile-n { font-size: 20px; font-weight: 800; color: var(--green-d); }
.or-tile-n .muted { font-size: 12px; font-weight: 600; }
.or-tile-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.or-st { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.or-st-sent { background: #f3f4f6; color: #4b5563; } .or-st-viewed { background: #dbeafe; color: #1e40af; }
.or-st-booked { background: #dcfce7; color: #166534; } .or-st-declined { background: #fee2e2; color: #991b1b; }
.or-prev-pub { padding: 18px; background: #f8faf9; }
.or-pub h4 { margin: 18px 0 8px; font-size: 14px; }
.or-pub-h { margin: 0 0 6px; color: var(--green-d); }
.or-pub-promo { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 10px; padding: 10px 12px; font-weight: 700; margin: 10px 0; }
.or-pub-ends { color: #b45309; font-size: 13px; font-weight: 600; margin: 4px 0; }
.or-pub-opts { display: grid; gap: 8px; }
.or-pub-opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; background: #fff; }
.or-pub-opt:has(input:checked) { border-color: var(--green); background: #f0fdf4; }
.or-pub-opt input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.or-pub-opt-main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.or-pub-opt-main .muted { font-size: 12px; }
.or-pub-opt-price { font-weight: 800; color: var(--green-d); white-space: nowrap; }
.or-pub-total { margin-top: 10px; font-size: 15px; text-align: right; }
.or-pub-when { display: grid; gap: 8px; font-size: 14px; }
.or-pub-when input[type=date] { margin-left: 6px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 7px; }
.or-pub textarea, .or-pub input[type=tel] { width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; }
.or-pub .pub-actions .btn { padding: 11px 20px; font-size: 14px; }
.or-pub-foot { text-align: center; font-size: 12px; margin-top: 14px; }
.or-ai-btn { border-color: #c4b5fd; color: #5b21b6; }
.or-ai-lbl { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-top: 8px; }
.or-ai-lbl input, .or-ai-lbl textarea { display: block; width: 100%; margin-top: 3px; padding: 8px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; font-family: inherit; }

/* ---- Admin → AI assistant (js/app-admin-ai.js) ---- */
.aai-panel { margin: 14px 0; }
.aai-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aai-head .spacer { flex: 1; }
.aai-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.aai-row { cursor: pointer; }
.aai-row:hover td { background: #f9fafb; }
.aai-detail td { background: #fafafa; }
.aai-detail h5 { margin: 0 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.aai-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 800px) { .aai-detail-grid { grid-template-columns: minmax(0, 1fr); } }
.aai-bars { display: flex; align-items: flex-end; gap: 3px; height: 80px; overflow-x: auto; }
.aai-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 14px; height: 100%; }
.aai-bars .aai-bar > span { display: block; flex: none; min-height: 0; padding: 0; width: 10px; background: var(--green); border-radius: 3px 3px 0 0; }
.aai-bar em { font-style: normal; font-size: 9px; color: var(--muted); margin-top: 2px; }
.aai-pricing { margin-top: 12px; font-size: 13px; }
.aai-pricing summary { cursor: pointer; color: #374151; }
.aai-conv { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; min-height: 320px; }
@media (max-width: 800px) { .aai-conv { grid-template-columns: minmax(0, 1fr); } .aai-conv-list { max-height: 220px; } }
.aai-conv-list { border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 520px; background: #fff; }
.aai-conv-item { display: grid; gap: 2px; width: 100%; text-align: left; padding: 9px 12px; border: none; border-bottom: 1px solid #f0f0f0; background: none; cursor: pointer; font: inherit; font-size: 13px; }
.aai-conv-item .muted { font-size: 11px; }
.aai-conv-item.active { background: #f0fdf4; box-shadow: inset 3px 0 0 var(--green); }
.aai-conv-view { border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow: auto; max-height: 520px; background: #fafafa; }
.aai-conv-title { display: grid; gap: 2px; margin-bottom: 10px; font-size: 13px; }
.aai-conv-title .muted { font-size: 11px; }
.aai-msg { display: flex; flex-direction: column; margin: 8px 0; }
.aai-msg.u { align-items: flex-end; }
.aai-who { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.aai-bubble { max-width: 85%; padding: 8px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.aai-msg.u .aai-bubble { background: #dcfce7; border-color: #bbf7d0; }
.aai-instr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 10px; }
@media (max-width: 900px) { .aai-instr { grid-template-columns: minmax(0, 1fr); } }
.aai-col h4 { margin: 0 0 8px; font-size: 14px; color: var(--green-d); }
.aai-meta { display: grid; gap: 3px; font-size: 13px; margin-bottom: 8px; }
.aai-pre { white-space: pre-wrap; background: #f9fafb; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.5; max-height: 420px; overflow: auto; margin: 0 0 6px; }
.aai-lbl { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.aai-lbl select { margin-left: 6px; padding: 5px 7px; border: 1px solid #d1d5db; border-radius: 7px; }
.aai-col textarea, .aai-try input { width: 100%; padding: 8px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; font-family: inherit; }
.aai-in-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.aai-try { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.aai-try h5 { margin: 0 0 6px; font-size: 13px; }
.aai-try-row { display: flex; gap: 6px; }
.aai-try-ans { max-width: none; margin-top: 8px; }

/* ---- App loading screen (sign-in / refresh, until workspace data arrives) ---- */
.app-loading-msg { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; margin: 4px 0 18px; }
.app-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: app-spin .7s linear infinite; vertical-align: -3px; margin-right: 8px; opacity: .8; }
.app-loading-msg .app-spin { margin-right: 0; color: var(--green); }
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.sk-tile, .sk-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sk-panel { gap: 14px; padding: 20px 16px; }
.sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 50%, #eef0f2 75%); background-size: 200% 100%; animation: sk-shimmer 1.2s ease-in-out infinite; }
.sk-tile .sk:last-child { height: 22px; }
@keyframes app-spin { to { transform: rotate(360deg); } }
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .app-spin, .sk { animation-duration: 2.4s; } }

/* AI budget: cap message + request button (app-ai.js), Admin budget column (app-admin-ai.js) */
.ai-cap { display: grid; gap: 8px; justify-items: start; }
.ai-cap-done { font-size: 13px; color: var(--green-d); font-weight: 600; }
.aai-bcell { min-width: 170px; }
.aai-budget { display: grid; gap: 3px; justify-items: start; font-size: 12px; }
.aai-bbar { width: 140px; height: 7px; border-radius: 999px; background: #eef2f0; overflow: hidden; }
.aai-bbar span { display: block; height: 100%; background: var(--green); }
.aai-budget.warn .aai-bbar span { background: var(--amber, #d97706); }
.aai-budget.over .aai-bbar span { background: var(--red, #dc2626); }
.aai-budget.over .aai-btxt { color: var(--red, #dc2626); font-weight: 700; }
.aai-off { font-size: 11px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: 1px 8px; }
.aai-asked { font-size: 11px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 1px 8px; }
.aai-budget .btn.small { padding: 2px 8px; font-size: 11px; }
.aai-defcap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; }
.aai-defcap .muted { font-size: 12px; flex-basis: 100%; }
.aai-money-in { display: inline-flex; align-items: center; gap: 3px; }
.aai-money-in input { width: 80px; padding: 5px 7px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; }
.aai-capform { display: grid; gap: 10px; font-size: 14px; margin-bottom: 10px; }
/* ---- Password boxes: show/hide eye + strength meter (enhancePasswordFields) ---- */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 42px !important; }
.pw-eye { position: absolute; right: 4px; top: 4px; bottom: 0; width: 34px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.pw-eye:hover { color: var(--ink); }
.pw-eye:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.pw-meter[data-score="0"] { display: none; }
.pw-meter strong { font-weight: 700; }
.pw-bars { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.pw-bars i { width: 22px; height: 5px; border-radius: 3px; background: var(--line); transition: background .15s; }
.pw-meter[data-score="1"] .pw-bars i:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-score="1"] strong { color: var(--red); }
.pw-meter[data-score="2"] .pw-bars i:nth-child(-n+2) { background: var(--amber); }
.pw-meter[data-score="2"] strong { color: var(--amber); }
.pw-meter[data-score="3"] .pw-bars i:nth-child(-n+3) { background: #65a30d; }
.pw-meter[data-score="3"] strong { color: #4d7c0f; }
.pw-meter[data-score="4"] .pw-bars i { background: var(--green); }
.pw-meter[data-score="4"] strong { color: var(--green-d); }
.pw-match { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; }
.pw-match.ok { color: var(--green-d); }
.pw-match.bad { color: var(--amber); }

/* Per-company AI switch: body.ai-off (set in applyRoleNav) hides every ✨ entry point; Admin switch */
body.ai-off #ai-btn, body.ai-off .home-ai, body.ai-off #job-ai, body.ai-off #rep-ai, body.ai-off .or-ai-btn { display: none !important; }
.aai-switch { position: relative; display: inline-block; width: 34px; height: 20px; cursor: pointer; }
.aai-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.aai-switch span { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; transition: background .15s; }
.aai-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.aai-switch input:checked + span { background: var(--green); }
.aai-switch input:checked + span::after { transform: translateX(14px); }
.aai-switch input:disabled + span { opacity: .5; cursor: default; }
.aai-switch input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
/* ---- Two-step sign-in: code step on the sign-in screen + Account panel ---- */
.mfa-h { margin: 6px 0 2px; font-size: 18px; }
.mfa-sent { margin: 0 0 12px; font-size: 14px; }
#mfa-code { letter-spacing: 6px; font-size: 20px; font-weight: 700; text-align: center; }
.mfa-links { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; font-size: 13px; color: var(--muted); }
.linkish { border: 0; background: none; padding: 0; color: var(--green-d); font-weight: 600; cursor: pointer; font-size: 13px; }
.linkish:hover { text-decoration: underline; }
.mfa-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.mfa-on { margin: 6px 0 8px; font-size: 14px; color: var(--green-d); }
.admin-banner.admin-warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; display: flex; align-items: center; gap: 10px; }