/*
  HHC.UI.Progress: posting an update from site. Built on the design tokens (HHC.UI.Design/hhc.css) and the field app's
  own layout (HHC.UI.Time/time.css). Big targets for gloves; strong contrast for sunlight.
*/

.update-job { display: flex; align-items: center; gap: var(--hhc-space-2); margin: var(--hhc-space-4) 0; font-size: var(--hhc-step-1); font-weight: 700; }
.update-job { flex-wrap: wrap; }
.update-job .hhc-icon { color: var(--hhc-division-text); }

.update-note { min-height: 7.5rem; font-size: var(--hhc-step-1); }

/* The chosen photos: square tiles, two or three across. */
.update-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--hhc-space-2); margin: var(--hhc-space-4) 0; padding: 0; list-style: none; }
.update-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--hhc-radius); background: var(--hhc-surface-2); box-shadow: var(--hhc-shadow-1); }
.update-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.update-photo.failed img { opacity: .45; }
.update-photo-state {
    position: absolute; left: var(--hhc-space-1); right: var(--hhc-space-1); bottom: var(--hhc-space-1);
    display: flex; align-items: center; gap: var(--hhc-space-1); padding: 2px var(--hhc-space-2);
    border-radius: var(--hhc-radius-pill); background: color-mix(in srgb, var(--hhc-brand) 85%, transparent); color: var(--hhc-on-brand);
    font-size: var(--hhc-step--1); font-weight: 600;
}
.update-photo.failed .update-photo-state { background: var(--hhc-danger); }
.update-photo-remove {
    position: absolute; top: var(--hhc-space-1); right: var(--hhc-space-1);
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--hhc-brand) 80%, transparent); color: var(--hhc-on-brand); cursor: pointer;
}

/* "Add photos": the file picker sits inside the label, so the whole big button opens the camera or gallery. */
.update-send { margin-top: var(--hhc-space-4); }

/* Sent. */
.update-sent { padding-top: var(--hhc-space-6); }
.update-sent-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--hhc-space-5); border-radius: var(--hhc-radius-lg); background: var(--hhc-success); color: var(--hhc-on-brand); box-shadow: var(--hhc-shadow-2); }
.update-sent .btn { margin-top: var(--hhc-space-6); }

/* What's gone before on this job. */
.update-recent { margin: var(--hhc-space-6) 0 calc(var(--hhc-space-6) * 2); }
.update-recent h2 { font-size: var(--hhc-step-1); }
.update-recent ul { margin: 0; padding: 0; list-style: none; }
.update-recent li { padding: var(--hhc-space-3) 0; border-top: 1px solid var(--hhc-border); }
.update-recent-when { margin-right: var(--hhc-space-2); color: var(--hhc-text-soft); font-size: var(--hhc-step--1); font-weight: 600; }
.update-recent p { margin: var(--hhc-space-1) 0 0; }

/* Adding a receipt. */
.receipt-photo { position: relative; max-width: 22rem; margin: var(--hhc-space-4) 0; overflow: hidden; border-radius: var(--hhc-radius-lg); box-shadow: var(--hhc-shadow-1); }
.receipt-photo img { display: block; width: 100%; height: auto; }
.receipt-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hhc-space-3); }
.receipt-amount { font-size: var(--hhc-step-2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Expenses to claim, on the contractor's statement: a plain table that prints as it shows. */
.expenses-claim h2 { margin-bottom: var(--hhc-space-2); }
.expenses-table { width: 100%; border-collapse: collapse; }
.expenses-table th, .expenses-table td { padding: 6px 8px; border-bottom: 1px solid var(--hhc-border); text-align: left; vertical-align: top; }
.expenses-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.expenses-totals { margin: var(--hhc-space-3) 0 0; }
.expenses-totals > div { display: flex; justify-content: space-between; gap: var(--hhc-space-3); }
.expenses-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.expenses-totals .is-total { font-weight: 700; }

/* An update can be about a stage of the job, or General. */
.update-stage { margin: var(--hhc-space-4) 0; }
.update-recent-stage { display: inline-block; margin-right: var(--hhc-space-2); font-size: var(--hhc-step--1); font-weight: 650; color: var(--hhc-text-soft); }

/* Your receipts (My work): ones the office didn't accept stay listed, greyed, with the reason. */
.expenses-table .is-refused td, .expenses-totals .is-refused { color: var(--hhc-text-faint); }
.expenses-table .is-refused td:nth-child(4) { text-decoration: line-through; }