/* Time and materials on a work order — the office side (Phase 3).
   js/service-ticket-field-log.js paints the "Time and materials" panel on an
   open work order that bills after the work: the crew's lines with Accept,
   Change and Reject, the office's own entry, and the accepted totals. Tokens
   and fallbacks match css/styles.css and css/service-ticket-flags.css. */

.p86-fl { margin: 4px 0 12px; }
.p86-fl-badge {
  font-size: 10px; letter-spacing: 0.4px; text-transform: none; font-weight: 700;
  background: var(--yellow, #d97706); color: #fff;
  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.p86-fl-sum {
  font-size: 12.5px; color: var(--text-dim, #aaa); margin: 2px 0 10px;
  font-variant-numeric: tabular-nums;
}
.p86-fl-sum strong { color: var(--text, #fff); }
.p86-fl-waiting { color: var(--yellow, #d97706); font-weight: 600; }

.p86-fl-group { margin-bottom: 12px; }
.p86-fl-gh {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-dim, #aaa); margin: 0 0 6px;
}
.p86-fl-empty { font-size: 12.5px; color: var(--text-dim, #888); font-style: italic; margin: 0 0 8px; }

.p86-fl-line {
  border: 1px solid var(--border, #333); border-left: 3px solid var(--border, #333);
  border-radius: 8px; padding: 8px 11px; margin-bottom: 7px;
  background: var(--surface2, rgba(255, 255, 255, 0.03));
}
.p86-fl-line.is-waiting { border-left-color: var(--yellow, #d97706); }
.p86-fl-line-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; color: var(--text, #fff); font-variant-numeric: tabular-nums;
}
.p86-fl-claim { color: var(--text-dim, #888); }
.p86-fl-ph { color: var(--text-dim, #aaa); }
.p86-fl-what {
  font-size: 12.5px; color: var(--text, #fff); margin: 5px 0 2px;
  white-space: pre-wrap; line-height: 1.45; overflow-wrap: anywhere;
}
.p86-fl-meta { font-size: 11.5px; color: var(--text-dim, #888); margin-top: 3px; overflow-wrap: anywhere; }

.p86-fl-st {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  color: var(--yellow, #d97706); border: 1px solid var(--yellow, #d97706);
}
.p86-fl-st.ok { color: var(--green, #059669); border-color: var(--green, #059669); }
.p86-fl-st.no { color: var(--red, #dc2626); border-color: var(--red, #dc2626); }

.p86-fl-acts, .p86-fl-formacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p86-fl-acts .ee-btn, .p86-fl-formacts .ee-btn, .p86-fl-open-add { font-size: 12px; padding: 5px 11px; }

.p86-fl-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px;
  margin-top: 8px; padding: 10px; border-radius: 8px;
  border: 1px dashed var(--border, #333);
}
.p86-fl-form label { display: grid; gap: 4px; font-size: 11.5px; color: var(--text-dim, #aaa); min-width: 0; }
.p86-fl-form label.wide, .p86-fl-form .p86-fl-formacts { grid-column: 1 / -1; }
.p86-fl-form input, .p86-fl-form select, .p86-fl-form textarea {
  width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--border, #333); background: var(--input-bg, var(--bg, #0e1116)); color: var(--text, #fff);
}
.p86-fl-form textarea { resize: vertical; }

@media (max-width: 640px) {
  .p86-fl-form { grid-template-columns: 1fr 1fr; }
  .p86-fl-line-h { flex-wrap: wrap; }
}