/* Job Cards (job-cards-mobile mock) — the few pieces pos_shell.css and
   storage_shell.css do not already have. All on the POS tokens; amber and the
   soft-ok tint are the only new ones. Loaded only by the Job Cards screens. */
.pos-shell { --amb: #92400e; --ambsoft: #fef3c7; --ambline: #fcd34d; --oksoft: #def7ec; --okfill: #046c4e; }
.dark .pos-shell { --amb: #fcd34d; --ambsoft: #3d2a06; --ambline: #78520a; --oksoft: #0f2f24; --okfill: #046c4e; }

/* Home: three filter tiles, search, the job cards. */
.jc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.jc-stats .pos-stat { padding: 12px 13px; gap: 5px; text-decoration: none; color: var(--text); }
.pos-stat--on { border-color: var(--acc); background: var(--accsoft); }
.pos-stat__value--warn { color: var(--warn); }
.pos-stat__value--ok { color: var(--ok); }
.jc-search { position: relative; display: block; }
.jc-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--sub); }
.jc-search .pos-field { padding-left: 40px; }
.jc-list { display: flex; flex-direction: column; gap: 9px; }
.jc-card { align-items: flex-start; text-decoration: none; }
.jc-card--late { border-color: var(--warnline); }
.pos-po__name { font: 700 14px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-po__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-po__due { font: 600 11.5px/1.2 var(--font); color: var(--sub); }
.pos-po__no { font: 600 10.5px/1 var(--mono); color: var(--sub); }
.pos-po__next { font: 700 11px/1 var(--font); color: var(--acc); }
.jc-due--late { color: var(--warn); font-weight: 700; }
.jc-due--today { color: var(--amb); font-weight: 700; }
.jc-tech { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--font); color: var(--sub); }
.jc-avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--accsoft); color: var(--acc); font: 800 9px/18px var(--font); text-align: center; }
.jc-avatar--none { background: var(--surfacealt); color: var(--sub); }

/* Status pills, one tone per status. */
.jc-pill--received, .jc-pill--delivered, .jc-pill--cancelled { background: var(--surfacealt); color: var(--sub); }
.jc-pill--diagnosed { background: var(--accsoft); color: var(--acc); }
.jc-pill--in_progress { background: var(--accfill); color: var(--acctext); }
.jc-pill--awaiting_parts { background: var(--ambsoft); color: var(--amb); }
.jc-pill--ready { background: var(--oksoft); color: var(--ok); }
.jc-pill--returned_unrepaired, .jc-pill--overdue { background: var(--warnsoft); color: var(--warn); }

/* Buttons and alerts the mock adds. */
.pos-btn-warn { border: none; background: var(--warnfill); color: var(--warntext); }
.pos-btn-charge--ok { background: var(--okfill); color: #ffffff; }
.pos-sale__footbtns > a, .pos-sale__footbtns > button, .pos-sale__footbtns > form > button { display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; width: 100%; }
.pos-alert--amb { border-color: var(--ambline); background: var(--ambsoft); cursor: default; }
.pos-alert--amb .pos-alert__icon { background: var(--amb); color: var(--surface); }
.pos-alert--amb .pos-alert__title { color: var(--amb); }
.pos-alert { cursor: default; }
.jc-errors { border: 1px solid var(--warn); color: var(--warn); border-radius: 12px; padding: 11px 13px; font: 600 12.5px/1.4 var(--font); }
.jc-errors ul { margin: 4px 0 0; padding-left: 18px; }
.pos-toast--warn { background: var(--warnfill); color: var(--warntext); }

/* New job: the step panels and the promise picks. */
.jc-steps-form { display: contents; }
.jc-days { grid-template-columns: repeat(3, 1fr); }
.jc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-opts .st-opt { flex: none; padding: 10px 14px; font-size: 12.5px; }
.jc-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); display: block; }

/* Job: progress stepper. */
.jc-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.jc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; min-width: 0; }
.jc-step::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.jc-step:first-child::before { display: none; }
.jc-step--done::before, .jc-step--now::before, .jc-step--wait::before { background: var(--acc); }
.jc-step__dot { position: relative; z-index: 1; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; background: var(--surfacealt); border: 2px solid var(--line); color: var(--sub); display: flex; align-items: center; justify-content: center; }
.jc-step--done .jc-step__dot { background: var(--accfill); border-color: var(--accfill); color: var(--acctext); }
.jc-step--now .jc-step__dot { background: var(--surface); border-color: var(--acc); color: var(--acc); }
.jc-step--wait .jc-step__dot { background: var(--ambsoft); border-color: var(--amb); color: var(--amb); }
.jc-step--stop .jc-step__dot { background: var(--warnsoft); border-color: var(--warn); color: var(--warn); }
.jc-step__l { font: 600 10px/1.2 var(--font); color: var(--sub); }
.jc-step--now .jc-step__l, .jc-step--wait .jc-step__l, .jc-step--stop .jc-step__l { color: var(--text); font-weight: 800; }

/* Job: the technician row, the details, the lines. */
.jc-quote { margin: 0; font: 500 13px/1.45 var(--font); color: var(--text); white-space: pre-line; }
.jc-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.jc-line:last-of-type { border-bottom: 0; }
.jc-line__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jc-line__name { font: 700 12.5px/1.25 var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-line__sub { font: 500 10.5px/1.2 var(--font); color: var(--sub); }
.jc-line__amt { flex: none; font: 700 13px var(--mono); color: var(--text); }
.jc-line__rm { flex: none; cursor: pointer; border: none; background: transparent; color: var(--sub); width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.jc-line__type { display: inline-block; margin-right: 5px; padding: 2px 5px; border-radius: 4px; background: var(--surfacealt); color: var(--sub); font: 700 8.5px/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px; }
.jc-line__type--labour { background: var(--accsoft); color: var(--acc); }
.jc-minis { display: flex; gap: 8px; }
.jc-minis .pos-mini { flex: 1; }
.pos-drow--total { border-top: 1px solid var(--line); padding-top: 8px; }
.pos-drow--total .pos-drow__k, .pos-drow--total .pos-drow__v { font-weight: 800; color: var(--text); }

/* Sheets: action rows (More), the Add sheet. */
.jc-act { width: 100%; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: 700 13.5px/1.2 var(--font); text-align: left; text-decoration: none; box-sizing: border-box; }
.jc-act .pos-row__icon { width: 32px; height: 32px; border-radius: 9px; }
.jc-act--on { border-color: var(--acc); background: var(--accsoft); }
.jc-act--warn { color: var(--warn); }
.jc-act--warn .pos-row__icon { background: var(--warnsoft); color: var(--warn); }
.jc-act__sub { display: block; margin-top: 3px; font: 500 11px/1.2 var(--font); color: var(--sub); }
.jc-act:disabled { opacity: .5; cursor: default; }
.jc-added { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; background: var(--oksoft); color: var(--ok); font: 700 12.5px/1.3 var(--font); }
.jc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.jc-pick { width: 100%; font-family: var(--font); }
.jc-pick--on { border-color: var(--acc); background: var(--accsoft); }
.jc-rates { max-height: 220px; overflow-y: auto; }

/* Handover: pay tiles as radios, the no-bill switch, the signature pad. */
.jc-paytile { position: relative; }
.jc-paytile input { position: absolute; opacity: 0; pointer-events: none; }
.jc-paytile:has(input:checked) { border-color: var(--acc); background: var(--accsoft); }
.jc-paytile:has(input:disabled) { opacity: .4; cursor: default; }
.jc-nobill-only { display: none; }
.jc-handover:has(.jc-nobill-box:checked) .jc-billed-only { display: none; }
.jc-handover:has(.jc-nobill-box:checked) .jc-nobill-only { display: inline; }
.jc-handover:has(.jc-nobill-box:checked) .jc-pay { opacity: .4; pointer-events: none; }
.jc-sig canvas { display: block; width: 100%; height: 130px; box-sizing: border-box; border: 1.5px dashed var(--line); border-radius: 12px; background: #ffffff; touch-action: none; }
.jc-sig p { margin: 6px 0 0; font: 500 11px/1.3 var(--font); color: var(--sub); }
.jc-sig button { cursor: pointer; border: none; background: none; padding: 0; font: 600 11px var(--font); color: var(--acc); }
.jc-sig [data-controller] > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Taken in: the slip. */
.jc-slip { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px dashed var(--sub); border-radius: 6px; padding: 14px; font: 500 11.5px/1.5 var(--mono); color: var(--text); margin-bottom: 10px; }
.jc-slip__h { text-align: center; font-weight: 800; font-size: 13px; }
.jc-slip__c { text-align: center; color: var(--sub); }
.jc-slip hr { border: 0; border-top: 1px dashed var(--sub); margin: 8px 0; }
.jc-slip__row { display: flex; justify-content: space-between; gap: 10px; }
.jc-slip__row span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pos-screen-view > .pos-done { flex: 1; min-height: 0; overflow-y: auto; }
.pos-done > a, .pos-done > button { display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }

/* The Add sheet: Part | Labour radios show one of the two forms. */
.jc-addsheet .pos-seg__opt { position: relative; text-align: center; }
.jc-addsheet .pos-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.jc-addsheet .jc-kind--labour { display: none; }
.jc-addsheet:has(#line_kind_labour:checked) .jc-kind--labour { display: block; }
.jc-addsheet:has(#line_kind_labour:checked) .jc-kind--part { display: none; }
label.pos-mini { text-align: center; }
/* `.pos-shell a { color: inherit }` outranks the button colours on links. */
.pos-shell a.pos-btn-charge, .pos-shell a.pos-btn-primary { color: var(--acctext); }
.pos-shell a.pos-btn-secondary { color: var(--acc); }
.pos-shell a.pos-btn-ghost { color: var(--sub); }
.pos-shell a.pos-btn-hold { color: var(--text); }
.pos-sfoot > .pos-btn-charge { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; }
/* The job link: a Link button beside Call / WhatsApp, and the URL itself. */
.st-contact button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; }
.jc-link { font-size: 12px; padding: 10px 12px; }