/* Line by Line: what the app adds to the reference screens (design/screens stays the visual source of truth).
   Every screen keeps its own inline <style> from the reference; this file only styles the added parts. */

/* The desk screens are 1440 px wide: let a smaller window scroll instead of cutting the right side off. */
html { overflow: auto; }

/* Page for a refused or unknown link (sent by the server, no data on it). */
.err-page { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f2f4f8; font: 400 17px/1.5 Inter, system-ui, sans-serif; color: #172246; }
.err-page main { max-width: 520px; margin: 24px; padding: 28px 30px; border-radius: 14px; background: #ffffff; box-shadow: 0 10px 40px rgba(12, 24, 50, .12); }
.err-page h1 { margin: 0 0 10px; font: 800 30px/1.1 Inter, system-ui, sans-serif; color: #0c1832; }
.err-page a { color: #226cee; font-weight: 600; }

/* Error and status lines: visible over any layout. */
.lbl-error, .lbl-note {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50; max-width: min(92vw, 900px);
  margin: 0; padding: 10px 16px; border-radius: 10px; font: 600 14px/1.35 Inter, system-ui, sans-serif;
  box-shadow: 0 6px 24px rgba(12, 24, 50, .18); white-space: normal; overflow-wrap: anywhere;
}
.lbl-error { top: 10px; background: #fedddf; color: #8c0f14; }
.lbl-note { bottom: 12px; background: #e8f1fe; color: #0f2856; }
.lbl-error[hidden], .lbl-note[hidden] { display: none; }

/* A grey slot that received text: same place, muted text instead of the bar. */
.slot-filled {
  background: transparent !important; height: auto !important; border-radius: 0 !important;
  font: 500 13px/1.3 Inter, system-ui, sans-serif; color: #687692;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-slot.slot-filled, .tb-name.slot-filled { color: #f5f6f8; }
.bubble .slot.slot-filled { font-size: 12.5px; line-height: 15px; color: #192d52; height: 15px !important; }
.bubble .slot.slot-filled.s1 { top: 8px; }

/* ── S2 desk: actions in the empty middle of the top bar ── */
.desk-actions { display: flex; align-items: center; gap: 10px; margin: 20px 0 0 40px; }
.desk-actions .act {
  height: 36px; padding: 0 14px; border: 1px solid #3c5274; border-radius: 9px; background: transparent; color: #fafbfc;
  font: 600 14px/34px Inter, system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.desk-actions .act:hover { background: #1d3a66; }
.desk-actions .act.primary { background: #226cee; border-color: #226cee; }
.desk-actions .act:disabled { opacity: .45; cursor: default; }
.desk-actions .act[hidden] { display: none; }

[data-mode="start"] .desk-only, [data-mode="desk"] .start-only { display: none !important; }
[data-mode="start"] .order-no, [data-mode="start"] .head-slots, [data-mode="start"] .meta { display: none; }
[data-mode="start"] .page-head { height: auto; }
.start-block { margin: 6px 0 0 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.start-btn {
  height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: #226cee; color: #ffffff;
  font: 700 18px/48px Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
.start-btn:disabled { opacity: .55; cursor: default; }
.start-note { font: 500 14px/18px Inter, system-ui, sans-serif; color: #687692; white-space: nowrap; }
.start-note a { color: #226cee; }

/* Order lines: more than three rows scroll inside the table. */
.lines.many { overflow-y: auto; }
.pill.wait { background: #fff2cc; color: #6b4a00; }
.pill.wait span { margin-left: 12px; font-size: 14.5px; letter-spacing: -.4px; }

/* Dialogs (customer QR, pickup form). */
.lbl-dialog {
  margin: auto; width: 460px; max-width: 94vw; border: 0; border-radius: 14px; padding: 22px 24px;
  font: 400 15px/1.4 Inter, system-ui, sans-serif; color: #172246; box-shadow: 0 20px 60px rgba(12, 24, 50, .3);
}
.lbl-dialog::backdrop { background: rgba(12, 24, 50, .45); }
.lbl-dialog h2 { margin: 0 0 6px; font: 700 22px/1.2 Inter, system-ui, sans-serif; color: #0c1832; }
.lbl-dialog-note { margin: 0 0 12px; font-size: 13.5px; color: #687692; }
.lbl-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.lbl-dialog-actions button {
  height: 40px; padding: 0 16px; border: 1px solid #d6dce4; border-radius: 10px; background: #ffffff; color: #172246;
  font: 600 15px Inter, system-ui, sans-serif; cursor: pointer;
}
.lbl-dialog-actions button.primary { background: #226cee; border-color: #226cee; color: #ffffff; }
.lbl-dialog-actions button:disabled { opacity: .55; cursor: default; }
.qr { display: block; width: 264px; height: 264px; margin: 4px auto 8px; }
.qr-url { margin: 0; font: 500 12.5px/1.35 Inter, system-ui, sans-serif; color: #687692; overflow-wrap: anywhere; text-align: center; }
.pickup-row { display: grid; grid-template-columns: 1fr auto 120px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e6eaf0; }
.pickup-title { font-weight: 600; }
.pickup-approved { font-size: 13px; color: #687692; white-space: nowrap; }
.pickup-input-wrap { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.pickup-input { width: 100%; height: 36px; padding: 0 8px; border: 1px solid #c8cfda; border-radius: 8px; font: 600 15px Inter, system-ui, sans-serif; text-align: right; }

/* ── S2 pickup: generated money rows ── */
.pk-lines.many { max-height: 540px; overflow-y: auto; }
.pk-row { display: flex; flex-direction: column; }
.pk-row .pk-hdiv { margin-top: 18.5px; height: 1.5px; }
.pk-row:first-child .pk-hdiv { margin-top: 1.1px; height: 1px; }
.pk-row .pk-cap { margin-top: 25px; }
.pk-row .pk-bar { margin-top: 11.6px; height: 56.4px; width: 798.8px; border-radius: 13.5px; background: #c9ead5; }
.pk-row .pk-bar .charged { padding-left: 7.6px; flex: none; }
.pk-row .pk-bar .charged[hidden] { display: none; }
.pk-row .pk-released[hidden] { display: none; }
#pk-matches .pk-check { margin-top: 13.6px; }
#pk-matches .pk-check:first-child { margin-top: 25.1px; }
#pk-matches .pk-check span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }

/* ── S1 customer ── */
.lbl-consent { margin: 14px 12.43px 0; padding: 14px; border: 1px solid #e1e8f1; border-radius: 15px; background: #fbfcfd; display: flex; flex-direction: column; gap: 10px; }
.lbl-consent[hidden] { display: none; }
.fl-disclosure { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 2px solid #030b2e; border-radius: 6px; }
.fl-disclosure[hidden] { display: none; }
.fl-caps { margin: 0; font: 700 16px/1.35 Inter, system-ui, sans-serif; text-transform: uppercase; color: #030b2e; }
.fl-choice { display: block; font-weight: 600; }
.fl-choice input[type="radio"] { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; }
.fl-limit { width: 80px; height: 26px; padding: 0 6px; border: 1px solid #b1c0d6; border-radius: 6px; font: 600 16px Inter, system-ui, sans-serif; }
.fl-source { margin: 0; font: 500 12.5px Inter, system-ui, sans-serif; color: #5c6d8e; }
.lbl-field { display: flex; align-items: center; gap: 8px; font: 700 16px Inter, system-ui, sans-serif; color: #030b2e; }
.lbl-field input { flex: 1; height: 38px; padding: 0 10px; border: 1px solid #b1c0d6; border-radius: 9px; font: 500 16px Inter, system-ui, sans-serif; }
.lbl-date { margin: 0; font: 700 16px Inter, system-ui, sans-serif; color: #030b2e; }
.lbl-check { display: flex; align-items: flex-start; gap: 10px; font: 500 14.5px/1.35 Inter, system-ui, sans-serif; color: #192d52; }
.lbl-check input { width: 22px; height: 22px; margin: 0; flex: none; }
.est-actions { margin: 10px 0 0 12.43px; }
.est-actions[hidden] { display: none; }
.est-actions .btn-pp { margin: 0; width: 405.5px; }
.est-actions .btn-pp .pp { margin-left: 112px; }
.est-confirming { margin: 10px 0 0 26px; font: 600 14px/1.35 Inter, system-ui, sans-serif; color: #017351; }
.est-confirming[hidden] { display: none; }
.btn-row { display: flex; align-items: center; }
.btn-row .btn-later { margin: 5.62px 0 0 8px; }
.btn-row [hidden] { display: none; }
.line-card.pending { height: auto; background: #eef1f5; }
.line-card.pending .line-main { height: auto; padding-bottom: 10px; }
.line-card .line-status[hidden], .line-card .chip[hidden], .line-card .pdot[hidden] { display: none; }
.line-card.pending .btn-pp { width: 219px; }
.line-card.pending .btn-pp .pp { margin-left: 22px; }
.thumb.noimg { background: #eef4fc; }
.photo[hidden] { display: none; }

/* ── S3 mechanic ── */
.mic:disabled { opacity: .45; cursor: default; }
.transcript { white-space: normal; height: auto; max-height: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.transcript.placeholder { color: #868d9a; font-weight: 500; }
.samples { margin-top: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.samples-title { font: 700 14px Inter, system-ui, sans-serif; color: #0b1332; }
.samples select { height: 40px; padding: 0 8px; border: 1px solid #cfd5e0; border-radius: 9px; background: #ffffff; font: 500 14px Inter, system-ui, sans-serif; color: #0b1332; }
.samples audio { width: 100%; height: 36px; }
.samples .use { height: 44px; border: 0; border-radius: 11px; background: #193864; color: #ffffff; font: 700 16px Inter, system-ui, sans-serif; cursor: pointer; }
.samples .use:disabled { opacity: .5; cursor: default; }
.draft { display: flex; flex-direction: column; }
.badge[data-kind="soon"] { background: #f2a516; }
.badge[data-kind="can_wait"], .badge[data-kind="none"] { background: #8b9dbc; }
.badge[data-kind="soon"] svg, .badge[data-kind="can_wait"] svg, .badge[data-kind="none"] svg { display: none; }
.badge[data-kind="soon"], .badge[data-kind="can_wait"], .badge[data-kind="none"] { width: auto; padding-right: 9px; }
.badge span:empty { display: none; }
.send[data-state="sending"], .send[data-state="sent"] { opacity: .7; cursor: default; }
.line .slot.slot-filled { height: auto !important; font-size: 13px; line-height: 16px; }
.top .s2.slot-filled { width: auto !important; max-width: 300px; }
.draft .line { height: auto; padding-bottom: 14px; }
.draft .line .head { height: auto; min-height: 80.72px; }
.draft .line .title { white-space: normal; height: auto; max-width: 290px; }
/* A long price-list name ends with an ellipsis in the fixed description column (full text in the tooltip). */
.lines .gen.c-desc { display: block; line-height: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.consent:has(.slot-filled) { height: auto; }
.consent .slot.slot-filled { position: static; width: auto !important; white-space: normal; font-size: 12.5px; }
/* Approved (or being confirmed): no buttons any more, the card closes up around the status strip. */
.line-card.decided { height: auto; }
.line-card.decided .line-main { height: auto; padding-bottom: 8px; }
.line-card.decided .btn-row { display: none; }
.line-card.decided .line-status { flex: none; height: 40.3px; }
.pk-panel .pk-slot.slot-filled { width: auto !important; max-width: 300px; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; }