/* Shadeland internal app - Jobs. Built 31/10/2026, bms-core piece 5a.
   Uses the brand tokens defined in styles.css; the state colours below are UI signals, never
   brand colours. Every rule is scoped under .jb so it cannot leak into other tabs. */

.jb{--jb-bad:#B42318;--jb-bad-bg:#FDE7E5;--jb-ok:#1E6B3A;--jb-ok-bg:#E3F4E8;--jb-warn:#7A4B00;--jb-warn-bg:#FFF3CC;
  padding:12px 16px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.jb [hidden]{display:none!important}
.jb h1{font-family:Anton,Impact,sans-serif;text-transform:uppercase;color:var(--navy);font-weight:400;
  font-size:28px;letter-spacing:.3px;margin:0;line-height:1.05}
.jb-sub{color:var(--muted);font-size:14px;margin:4px 0 0}

.jb-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.jb-seg{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.jb-seg[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.jb-mine{font-size:14px;color:var(--ink);display:inline-flex;gap:6px;align-items:center;margin-left:auto}

.jb-banner{font-size:13px;border-radius:10px;padding:8px 12px;background:var(--paper);color:var(--muted)}
.jb-banner:empty{display:none}
.jb-banner.bad{background:var(--jb-bad-bg);color:var(--jb-bad)}

.jb-col{display:flex;flex-direction:column;gap:8px}
.jb-col-h{margin:6px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.jb-n{display:inline-flex;min-width:20px;justify-content:center;border-radius:999px;background:var(--paper);color:var(--ink);padding:1px 6px;letter-spacing:0}
.jb-cards{display:flex;flex-direction:column;gap:10px}
.jb-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;min-width:0}
.jb-head{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
.jb-head:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:6px}
.jb-title{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.jb-ref{color:var(--muted);font-weight:400;font-size:14px}
.jb-site{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.jb-meta{display:flex;flex-wrap:wrap;gap:5px}
.jb-pill{display:inline-flex;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;background:var(--paper);color:var(--ink);white-space:normal}
.jb-pill.bad{background:var(--jb-bad-bg);color:var(--jb-bad)}
.jb-pill.ok{background:var(--jb-ok-bg);color:var(--jb-ok)}
.jb-pill.warn{background:var(--jb-warn-bg);color:var(--jb-warn)}
.jb-more{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.jb-note{font-size:13px;color:var(--muted);margin:0}
.jb-hist{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.jb-empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--radius);padding:16px;color:var(--muted);font-size:14px;margin:0}
.jb-actions{display:flex;flex-wrap:wrap;gap:8px}
.jb-actions:empty{display:none}
.jb-back{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:var(--paper)}
.jb-back label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.03em}
.jb-back select,.jb-back textarea,.jb-back input:not([type="checkbox"]),.jb-upload select,.jb-upload input{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font:inherit;font-size:16px;background:var(--white);color:var(--ink);font-weight:400;letter-spacing:0}
.jb-err{margin:0;padding:8px 12px;border-radius:10px;background:var(--jb-bad-bg);color:var(--jb-bad);font-size:14px}
.jb-btn{min-height:var(--tap);padding:0 20px;border-radius:999px;border:0;background:var(--navy);color:var(--white);font:inherit;font-weight:600;cursor:pointer;text-align:center}
.jb-btn.ghost{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.jb-btn:disabled{opacity:.6}

/* 5b: measure, files, orders (31/10/2026) */
.jb-h3{margin:6px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.jb-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;font-size:14px;overflow-wrap:anywhere}
.jb-row>span{display:flex;flex-direction:column;gap:2px}
.jb-link{all:unset;cursor:pointer;color:var(--navy);font-weight:600;font-size:14px;text-decoration:underline;min-height:32px;display:inline-flex;align-items:center}
.jb-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.jb-files,.jb-orders{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.jb-files li{display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.jb-orders li{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;overflow-wrap:anywhere}
.jb-orders li.off{opacity:.6}
.jb-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.jb-two input{width:100%;box-sizing:border-box;min-width:0}
.jb-crew{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 12px}
.jb-crew legend{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.03em;margin-bottom:4px}
.jb-check{display:inline-flex!important;flex-direction:row!important;gap:6px;align-items:center;font-size:14px!important;font-weight:400!important;color:var(--ink)!important;letter-spacing:0!important}
.jb-upload{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:var(--paper)}
.jb-upload label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.03em}
.jb-upload input[type="file"]{padding:8px;background:var(--white);border:1px solid var(--line);border-radius:10px;font-size:14px;max-width:100%}

/* 5c: job card visits and the Schedule view (31/10/2026) */
.jb-visit{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px;overflow-wrap:anywhere}
.jb-notes{display:flex;flex-direction:column;gap:4px;font-size:14px}
.jb-notes p{margin:0}
.jb-slots{display:flex;flex-wrap:wrap;gap:6px}
.jb-slots .jb-btn{min-height:40px;padding:0 12px;font-size:14px}

.sc{display:flex;flex-direction:column;gap:12px;min-width:0}
.sc-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sc-range{font-weight:600;color:var(--ink);font-size:14px}
.sc-side{display:flex;flex-direction:column;gap:12px}
.sc-q{display:flex;flex-direction:column;gap:8px}
.sc-qi{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.sc-qi.ready{border-left:4px solid var(--jb-ok)}
.sc-board{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sc-grid{display:grid;grid-template-columns:minmax(80px,120px) repeat(var(--sc-cols),minmax(108px,1fr));grid-auto-flow:row dense;gap:4px;align-items:start;min-width:0}
.sc-h{font-size:12px;font-weight:600;color:var(--muted);padding:4px;display:flex;flex-direction:column;gap:3px}
.sc-h.today{color:var(--navy)}
.sc-due{font-size:11px;font-weight:600;color:var(--jb-warn);background:var(--jb-warn-bg);border:1px dashed var(--jb-warn);border-radius:6px;padding:1px 6px}
.sc-lane{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);background:var(--navy);border-radius:6px;padding:3px 8px;margin-top:6px}
.sc-row{grid-column:1 / -1;display:grid;grid-template-columns:inherit;grid-template-columns:subgrid;grid-auto-flow:row dense;gap:4px;align-items:start;
  border-top:1px solid var(--line);padding-top:4px}
.sc-name{grid-column:1;grid-row:1 / span 6;font-size:13px;font-weight:600;color:var(--ink);padding:6px 4px;overflow-wrap:anywhere}
.sc-cell{min-height:44px;border:1px dashed var(--line);border-radius:8px;padding:3px;display:flex;flex-direction:column;gap:3px}
.sc-fergus{font-size:11px;color:var(--muted);background:var(--paper);border-radius:6px;padding:2px 6px;overflow-wrap:anywhere}
.sc-drive{font-size:11px;color:var(--muted)}
.sc-drive.over{color:var(--jb-bad);font-weight:600}
.sc-bar-item{all:unset;cursor:pointer;box-sizing:border-box;background:var(--navy);color:var(--white);border-radius:8px;padding:6px 8px;font-size:12px;
  display:flex;flex-direction:column;gap:2px;min-height:44px;overflow-wrap:anywhere}
.sc-bar-item.final_measure{background:#3D6B8C}
.sc-bar-item.callback{background:var(--jb-bad)}
.sc-bar-item.planned_return{background:#6B5B95}
.sc-bar-item.untold{outline:2px dashed var(--jb-warn);outline-offset:1px}
/* A8, ruling 222: materials not in. A warning, never a block */
.sc-mats{align-self:flex-start;font-size:11px;font-weight:600;color:var(--jb-warn);background:var(--jb-warn-bg);border-radius:4px;padding:0 5px}
.sc-bar-item.mats-warn .sc-mats{border:1px solid var(--jb-warn)}
.sc-warn{margin:6px 0;padding:6px 8px;border-left:3px solid var(--jb-warn);border-radius:6px;background:var(--jb-warn-bg);color:var(--jb-warn);font-size:13px}
.sc-bar-item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sc-sub{opacity:.9;font-size:11px}
.sc-panel{margin-top:10px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px}
.sc-panel p{margin:0;font-size:14px}
@media (max-width:759px){
  .sc-grid{grid-template-columns:minmax(80px,110px) minmax(0,1fr)}
  .sc-board{overflow-x:visible}
}

/* Hours (bms-core 5d, hours.js): My hours on the phone, and the pay week. Hours only, no money. */
.hr{display:flex;flex-direction:column;gap:12px}
.hr-who{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:var(--ink);margin-left:auto}
.hr-who select{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;font-size:16px;background:var(--white);max-width:60vw}
.hr-msg{margin:0;font-size:14px;color:var(--jb-ok)}
.hr-msg:empty{display:none}
.hr-sec{display:flex;flex-direction:column;gap:8px}
.hr-visit,.hr-run{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.hr-run{border-left:4px solid var(--jb-ok)}
.hr-big{font-family:Anton,Impact,sans-serif;font-size:40px;line-height:1;color:var(--navy)}
.hr-other{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.hr-other label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);flex:1 1 180px}
.hr-other select{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;font-size:16px;background:var(--white)}
.hr-total{margin:0;font-size:14px;color:var(--ink)}
.hr-day{border-top:1px solid var(--line);padding:6px 0;display:flex;flex-direction:column;gap:4px}
.hr-dayh{display:flex;justify-content:space-between;font-size:14px;color:var(--ink)}
.hr-line{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:10px;background:var(--paper);overflow-wrap:anywhere}
.hr-lmain{font-size:14px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.hr-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.hr-table{border-collapse:collapse;font-size:13px;min-width:100%}
.hr-table th,.hr-table td{border-bottom:1px solid var(--line);padding:6px;text-align:right;white-space:nowrap;vertical-align:top}
.hr-table th[scope="row"],.hr-table thead th:first-child{text-align:left}
.hr-table td.flag{background:var(--jb-warn-bg);color:var(--jb-warn);font-weight:600}
.hr-table sup{font-size:9px;color:var(--jb-ok);margin-left:2px}
.hr-detail td{text-align:left;white-space:normal}
.hr-flags,.hr-plines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.hr-flag{overflow-wrap:anywhere}
.jb-hours{margin:0;font-size:14px;color:var(--ink)}
/* 5e: variations and the final invoice. Figures per job only; the table scrolls inside the card on a narrow phone. */
.jb-money{border-collapse:collapse;font-size:13px;width:100%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:4px 0 6px}
.jb-money th{font-size:11px;font-weight:600;color:var(--muted);text-align:right;padding:4px 6px}
.jb-money td{border-bottom:1px solid var(--line);padding:6px;text-align:right;white-space:nowrap;vertical-align:top;color:var(--ink)}
.jb-money td:first-child{text-align:left;white-space:normal;overflow-wrap:anywhere;width:100%}
.jb-money .jb-tot td{font-weight:700;color:var(--navy);border-bottom:2px solid var(--navy)}
.jb-blockers{margin:0 0 6px;padding-left:18px;font-size:14px;color:var(--jb-bad);display:flex;flex-direction:column;gap:4px}
/* 5f: back-costing, commission and the close. A removed cost stays listed, its figure struck through. */
.jb-money .jb-void td:last-child{text-decoration:line-through;color:var(--muted)}
.jb-money .jb-void td:first-child{color:var(--muted)}

/* What we are installing (refine walk-through 03/11/2026): the accepted option's lines on the job card. */
.jb-build{margin:4px 0 10px;padding-left:20px}
.jb-build li{margin:3px 0}

/* Refine 04/11/2026: Add photos inside the close-out form (item 14) */
.jb-cophotos { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line, #D3E4EF); margin-bottom: 8px; }
.jb-cophotos .jb-btn { justify-self: start; min-height: 44px; }
/* A7: what went in, inside the close-out form */
.cm-box{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.cm-box legend{padding:0;margin-bottom:4px}
.cm-box [data-cm-diff]{display:flex;flex-direction:column;gap:8px}
.cm-box [data-cm-diff][hidden],.cm-box [hidden]{display:none}
.cm-extra{display:grid;grid-template-columns:1fr 6rem;gap:8px}
.cm-extra label{min-width:0}
.cm-extra input{width:100%;box-sizing:border-box;min-width:0}