/* Plumbline additions on top of the shared gunmetal+gold sheet (style.css). */
.tabs::-webkit-scrollbar { display: none; }
.btn.danger { background: var(--bad); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.tiny { min-height: 30px; padding: 3px 9px; font-size: 13px; border-radius: 8px; }
.toast[data-kind=bad] { background: var(--bad); }
.toast[data-kind=ok] { background: var(--ok); }
dialog.wide { width: min(720px, calc(100vw - 24px)); }
dialog { max-height: calc(100vh - 32px); overflow: auto; }
.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head h1 { font-size: 22px; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crumb { font-size: 13px; color: var(--muted); }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat.bad b { color: var(--bad); } .stat.ok b { color: var(--ok); } .stat.warn b { color: var(--warn); }
.subtabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.subtab.active { background: var(--gun); color: #fff; border-color: var(--gun); }
.subtab .n { color: var(--gold); margin-left: 4px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar > input, .toolbar > select { margin: 0; flex: 1; min-width: 140px; }
.right { margin-left: auto; }
.item.click { cursor: pointer; }
.item.click:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.item .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag.gold { background: var(--gold-tint); color: var(--gun); }
.tag.gray { background: var(--field); color: var(--muted); border: 1px solid var(--line); }
.flags { display: flex; gap: 6px; flex-wrap: wrap; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 6px 8px; border-bottom: 2px solid var(--line); white-space: nowrap; }
table.t td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t td.n, table.t th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t tfoot td { font-weight: 800; border-bottom: 0; }
table.t input, table.t select { margin: 0; min-height: 38px; padding: 6px 8px; font-size: 15px; }
.tscroll { overflow-x: auto; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.photos .ph { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--field); border: 1px solid var(--line); cursor: pointer; }
.photos img, .photos video { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photos .sel { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; accent-color: var(--gold); margin: 0; }
.clock { text-align: center; }
.clock .big { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.clock.on { background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.bar { height: 10px; border-radius: 6px; background: var(--field); border: 1px solid var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); }
.bar.over > i { background: var(--bad); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.kv .tot { font-weight: 800; border-top: 2px solid var(--line); padding-top: 6px; margin-top: 4px; color: var(--ink); }
.err-list { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.notice.bad { background: var(--bad-bg); color: var(--bad); }
.notice.ok { background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); }
.notice.info { background: var(--field); color: var(--ink); border: 1px solid var(--line); }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; padding: 4px; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 14px; background: var(--field); border: 1px solid var(--line); font-size: 15px; overflow-wrap: anywhere; white-space: pre-wrap; }
.bubble.me { align-self: flex-end; background: var(--gold-tint); color: var(--gun); border-color: transparent; }
.bubble small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.checkrow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--line); }
.checkrow:first-child { border-top: 0; }
.checkrow input[type=checkbox] { width: 26px; height: 26px; flex: none; accent-color: var(--gold-dark); margin: 0; }
.checkrow.done .txt { text-decoration: line-through; color: var(--muted); }
.userswitch { font-size: 12px; background: var(--bad); color: #fff; padding: 3px 8px; text-align: center; }
.userswitch select { display: inline; width: auto; min-height: 0; margin: 0 6px; padding: 1px 4px; font-size: 12px; }
.tool-card { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.tool-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--gun); color: var(--gold); display: grid; place-items: center; font-size: 22px; flex: none; }
.signin { max-width: 420px; margin: 40px auto; }
.paper { background: #fff; color: #222; border-radius: 8px; padding: 22px; box-shadow: var(--shadow); font-size: 14px; }
.sticky-save { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 70%, transparent); padding: 12px 0 6px; z-index: 3; }
.inline-edit { display: inline; width: 90px; min-height: 34px; margin: 0; padding: 4px 8px; }
@media (max-width: 560px) { .page-head h1 { font-size: 19px; } .hide-sm { display: none; } }
@media print { .hero, .tabs, .toolbar, .btn, .subtabs { display: none !important; } body { background: #fff; } }

/* AI quote draft */
.q-grp{margin:14px 2px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#6b7780)}
.ai-card .pdf-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:84px;font-size:26px;background:var(--bg2,#eef1f3)}
.ai-card .pdf-tile small{font-size:10px;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-card ul{margin:2px 0 0 18px;padding:0}

.ai-card .seg{display:flex;gap:0;margin:2px 0 10px;border:1px solid var(--line,#d5dade);border-radius:10px;overflow:hidden}
.ai-card .seg button{flex:1;padding:9px 6px;border:0;background:transparent;font:inherit;font-size:13px;cursor:pointer;color:inherit}
.ai-card .seg button.on{background:var(--gold,#c9a227);color:#1b2327;font-weight:700}

/* Life Dash people picker */
.ld-list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.ld-row{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:6px 8px;border:1px solid var(--line,#d5dade);border-radius:10px}
.ld-row .ld-name input{width:100%}
.ld-row>.muted{grid-column:2;font-size:12px}

.qline .q-desc{width:100%;margin:2px 0 8px;padding:7px 10px;border:1px solid var(--line,#d5dade);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:13px}
.qline .q-desc::placeholder{color:var(--muted,#8a959c)}
.qline textarea.q-desc{resize:vertical;line-height:1.35;min-height:34px}

/* Quote builder: roomy layout on wide screens — description under the name, numbers in one tidy block on the right */
@media (min-width: 1100px) {
  .qbuilder { max-width: 960px; }
  .qline { display: grid; grid-template-columns: minmax(260px, 1fr) auto; grid-template-areas: "name nums" "desc nums" "cost cost"; column-gap: 18px; row-gap: 6px; align-items: start; padding: 12px 14px; }
  .qline .q-top { grid-area: name; }
  .qline .q-desc { grid-area: desc; margin: 0; }
  .qline .q-row:not(.cost) { grid-area: nums; margin-top: 0; grid-template-columns: auto 70px 110px 110px; }
  .qline .q-row.cost { grid-area: cost; grid-template-columns: 160px 1fr; margin-top: 0; }
  .qline .q-total { text-align: right; min-width: 96px; }
  .q-grp { margin-top: 18px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
}
.qline:focus-within { border-color: var(--gold, #cf9c29); }
.qline .q-desc { color: var(--muted, #8a959c); }
.qline .q-desc:focus { color: inherit; }

/* wrapping + text sizes in the quote builder */
.qline textarea.q-name{width:100%;resize:none;overflow:hidden;line-height:1.3;font-size:16px;font-weight:700;padding:10px 12px;min-height:44px;margin:0;font-family:inherit}
.qline textarea.q-desc{font-size:13.5px;line-height:1.4;overflow:hidden;padding:8px 10px;min-height:36px}
.qline .stepper input,.qline .q-unit,.qline .q-price input{font-size:15px}
.q-total{font-size:16px}
@media (max-width: 820px){ .qline textarea.q-name{font-size:16px} .qline textarea.q-desc{font-size:14px} }

.qline .q-top{width:100%}
.qline .q-namebox{flex:1;min-width:0}

/* check a line off = "this one is right, AI leave it alone" */
.q-check{flex:none;width:30px;height:30px;margin:7px 8px 0 0;border:2px solid var(--line,#5b666c);border-radius:50%;background:transparent;color:#1b2327;font-weight:800;font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center}
.q-check.on{background:var(--gold,#cf9c29);border-color:var(--gold,#cf9c29)}
.q-check:hover{border-color:var(--gold,#cf9c29)}
.qline:has(.q-check.on){box-shadow:inset 4px 0 0 var(--gold,#cf9c29)}

/* ---- phone: tighter quote lines, one-row bottom bar ---- */
.qbar-more{display:none}
@media (max-width: 820px){
  .qbuilder{padding-bottom:140px}
  .qline{padding:8px 10px;margin-bottom:6px}
  .qline .q-top{gap:6px}
  .q-check{width:28px;height:28px;margin:6px 4px 0 0}
  .qline textarea.q-name{font-size:15.5px;padding:8px 10px;min-height:40px}
  .qline textarea.q-desc{font-size:13px;padding:6px 9px;min-height:32px;margin:4px 0 0}
  .qline .q-row{margin-top:6px;gap:6px}
  .q-row input,.q-row select{min-height:40px}
  .stepper button{width:38px;height:40px}.stepper input{width:48px;min-height:40px}
  .q-total{font-size:16px}
  .q-grp{margin:12px 2px 4px;font-size:11.5px}
  .qbar{flex-wrap:nowrap;gap:8px;padding:8px 10px}
  .qbar-l{min-width:0}.qtot b{font-size:22px}.qsub{font-size:11px}
  .qbar-r .qbar-opt{display:none}.qbar-more{display:inline-flex}
  .qbar-r .btn.primary{padding:10px 14px}
  .qstat{display:none}
}
/* phone: quantity, unit, price and total on ONE row */
@media (max-width: 820px){
  .qline .q-row:not(.cost){grid-template-columns:auto 46px minmax(64px,1fr) auto;gap:5px}
  .qline .q-row .q-unit{width:100%;padding:0 4px;font-size:14px}
  .qline .stepper button{width:32px}.qline .stepper input{width:42px;font-size:15px;padding:0}
  .qline .q-price{min-width:0}.qline .q-price input{width:100%;min-width:0;padding:0 6px;font-size:15px}
  .qline .q-total{font-size:15px;min-width:64px;text-align:right}
}

.stores{font-size:12.5px;color:var(--muted,#8a959c)} .stores .best{color:var(--ok,#4caf6e);font-weight:700}

.shop{margin:6px 0 10px;padding-left:18px} .shop li{margin:4px 0;line-height:1.35}

.orig-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border:1px solid var(--line,#d5dade);border-radius:10px;font-size:13px}
.orig-bar select{min-height:34px;padding:0 8px;font-size:13px}

.ph .vwait{top:auto;bottom:5px;left:5px;font-size:11px;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff}

.cap-auto{margin:10px 0;padding:10px 12px;border:1px solid var(--gold,#cf9c29);border-radius:12px;background:rgba(207,156,41,.07)}
.cap-auto textarea{width:100%;margin:8px 0;min-height:70px}
.cap-auto .seg{display:flex;border:1px solid var(--line,#d5dade);border-radius:10px;overflow:hidden}
.cap-auto .seg button{flex:1;padding:8px 4px;border:0;background:transparent;font:inherit;font-size:13px;color:inherit;cursor:pointer}
.cap-auto .seg button.on{background:var(--gold,#cf9c29);color:#1b2327;font-weight:700}

/* home boxes you can pick up and move */
.dash > .widget{touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.dash > .widget.dragging{position:relative;z-index:60;box-shadow:0 14px 34px rgba(0,0,0,.45);outline:2px solid var(--gold,#cf9c29);transition:none;cursor:grabbing;opacity:.97}
.dash.reordering > .widget:not(.dragging){opacity:.8}
.dash.reordering{cursor:grabbing}
.dash-tip{margin:10px 2px 0;font-size:12.5px;color:var(--muted,#8a959c)}
.dash-tip .link{background:none;border:0;padding:0;color:var(--link,#4ea3ff);cursor:pointer;font:inherit;text-decoration:underline}

/* door-hanger photos on a customer's profile */
.hh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.hh{margin:0;border:1px solid var(--line,#d5dade);border-radius:10px;overflow:hidden;background:var(--field,transparent)}
.hh img{width:100%;display:block;max-height:340px;object-fit:contain;background:#0003}
.hh figcaption{padding:8px 10px;font-size:13px;line-height:1.35}

/* readable web addresses on the Customer Links page */
.big-url{font-size:19px;font-weight:700;letter-spacing:.01em;line-height:1.3;margin:2px 0 10px;color:var(--ink,inherit);word-break:break-word}
@media (max-width:520px){.big-url{font-size:17px}}

/* arrange-tabs dialog */
.arr-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto;touch-action:pan-y}
.arr-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line,#d5dade);border-radius:10px;background:var(--card,transparent);user-select:none;-webkit-user-select:none}
.arr-row .arr-h{opacity:.55;font-size:20px;line-height:1}
.arr-row .arr-l{flex:1;font-weight:600}
.arr-row .arr-n{font-size:11px;color:var(--gold,#cf9c29);text-transform:uppercase;letter-spacing:.06em}
.arr-row.last-tab{border-bottom:3px solid var(--gold,#cf9c29)}
.arr-row.dragging{z-index:80;box-shadow:0 10px 26px rgba(0,0,0,.4);outline:2px solid var(--gold,#cf9c29);position:relative}