/* ============================================================================
   F13  The quote form, the "Client accepted" chooser, and the markup line on a
   contact card. Tokens only, from app.css, so both themes work.
   ============================================================================ */

/* THE DRAWER WIDENS WHILE THE QUOTE FORM IS IN IT. The design asks for the
   price on the right as he types; the standard 560px drawer has no right. :has
   keeps it with the form itself, so any other body in the drawer (the quote it
   opens after saving, the job when he goes back) is the usual width again. */
@media (min-width: 901px) {
  #drawer:has(.f13-form) { width: min(1080px, 96vw); }
}

.f13-form .note { margin-bottom: 14px; }
.f13-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.f13-h { margin-top: 0 !important; }
.f13-sub { font-size: 12px !important; color: var(--ink-3) !important; margin: -4px 0 6px !important; }

/* One room per row: room, supplier, what they priced, their price, GST. */
.f13-rows { display: flex; flex-direction: column; gap: 8px; }
.f13-row {
  display: grid; gap: 8px; align-items: end; position: relative;
  grid-template-columns: 1.1fr 1fr 1.3fr 0.9fr 0.95fr 26px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2);
}
.f13-row label { min-width: 0; }
.f13-row input, .f13-row select { width: 100%; min-width: 0; background: var(--panel); }
.f13-x {
  align-self: end; height: 36px; width: 26px; border: 0; background: none; color: var(--ink-3);
  font-size: 20px; line-height: 1; cursor: pointer; border-radius: 5px;
}
.f13-x:hover { color: var(--crit); background: var(--crit-bg); }
.f13-add { align-self: flex-start; }

.f13-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 6px; }
.f13-opts input, .f13-opts select, .f13-notes textarea { width: 100%; }

/* The price, beside the form and staying in view as the rows grow. */
.f13-out {
  position: sticky; top: 0; padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-2);
}
.f13-rooms { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.f13-room { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.f13-rn { font-size: 13px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.f13-rv { text-align: right; white-space: nowrap; }
.f13-rv b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.f13-rv small { display: block; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.f13-credit .f13-rn, .f13-credit .f13-rv b { color: var(--good); }
.f13-tot { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 12px; font-size: 12.5px; }
.f13-tot dt { color: var(--ink-3); font-weight: 600; }
.f13-tot dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.f13-tot .f13-big { font-size: 15px; font-weight: 700; color: var(--ink); padding-top: 4px; border-top: 1px solid var(--line); }

/* "Client accepted": which quote, and what happens to the job's value. */
.f13-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.f13-choice {
  display: grid !important; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2);
  text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important;
  color: var(--ink) !important; cursor: pointer;
}
.f13-choice:has(input:checked) { border-color: var(--lime); background: var(--lime-ghost); }
.f13-choice input { width: auto; margin: 0; }
.f13-choice small { color: var(--ink-3); font-size: 11.5px; }
.f13-cv { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f13-cv small { display: block; }
.f13-keep { padding: 10px 12px; border: 1px solid var(--warn); border-radius: var(--r); background: var(--warn-bg); margin-bottom: 12px; }
.f13-keep p { margin: 0 0 6px !important; color: var(--ink) !important; }

/* Radios in the console's own green rather than the browser's blue. */
.f13-accept input[type="radio"] { accent-color: var(--lime-fill); }

/* How a console quote was priced, in its drawer. */
.f13-pw-list { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.f13-pw-list b { color: var(--ink); font-weight: 600; }

/* Markup for this client, on the contact card. */
.f13-mk .f13-mk-say { margin-bottom: 8px; }
.f13-mk-form { margin-bottom: 8px; max-width: 320px; }
.f13-mk-form[hidden] { display: none; }

/* PHONE. One column: the rows become cards (room across the top, supplier and
   GST side by side, then what they priced and the price), and the quote sits
   under the form instead of beside it. */
.f13-sum { display: none; }
@media (max-width: 900px) {
  .f13-grid { grid-template-columns: 1fr; }
  .f13-out { position: static; }
  .f13-sum:not(:empty) { display: block; margin: 4px 0 0 !important; font-size: 13px !important; color: var(--ink) !important; font-weight: 600; }
}
@media (max-width: 700px) {
  .f13-row { grid-template-columns: 1fr 1fr; padding: 10px 10px 12px; }
  .f13-row .f13-c-room { order: 1; grid-column: 1 / -1; padding-right: 30px; }
  .f13-row .f13-c-sup { order: 2; }
  .f13-row .f13-c-gst { order: 3; }
  .f13-row .f13-c-desc { order: 4; grid-column: 1 / -1; }
  .f13-row .f13-c-amt { order: 5; grid-column: 1 / -1; }
  .f13-x { position: absolute; top: 4px; right: 4px; height: 30px; }
  .f13-opts { grid-template-columns: 1fr; }
  .f13-choice { grid-template-columns: 20px 1fr; }
  .f13-cv { grid-column: 2; text-align: left; }
  .f13-cv small { display: inline; margin-left: 6px; }
}