/* ==========================================================================
   Component: Scanner Numbers admin view (body.page-view-scanner-numbers-new)
   Internal staff tool (Views + Better Exposed Filters), styled to match
   the Manage Quotes view (manage-quotes.css) — same white filter card,
   pill Search button, navy table header, hairline row dividers.
   ========================================================================== */

body.page-view-scanner-numbers-new .cm-container {
  max-width: 1400px;
  padding-block: 32px 88px;
}

/* --- Exposed filters -------------------------------------------------------- */
body.page-view-scanner-numbers-new .view-filters {
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
  padding: 28px 24px 20px;
  margin-bottom: 32px;
}

/* Better Exposed Filters wraps some fields (Email, Company name) in an
   extra "form-wrapper" div that Event Name/Paid/etc. don't have — that
   extra box was throwing off vertical alignment between fields (its
   own margin/padding shifting the label+input pair down relative to
   the unwrapped fields). display:contents removes the wrapper from the
   render tree entirely so every field is a flex item on equal footing. */
body.page-view-scanner-numbers-new .views-exposed-form .d-flex > .form-wrapper:not(.form-actions):not(.captcha-admin-links) {
  display: contents;
}

/* Fixed-basis flex, centered: fields wrap 2-3 per line depending on
   viewport width, and a partial last row (e.g. just "Paid" + "I would
   like to use") centers itself instead of hugging the left edge or
   stretching to fill the row. */
body.page-view-scanner-numbers-new .views-exposed-form .d-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 8px 24px;
}

body.page-view-scanner-numbers-new .views-exposed-form .d-flex > * {
  flex: 0 1 320px;
}

/* Once display:contents removes the wrapper's own box, its children
   become the real flex items and need their own basis — the rule above
   only reaches direct children still present in the box tree. */
body.page-view-scanner-numbers-new .views-exposed-form .d-flex > .form-wrapper:not(.form-actions):not(.captcha-admin-links) > * {
  flex: 0 1 320px;
}

/* Search sits inline at the end of whichever row it lands on (typically
   next to Paid / "I would like to use") at a normal button width, not
   stretched full-bleed across the card. */
body.page-view-scanner-numbers-new .views-exposed-form .d-flex > .form-actions {
  flex: 0 0 auto;
}

body.page-view-scanner-numbers-new .views-exposed-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cm-muted-2);
  margin-bottom: 4px;
}

body.page-view-scanner-numbers-new .views-exposed-form input[type="text"],
body.page-view-scanner-numbers-new .views-exposed-form input[type="email"],
body.page-view-scanner-numbers-new .views-exposed-form select {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font: inherit;
  font-size: 14.5px;
  color: var(--cm-ink);
  background: #fff;
  box-sizing: border-box;
}

/* Dropdowns enlarged relative to the text inputs above — easier to hit
   and read at a glance among the pill-shaped controls. */
body.page-view-scanner-numbers-new .views-exposed-form select {
  padding: 13px 18px;
  font-size: 15.5px;
}

body.page-view-scanner-numbers-new .views-exposed-form input[type="text"]:focus,
body.page-view-scanner-numbers-new .views-exposed-form input[type="email"]:focus,
body.page-view-scanner-numbers-new .views-exposed-form select:focus {
  outline: none;
  border-color: var(--cm-ink);
}

/* CAPTCHA admin notice — informational only (shown to users who can bypass
   CAPTCHA), not part of the actual filter form. Not useful here. Targeted
   by its stable class, not an #id — Views/BEF appends a randomized unique-id
   suffix to element ids on an AJAX-driven Search submit (see the identical
   issue/fix documented in manage-quotes.css), so an #id selector would
   silently stop matching after the first filter search. */
body.page-view-scanner-numbers-new .captcha-admin-links {
  display: none;
}

body.page-view-scanner-numbers-new .form-actions {
  margin: 0;
}

body.page-view-scanner-numbers-new .form-actions .form-submit,
body.page-view-scanner-numbers-new .form-actions input[type="submit"] {
  appearance: none;
  background: var(--cm-red);
  border: 1px solid var(--cm-red);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 28px;
  border-radius: var(--cm-radius-pill);
  cursor: pointer;
  transition: background var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease);
}

body.page-view-scanner-numbers-new .form-actions .form-submit:hover,
body.page-view-scanner-numbers-new .form-actions input[type="submit"]:hover {
  background: var(--cm-red-hover);
  border-color: var(--cm-red-hover);
}

/* --- Results table ----------------------------------------------------------*/
body.page-view-scanner-numbers-new .view-content {
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
}

body.page-view-scanner-numbers-new table.table {
  margin: 0;
  font-size: 12.5px;
  color: var(--cm-ink);
  table-layout: auto;
}

/* Long unbroken strings (email addresses especially) were forcing extra
   table width rather than wrapping — let them break instead, so columns
   size to a reasonable width rather than to their single longest line. */
body.page-view-scanner-numbers-new table.table td {
  overflow-wrap: anywhere;
}

/* This table has 17 columns and needs horizontal scroll on most screens —
   a themed, always-visible thin scrollbar reads more intentional than the
   browser's chunky default, and staying visible (rather than the default
   hover-only overlay) hints there's more table off to the right. */
body.page-view-scanner-numbers-new .view-content {
  scrollbar-width: thin;
  scrollbar-color: var(--cm-red) var(--cm-paper-2);
}

body.page-view-scanner-numbers-new .view-content::-webkit-scrollbar {
  height: 10px;
}

body.page-view-scanner-numbers-new .view-content::-webkit-scrollbar-track {
  background: var(--cm-paper-2);
  border-radius: var(--cm-radius-pill);
}

body.page-view-scanner-numbers-new .view-content::-webkit-scrollbar-thumb {
  background: var(--cm-red);
  border-radius: var(--cm-radius-pill);
  border: 2px solid var(--cm-paper-2);
}

body.page-view-scanner-numbers-new .view-content::-webkit-scrollbar-thumb:hover {
  background: var(--cm-red-hover);
}

/* Sr #, Scanner Number, Scanner(s), Sub Total, Paid, Action, and Date of
   issue only ever hold a short value each — center them (header + body)
   and shrink their columns to their content's own width via the classic
   width:1%/white-space:nowrap trick, instead of the table's default even
   distribution stretching them wider than they need. That leftover width
   goes to Details/Email, which actually have long content to show. */
body.page-view-scanner-numbers-new table.table th.views-field-views-send-bulk-form,
body.page-view-scanner-numbers-new table.table th.views-field-counter,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-15,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-1,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-7,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-12,
body.page-view-scanner-numbers-new table.table th.views-field-nothing-3,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-2,
body.page-view-scanner-numbers-new table.table td.views-field-views-send-bulk-form,
body.page-view-scanner-numbers-new table.table td.views-field-counter,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-15,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-1,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-7,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-12,
body.page-view-scanner-numbers-new table.table td.views-field-nothing-3,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-2 {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

body.page-view-scanner-numbers-new table.table thead th {
  background: var(--cm-navy);
  color: var(--cm-on-dark);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 8px;
  border: none;
  white-space: nowrap;
}

body.page-view-scanner-numbers-new table.table tbody td {
  padding: 8px 8px;
  vertical-align: middle;
  border-top: 1px solid var(--cm-paper-3);
}

/* The short numeric/status columns (see the width:1% rule above) don't
   need the same horizontal padding as columns holding real text —
   trimming it further is most of what buys back the space to fit all
   17 columns without a horizontal scrollbar. */
body.page-view-scanner-numbers-new table.table th.views-field-views-send-bulk-form,
body.page-view-scanner-numbers-new table.table th.views-field-counter,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-15,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-1,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-7,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-12,
body.page-view-scanner-numbers-new table.table th.views-field-nothing-3,
body.page-view-scanner-numbers-new table.table th.views-field-webform-submission-value-2,
body.page-view-scanner-numbers-new table.table td.views-field-views-send-bulk-form,
body.page-view-scanner-numbers-new table.table td.views-field-counter,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-15,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-1,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-7,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-12,
body.page-view-scanner-numbers-new table.table td.views-field-nothing-3,
body.page-view-scanner-numbers-new table.table td.views-field-webform-submission-value-2 {
  padding-left: 6px;
  padding-right: 6px;
}


body.page-view-scanner-numbers-new .views-send-selection-form{
  padding: 0 !important;

}

body.page-view-scanner-numbers-new table.table tbody tr:nth-child(even) {
  background: var(--cm-paper);
}

body.page-view-scanner-numbers-new table.table tbody tr:hover {
  background: var(--cm-paper-2);
}

/* The sitewide `strong{ font-size:20px; line-height:28px; ... }` rule in
   base.css (meant for content pseudo-headings) bleeds into the "Name:" /
   "Company:" / "Stand #:" / "Event name:" labels this view's "Details"
   field wraps in <strong> — reset back to the table's own text size,
   same fix applied on the calendar and booked-events views. */
body.page-view-scanner-numbers-new table.table strong {
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  line-height: inherit;
  padding-bottom: 0;
  display: inline;
}

body.page-view-scanner-numbers-new .views-field-nothing-4 {
  min-width: 170px;
  line-height: 1.5;
  vertical-align: top;
}

body.page-view-scanner-numbers-new .views-field-webform-submission-value-11{

max-width: 300px !important;

}

/* --- Paid column, colour-coded like the Status pills elsewhere -------------
   The field template outputs the value AS the span's own class
   (<span class="Yes">, <span class="No">). */
body.page-view-scanner-numbers-new .views-field-webform-submission-value-12 span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cm-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--cm-paper-3);
  color: var(--cm-muted);
}

body.page-view-scanner-numbers-new .views-field-webform-submission-value-12 span.Yes {
  background: #1e8e3e;
  color: #fff;
}

body.page-view-scanner-numbers-new .views-field-webform-submission-value-12 span.No {
  background: #cb1313;
  color: #fff;
}

/* --- Action column (Invoice | edit) ----------------------------------------*/
body.page-view-scanner-numbers-new .views-field-nothing-3 {
  white-space: nowrap;
}

body.page-view-scanner-numbers-new .views-field-nothing-3 a {
  color: var(--cm-red);
  font-weight: 600;
  text-decoration: none;
}

body.page-view-scanner-numbers-new .views-field-nothing-3 a:hover {
  color: var(--cm-red-hover);
  text-decoration: underline;
}

@media (max-width: 900px) {
  body.page-view-scanner-numbers-new .views-exposed-form .d-flex > *,
  body.page-view-scanner-numbers-new .views-exposed-form .d-flex > .form-wrapper:not(.form-actions):not(.captcha-admin-links) > * {
    flex-basis: 100%;
  }

  body.page-view-scanner-numbers-new .form-actions .form-submit,
  body.page-view-scanner-numbers-new .form-actions input[type="submit"] {
    width: 100%;
  }
}