/* Billing a work order — the office panel (Phase 4).
   Sits under the time-and-materials card and borrows its shape, so the two
   read as one column of the same screen rather than two designs. */

.p86-bl {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  background: var(--surface);
}

.p86-bl-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.p86-bl-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.p86-bl-wait { font-size: 11.5px; color: var(--warning, #d98324); }

/* What the ticket became. Loud enough to stop somebody billing twice. */
.p86-bl-state {
  padding: 8px 10px; border-radius: 6px; font-size: 12.5px; margin-bottom: 10px;
  border: 1px solid var(--border);
}
.p86-bl-state.is-done { background: rgba(46, 160, 67, 0.10); border-color: rgba(46, 160, 67, 0.35); }
.p86-bl-state.is-off  { background: rgba(140, 140, 140, 0.12); }
.p86-bl-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.p86-bl-open, .p86-bl-cat, .p86-bl-shot, .p86-bl-usemarket, .p86-bl-writeoff {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 9px; font-size: 11.5px; cursor: pointer; color: var(--text);
}
.p86-bl-open:hover, .p86-bl-cat:hover, .p86-bl-shot:hover,
.p86-bl-usemarket:hover, .p86-bl-writeoff:hover { background: var(--hover, rgba(127,127,127,0.12)); }

/* The rate and the markup behind every line. */
.p86-bl-rate { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 12px; }
.p86-bl-rate label { display: flex; flex-direction: column; gap: 4px; }
.p86-bl-rate label > span:first-child {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-dim, #888);
}
.p86-bl-offer { flex: 1 1 100%; font-size: 11.5px; color: var(--text-dim, #888); }

/* One box that reads as "$ ____ /hr" rather than three separate things.
   text-transform is reset because these boxes sit inside a <label>, and the
   app has a global `label { text-transform: uppercase }` that reaches every
   descendant — without this the unit renders "/HR". */
.p86-bl-money-in {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--border); border-radius: 6px; padding: 0 7px;
  background: var(--input-bg, transparent);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.p86-bl-money-in i, .p86-bl-money-in em {
  font-style: normal; font-size: 11.5px; color: var(--text-dim, #888);
}
.p86-bl-money-in input {
  width: 86px; border: 0; background: none; padding: 5px 0;
  color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums;
}
.p86-bl-money-in input:focus { outline: none; }
.p86-bl-money-in:focus-within { border-color: var(--accent, #4a9eff); }

/* The grid. Every column of digits lines up — this is a page of numbers and
   somebody is going to add them up by eye. */
.p86-bl-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.p86-bl-grid th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-dim, #888);
  padding: 0 8px 6px 0; border-bottom: 1px solid var(--border);
}
.p86-bl-grid td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.p86-bl-grid tfoot td {
  border-bottom: 0; border-top: 2px solid var(--border);
  font-weight: 700; padding-top: 9px;
}
.p86-bl-grid .p86-bl-qty, .p86-bl-grid .p86-bl-total,
.p86-bl-grid td.p86-bl-cost, .p86-bl-grid td.p86-bl-markup { font-variant-numeric: tabular-nums; }
.p86-bl-grid th.p86-bl-total, .p86-bl-grid td.p86-bl-total { text-align: right; }
.p86-bl-grid th.p86-bl-qty, .p86-bl-grid td.p86-bl-qty { text-align: right; white-space: nowrap; }
.p86-bl-grid .is-fixed { color: var(--text-dim, #888); }

.p86-bl-kind {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text-dim, #888); margin-right: 5px;
}
.p86-bl-when, .p86-bl-where { display: block; font-size: 11px; color: var(--text-dim, #888); }
.p86-bl-desc { max-width: 22em; }
.p86-bl-qty em { font-style: normal; color: var(--text-dim, #888); font-size: 11px; }

.p86-bl-cost .p86-bl-money-in input { width: 74px; }
.p86-bl-markup .p86-bl-money-in input { width: 56px; }
.p86-bl-cost .p86-bl-cat, .p86-bl-cost .p86-bl-shot { margin: 4px 4px 0 0; }

/* An inherited markup shows the ticket's number as a PLACEHOLDER — grey, so
   "the default is 15" and "somebody chose 15" never look the same. */
.p86-bl-markup.is-inherited .p86-bl-money-in { border-style: dashed; }
.p86-bl-missing { color: var(--warning, #d98324); font-size: 11.5px; }
.p86-bl-empty { font-size: 12.5px; color: var(--text-dim, #888); margin: 4px 0; }

/* A contract price, and the one box that will not go past it. */
.p86-bl-contract {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.p86-bl-contract label { display: flex; flex-direction: column; gap: 4px; }
.p86-bl-contract label > span:first-child {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-dim, #888);
}
.p86-bl-cap { flex: 1 1 100%; margin: 0; font-size: 11.5px; color: var(--text-dim, #888); }

/* Everything standing between this ticket and a bill, all at once. */
.p86-bl-blockers { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; }
.p86-bl-blockers li { padding: 5px 0 5px 20px; position: relative; }
.p86-bl-blockers li::before {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim, #888);
}
.p86-bl-blockers li.is-todo::before { background: var(--warning, #d98324); }
.p86-bl-blockers li.is-wait::before { background: var(--accent, #4a9eff); }
.p86-bl-blockers li.is-no::before   { background: var(--danger, #e5534b); }
.p86-bl-blockers li.is-done::before { background: rgba(46, 160, 67, 0.9); }

.p86-bl-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.p86-bl-actions .primary { margin-left: auto; }
.p86-bl-actions .primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.p86-bl-note { flex: 1 1 100%; font-size: 11.5px; color: var(--text-dim, #888); }

@media (max-width: 640px) {
  /* A five-column money table does not fit a phone. It scrolls sideways in
     its own box rather than pushing the whole panel out of the screen. */
  .p86-bl-grid { display: block; overflow-x: auto; white-space: nowrap; }
  .p86-bl-desc { max-width: none; white-space: normal; min-width: 14em; }
  .p86-bl-actions .primary { margin-left: 0; width: 100%; }
}