/*
 * Application styles. Bootstrap 5.3.8 is linked from vendor/assets/stylesheets BEFORE this
 * file (see app/views/layouts/application.html.erb), so anything here overrides it.
 *
 * Keep this small: prefer Bootstrap's utilities and CSS custom properties over new rules.
 */

/* Numeric columns line up better with tabular figures. */
.font-monospace {
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}

/* The scale-ticket table is wide by nature; give it a sensible minimum before scrolling. */
.table-responsive > .table {
  min-width: 40rem;
}

/* Upload area on the Ticket Upload page. `is-dragging` is toggled by the
   ticket-import Stimulus controller while a file is held over the zone. */
.ticket-dropzone {
  cursor: pointer;
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--bs-tertiary-bg);
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.ticket-dropzone.is-dragging {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
}

/* The file field sits inline with the upload button; full width would dwarf it. */
.ticket-dropzone__input {
  max-width: 22rem;
}

/* Fieldset legends on the ticket form read as section headings, not form labels. */
fieldset > legend {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.375rem;
  margin-bottom: 0.875rem;
}

/* Square radios, for the "Ready to Pay" / "Paid" controls in a payment summary's header.

   They are radios because only one of the three states can be true at a time, and clicking the
   ticked one clears both back to Pending — but they read as two independent things to tick, so
   they are drawn as checkboxes. Bootstrap draws .form-check-input[type=radio] as a circle with a
   solid dot; these two rules swap the shape and the mark for the ones it already uses on a
   checkbox. The tick is copied verbatim out of vendor/assets/stylesheets/bootstrap.min.css, so it
   is Bootstrap's own and still matches if that bundle is refreshed. */
.form-check-square .form-check-input[type="radio"] {
  border-radius: 0.25em;
}

.form-check-square .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}