/* Shared chrome for the unsaved-changes guard and the in-page bill camera (2026-08-03).
   Kept in its own file so app.css stays as it was. */

/* ── unsaved-changes guard ─────────────────────────────────────────────────────────────── */
.ttx-guard-overlay {
  position: fixed; inset: 0; background: rgba(11, 18, 32, .55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: 16px;
}
.ttx-guard {
  background: #fff; border-radius: 12px; padding: 22px 24px 18px;
  width: 100%; max-width: 430px;
  box-shadow: 0 18px 50px rgba(11, 18, 32, .3);
  border-top: 4px solid #F79A2B;
}
.ttx-guard h3 { margin: 0 0 8px; font-size: 17px; }
.ttx-guard p { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; }
.ttx-guard .ttx-guard-sub { font-weight: 400; font-size: 12.5px; color: #5A6577; margin: 0 0 16px; }
.ttx-guard-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ttx-guard-btns .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
.ttx-guard .ttx-guard-leave { color: #F0402A; border-color: #F3C3BC; }
.ttx-guard .ttx-guard-leave:hover { background: #FDF1EF; }

.ttx-dirtybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8500;
  background: #FDF7EE; border-top: 2px solid #F79A2B; color: #6B4A11;
  font-size: 13px; padding: 9px 16px; text-align: center;
  box-shadow: 0 -4px 14px rgba(11, 18, 32, .08);
}
body.ttx-has-dirtybar { padding-bottom: 44px; }

/* ── form validation ───────────────────────────────────────────────────────────────────── */
.ttx-invalid,
input.ttx-invalid, select.ttx-invalid, textarea.ttx-invalid {
  border-color: #F0402A !important;
  background: #FEF8F7;
  box-shadow: 0 0 0 2px rgba(240, 64, 42, .12);
}
.ttx-invalid-msg {
  color: #8C2415; font-size: 11.5px; line-height: 1.45;
  margin: 3px 0 2px; max-width: 420px;
}
.ttx-invalid-msg::before { content: '\26A0\FE0F  '; }
.ttx-invalid-summary {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  background: #FDF1EF; border: 1px solid #F3C3BC; color: #8C2415;
  font-size: 13px; font-weight: 600;
}

/* ── in-page camera ────────────────────────────────────────────────────────────────────── */
.ttx-cam-open { margin-left: 8px; vertical-align: middle; }

.ttx-cam-overlay {
  position: fixed; inset: 0; background: rgba(11, 18, 32, .72);
  display: flex; align-items: center; justify-content: center;
  z-index: 9100; padding: 14px;
}
.ttx-cam {
  background: #fff; border-radius: 12px; padding: 18px;
  width: 100%; max-width: 640px;
  box-shadow: 0 18px 50px rgba(11, 18, 32, .35);
}
.ttx-cam h3 { margin: 0 0 10px; font-size: 16px; }
.ttx-cam-stage {
  background: #0B1220; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
.ttx-cam-video, .ttx-cam-still { width: 100%; max-height: 62vh; display: block; object-fit: contain; }
.ttx-cam-err {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: #FDF1EF; border: 1px solid #F3C3BC; color: #8C2415; font-size: 12.5px;
}
.ttx-cam-btns { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.ttx-cam-chip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid #E7EAF0; border-radius: 10px; background: #F7F9FC;
}
.ttx-cam-chip img {
  height: 52px; width: 52px; object-fit: cover;
  border-radius: 7px; border: 1px solid #E7EAF0; background: #fff;
}
.ttx-cam-meta { font-size: 11.5px; color: #5A6577; line-height: 1.5; flex: 1 1 140px; min-width: 0; }
.ttx-cam-meta strong { color: #0B1220; word-break: break-all; }