/* All rules in this file are scoped to `body.nametag-print` so they
   don't leak into the rest of the app. Propshaft's
   `stylesheet_link_tag :app` auto-bundles every CSS file in
   `app/assets/stylesheets/`, so any unscoped global rule here would
   apply on every page. The print view (nametags_print.html.erb)
   renders `layout: false` and tags its body with `nametag-print`. */

@page {
  size: 8.5in 11in;
  margin: 0;
}

body.nametag-print,
body.nametag-print * {
  box-sizing: border-box;
}

body.nametag-print {
  margin: 0;
  padding: 0;
  font-family: "Arial Black", Arial, sans-serif;
  background: #e5e5e5;
  color: #111;
}

.nametag-sheet {
  width: 8.5in;
  height: 11in;
  padding-top: 0.5in;
  padding-left: 0.167in;
  display: grid;
  grid-template-columns: 4in 4in;
  grid-template-rows: repeat(3, 3.333in);
  column-gap: 0.167in;
  row-gap: 0;
  page-break-after: always;
  overflow: hidden;
  background: #fff;
  margin: 0 auto;
}

.nametag-label {
  position: relative;
  width: 4in;
  height: 3.333in;
  overflow: hidden;
  background: #fff;
  border: 1px dashed #ddd;
}

.nametag-name-group {
  position: absolute;
  top: 0.34in;
  left: 0.34in;
  right: 0.34in;
}

.nametag-first-name {
  font-size: 0.58in;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.nametag-last-name {
  margin-top: 0.08in;
  font-family: Arial, sans-serif;
  font-size: 0.22in;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nametag-number {
  position: absolute;
  right: 0.22in;
  bottom: 0.06in;
  font-size: 1.28in;
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: 0;
}

.nametag-empty {
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 1in;
  background: #fff;
  font-family: Arial, sans-serif;
}

@media print {
  body.nametag-print {
    background: #fff;
  }

  .nametag-sheet {
    margin: 0;
  }

  .nametag-label {
    border: none;
  }
}