/* Jobs, Production board and Quality Control (JOB-19, PRD-01..08, QCT-02..04). Shared tokens and board basics live in app.css. */

/* ------------------------------------------------------------------ Job screen */
.badges { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.alert-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.alert-row > div:first-child { flex: 1 1 320px; }
.big-alert { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.job-link-box { display: grid; gap: .4rem; }
.job-link-box .input { font-size: .85rem; }
.doc-links { gap: .5rem; }
.doc-links .btn { white-space: normal; text-align: left; }
.materials { display: grid; gap: .75rem; }
.mat-line { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mat-line-head { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; padding: .55rem .75rem; background: var(--surface-2); }
.mat-line .table-wrap { border: 0; border-top: 1px solid var(--grey-bg); border-radius: 0; }
.materials h3 { margin: .5rem 0 .25rem; font-size: 1rem; }
.photos-block h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
.photo-upload { gap: .6rem; align-items: flex-end; padding: .6rem; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.photo-upload .inline-field { display: grid; gap: .2rem; }
.photo-upload .inline-field select { width: auto; min-width: 120px; }
.photo-upload .grow { flex: 1 1 180px; }
.grow { flex: 1 1 auto; min-width: 0; }
.sig-view { margin: 0; }
.sig-view img { max-width: 100%; max-height: 160px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.insp-history { display: grid; gap: 1rem; }
.insp-rec { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; display: grid; gap: .5rem; }
.insp-rec-head { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.insp-rec .alert { margin: 0; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; }

/* ------------------------------------------------------------------ check in and release (tablet, 768px+) */
.hero-card .card-body { display: grid; gap: .4rem; }
.big-name { font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.hero-sub { font-size: 1.1rem; color: var(--muted); font-weight: 600; }
.hero-card p { margin: .2rem 0; }
.btn-xl { min-height: 60px; padding: .75rem 1.4rem; font-size: 1.15rem; border-radius: 12px; }
.btn-xl .icon { width: 26px; height: 26px; }
.big-actions { gap: .75rem; margin-bottom: .75rem; }
.upload-status { min-height: 1.4rem; color: var(--muted); margin-bottom: .5rem; }
.photo-missing { display: flex; align-items: center; gap: .75rem; padding: 1.25rem; border: 2px dashed var(--red-solid); border-radius: var(--radius); color: var(--red); background: var(--red-bg); font-weight: 600; }
.release-facts { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: .5rem; }
.big-phone { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.4rem; font-weight: 800; text-decoration: none; min-height: 48px; }
.release-addr { display: flex; gap: .6rem; align-items: flex-start; font-size: 1.1rem; }
.tablet-view .sig-canvas { height: 220px; }

/* ------------------------------------------------------------------ production board (PRD-01..08) */
.board-view .page-title h1, .board-head h1 { font-size: 1.8rem; }
.step-tile { min-height: 120px; }
.step-tile.empty-tile { opacity: .8; }
.step-tile .tile-text { display: grid; gap: .3rem; min-width: 0; }
.step-tile .tile-label { overflow-wrap: anywhere; }
.tile-flags { display: flex; gap: .4rem; font-size: 1rem; }
.tile-flag { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .45rem; border-radius: 999px; font-weight: 800; }
.tf-rework { background: var(--red-bg); color: var(--red); }
.tf-hold { background: var(--yellow-bg); color: var(--yellow); }
.board-extra { margin-top: 1rem; }
.board-empty { display: grid; place-items: center; gap: .5rem; font-size: 1.2rem; padding: 3rem 1rem; }
.board-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.board-head h1 { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.board-head .tile-count { font-size: 2rem; background: var(--nav); color: #fff; border-radius: 12px; min-width: 64px; min-height: 64px; display: grid; place-items: center; font-weight: 800; }
.btn-back-big { min-width: 64px; min-height: 64px; padding: 0; border-radius: 12px; }
.job-card .jc-name { overflow-wrap: anywhere; }
.job-card .jc-photo { width: 100%; }
.job-card .jc-photo .icon, .board-hero > .icon { color: var(--muted); }
.jc-needs { color: var(--amber); }
.jc-reason { display: flex; gap: .4rem; align-items: flex-start; text-align: left; margin: 0 .8rem; padding: .45rem .6rem; border: 0; border-radius: 8px; background: rgba(255,255,255,.7);
  color: var(--red); font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; min-height: 44px; }
.jc-reason span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-card .btn-done { min-height: 64px; gap: .5rem; }
.job-card .btn-cam { min-width: 72px; min-height: 64px; padding: 0 .9rem; }
.btn-cam .icon { width: 34px; height: 34px; }
.btn-cam.attention { background: var(--amber-bg); border: 3px solid var(--amber-solid); color: var(--amber); animation: pulse 1.4s ease-in-out infinite; }
.btn-cam.busy { opacity: .6; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,110,0,.45); } 50% { box-shadow: 0 0 0 10px rgba(184,110,0,0); } }
.btn-done:disabled { background: var(--grey-bg); border-color: var(--border); color: var(--muted); }
.jc-hold-icon { flex: 1; display: grid; place-items: center; min-height: 64px; border-radius: 12px; background: var(--yellow-solid); color: #3b3200; }
.job-card.jc-gone { transition: transform .4s ease, opacity .4s ease; transform: scale(.85); opacity: 0; }
.board-job { max-width: 900px; }
.board-hero { aspect-ratio: 4/3; max-height: 60vh; background: #d9dce0; display: grid; place-items: center; overflow: hidden; }
.board-hero.clickable { cursor: zoom-in; }
.board-hero img { width: 100%; height: 100%; object-fit: cover; }
.board-job .big-reason { display: flex; gap: .5rem; align-items: flex-start; font-size: 1.8rem; line-height: 1.25; }
.board-steps { display: flex; flex-wrap: wrap; gap: .6rem; padding: .6rem .8rem; }
.board-steps .bs { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 84px; padding: .5rem; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); font-size: .85rem; }
.board-steps .bs.done { background: var(--green-bg); color: var(--green); border-color: #b4dcbd; }
.board-steps .bs.current { border-color: var(--blue-solid); border-width: 3px; background: var(--blue-bg); color: var(--blue); font-weight: 800; }
.board-desc { padding: 0 .8rem .8rem; margin: 0; font-size: 1.05rem; white-space: pre-line; }
.board-flash { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(255,255,255,.35); pointer-events: none; transition: opacity .35s ease; }
.board-flash.out { opacity: 0; }
.board-flash-circle { width: 200px; height: 200px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.25); animation: pop .35s ease-out; }
.board-flash.ok .board-flash-circle { background: var(--green-solid); }
.board-flash.err .board-flash-circle { background: var(--red-solid); }
.board-flash .icon { stroke-width: 3; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 900px) { .job-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

/* ------------------------------------------------------------------ inspection (QCT-02..04, QCT-08) */
.chk-list { display: grid; gap: .6rem; }
.chk-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: center; padding: .75rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); }
.chk-item.is-pass { border-color: var(--green-solid); background: #f3fbf5; }
.chk-item.is-fail { border-color: var(--red-solid); background: #fff5f4; }
.chk-item .input { grid-column: 1 / -1; }
.chk-item .field-error { grid-column: 1 / -1; color: var(--red); font-size: .9rem; }
.chk-item .field-error:empty { display: none; }
.chk-text { font-weight: 700; font-size: 1.1rem; display: flex; gap: .6rem; align-items: center; }
.chk-n { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border-radius: 50%; background: var(--grey-bg); font-size: .9rem; }
.pf-toggle { display: flex; gap: .5rem; }
.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 56px; min-width: 110px; padding: .5rem 1rem; border: 2px solid var(--border-strong);
  border-radius: 12px; background: var(--surface); font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; color: var(--text); }
.pf-pass[aria-pressed="true"] { background: var(--green-solid); border-color: var(--green-solid); color: #fff; }
.pf-fail[aria-pressed="true"] { background: var(--red-solid); border-color: var(--red-solid); color: #fff; }
.insp-result { display: flex; gap: .75rem; align-items: center; padding: 1rem; border-radius: 12px; border: 2px solid var(--border); background: var(--surface-2); }
.insp-result.pass { border-color: var(--green-solid); background: var(--green-bg); color: var(--green); }
.insp-result.fail { border-color: var(--red-solid); background: var(--red-bg); color: var(--red); }
.insp-result.big { font-size: 1.15rem; margin-bottom: 1rem; }
.insp-result-title { font-size: 1.4rem; font-weight: 800; }
.insp-photo-warn { margin-top: .3rem; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: .3rem; }
.insp-fail-fields { display: grid; gap: .75rem; padding: .75rem; border: 2px solid var(--red-solid); border-radius: 12px; }
@media (max-width: 760px) {
  .chk-item { grid-template-columns: 1fr; }
  .pf-btn { flex: 1; }
}

/* board tiles on a tablet: two wide tiles per row at 768px, labels never broken mid-word */
.board-view .board-tiles { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.board-view .step-tile { font-size: 1.45rem; }
.board-view .step-tile .tile-label { overflow-wrap: normal; word-break: normal; }
.table td.nowrap { white-space: nowrap; }
@media (max-width: 700px) { .board-view .board-tiles { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }