/* ==========================================================================
   Contracts, receipts, payments, purchasing and budget (v2 parts 4–7):
   step pages (contract, addendum, receipt, payment), the service cards,
   attachments, the signature pad and the signature blocks on the voucher.
   ========================================================================== */

/* Step pages */
.wz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 84px; } /* minmax: a wide table scrolls inside its card instead of widening the page */
.wz .card-head { flex-wrap: wrap; gap: 8px; }
.wz .card { margin-bottom: 0 !important; }
.wz-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.wz-steps span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--surface-3); color: var(--ink-3); font-size: 12px; font-weight: 600; }
.wz-steps span i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 10.5px; }
.wz-steps span.on { background: var(--primary-soft); color: var(--primary-strong); }
.wz-steps span.on i { background: var(--primary); color: var(--on-primary); }
.wz-steps span.done i { background: var(--good); color: #fff; }
.wz-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2, 0 -4px 18px rgba(0,0,0,.08)); }
.wz-bar .tot { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; }
.wz-bar .tot div { display: grid; gap: 0; }
.wz-bar .tot small { color: var(--ink-3); font-size: 11px; }
.wz-bar .tot b { font-size: 15px; }
.wz-bar .tot .grand b { color: var(--primary-strong); font-size: 18px; }
.wz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.wz-grid .field { margin: 0; }
.wz-sec { display: grid; gap: 12px; }
.wz-sec > .seg { justify-self: start; flex-wrap: wrap; max-width: 100%; }
.pick .grp td svg { display: inline-block; vertical-align: -2px; width: 14px; height: 14px; }
.wz-sec > h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }

/* Contract type cards */
.ct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ct-card { text-align: start; display: grid; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.ct-card b { font-size: 13.5px; }
.ct-card small { color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }
.ct-card[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* Service cards */
.svc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 12px 14px; display: grid; gap: 12px; }
.svc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; font-size: 12px; flex: none; }
.svc-head .select { min-width: 220px; flex: 1; }
.svc-meth { display: flex; gap: 6px; flex-wrap: wrap; }
.svc-meth button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.svc-meth button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.svc-meth button svg { width: 14px; height: 14px; }
.svc-sum { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-2); }
.svc-sum b { color: var(--ink); }
.mini { width: 100%; border-collapse: collapse; }
.mini th { text-align: start; font-size: 11.5px; color: var(--ink-3); font-weight: 600; padding: 4px 6px; }
.mini td { padding: 3px 6px; }
.mini .input { min-width: 110px; }
.mini td.n, .mini th.n { text-align: end; }

/* Attach button */
.att { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att input[type=file] { display: none; }
.att .file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--info-soft); color: var(--info); font-size: 12px; max-width: 260px; }
.att .file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .file-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; display: grid; }
.att .file-chip svg { width: 14px; height: 14px; }

/* Picker tables (claims on the receipt, invoices on the payment) */
.pick td .input { width: 130px; }
.pick tr.on { background: var(--primary-soft); }
.pick .grp td { background: var(--surface-2); font-weight: 600; font-size: 12px; }
.line-add { display: flex; gap: 8px; flex-wrap: wrap; }
.kind-badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-3); }
.kind-badge.adv { background: var(--info-soft); color: var(--info); }
.kind-badge.trust { background: var(--warning-soft); color: var(--warning); }
.kind-badge.gov { background: var(--serious-soft); color: var(--serious); }
.kind-badge.claim { background: var(--good-soft); color: var(--good); }

/* Signature pad and blocks (carried over from v1 signatures.css) */
.v-sign.sg-sign { align-items: end; margin-top: 22px; }
.v-sign.sg-sign .sg-blk { display: grid; gap: 2px; justify-items: center; text-align: center; font-size: 11px; color: #4b5f69; }
.sg-blk img { width: 45mm; max-width: 100%; height: 15mm; object-fit: contain; border-bottom: 1px solid #8499a3; padding-bottom: 2px; }
.sg-blk i { display: block; width: 100%; height: 15mm; border-bottom: 1px solid #8499a3; }
.sg-blk b { color: #172e38; font-size: 11px; margin-top: 3px; }
.sg-blk span { font-size: 10.5px; }
.sg-blk small { font-size: 9.5px; color: #6f818a; }
.sg-note { margin-top: 8px; font-size: 9px; color: #8499a3; text-align: center; }
.sg-form { display: grid; gap: 10px; }
.sg-padwrap { display: grid; gap: 4px; }
.sg-padlabel { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 12.5px; }
.sg-pad { display: block; width: 100%; aspect-ratio: 3 / 1; background: #fff; border: 1.5px dashed var(--line-strong, #9fb3bb); border-radius: 10px; touch-action: none; cursor: crosshair; }
.sg-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.sg-check input { margin-top: 2px; flex: none; }

/* Receipt / payment voucher print */
.rv { color: #13232b; font-size: 12px; display: grid; gap: 12px; }
.rv-amt { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 2px solid #19868b; border-radius: 10px; padding: 10px 14px; }
.rv-amt b { font-size: 22px; color: #136d71; }
.rv-words { font-size: 11.5px; color: #3d525b; }
.rv table { width: 100%; border-collapse: collapse; }
.rv th, .rv td { border-bottom: 1px solid #dfe7ea; padding: 6px 8px; text-align: start; font-size: 11.5px; }
.rv th { background: #f2f6f7; }
.rv td.n, .rv th.n { text-align: end; }
.v-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

@media (max-width: 640px) {
  .wz-bar { position: static; }
  .svc-head .select { min-width: 0; }
  .v-sign { grid-template-columns: 1fr; }
}

/* New operation (ops) and Project 360 (js/views/hub.js) — both designs */
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.op-card { display: grid; gap: 6px; justify-items: start; text-align: start; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); font: inherit; color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.op-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--primary); }
.op-card b { font-size: 13.5px; } .op-card small { color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }
.op-card .tile-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-strong); }
.op-card.tone-amber .tile-ico { background: var(--warning-soft); color: var(--warning); } .op-card.tone-red .tile-ico { background: var(--critical-soft); color: var(--critical); } .op-card.tone-violet .tile-ico { background: #ede9fe; color: #7c3aed; } .op-card.tone-navy .tile-ico { background: var(--info-soft); color: var(--info); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.hub-card { display: grid; gap: 6px; padding: 16px; color: inherit; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; }
.hub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.hub-card small { color: var(--ink-3); }
.hub-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hub-bar { display: flex; height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.hub-bar span { background: var(--good); height: 100%; }
.hub-bar.big { height: 14px; position: relative; }
.hub-bar.big span:first-child { position: absolute; inset-block: 0; inset-inline-start: 0; opacity: .45; }
.hub-bar.big span:last-child { position: relative; }
.hub-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.hub-nums small { display: block; font-size: 10.5px; } .hub-nums b { font-size: 14px; }
.hub-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px 0 16px; overflow-x: auto; }
.hub-tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.hub-tabs button[aria-selected="true"] { color: var(--primary-strong); border-bottom-color: var(--accent); }
.top-chip.ui-try { gap: 6px; display: inline-flex; align-items: center; }