/* ── Label internals ── */

.label {
  position: relative;
  width: var(--label-width);
  max-width: var(--label-width);
  height: var(--label-height);
  max-height: var(--label-height);
  padding: 0.125in;
  overflow: hidden;
}

.label:hover {
  outline: 1px solid #ccc;
}

/* ── Toggle mask ── */
.label .mask {
  display: none;
}
.label .mask.visible {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 100;
}

/* ── Header ── */
.label header {
  height: var(--header-height, 0.5in);
  max-height: var(--header-height, 0.5in);
}

.label header img {
  height: 100%;
  max-width: 100%;
}

.label hr.divider {
  height: 1px;
  border: none;
  background-color: #aaa;
  margin: 2px 0;
}

/* ── Fields table ── */
.label table {
  width: 100%;
  border-collapse: collapse;
}

.label table td {
  vertical-align: top;
}

.label table td:nth-child(1) {
  width: 0.55in;
  font-size: var(--label-font, 8pt);
  text-align: right;
  padding-top: 0.09in;
  white-space: nowrap;
}

.label table td:nth-child(2) {
  font-size: var(--field-font, 11pt);
  text-align: left;
  padding-left: 0.125in;
}

.label table tr.date td {
  padding-bottom: 0.0875in;
}

/* ── Inputs ── */
.label table td input,
.label table td textarea {
  width: 100%;
  max-width: 100%;
  font-family: "roboto-condensed", sans-serif;
  font-size: inherit;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  overflow: hidden;
  padding: 1px 2px;
  background: transparent;
}

.label table td input:hover,
.label table td textarea:hover {
  background-color: rgba(200, 200, 200, 0.25);
}

.label table td input:focus,
.label table td textarea:focus {
  border: 1px solid #999;
}

.label table td textarea {
  resize: none;
  display: block;
}

/* ── 5163 overrides ── */
:root.label-5163 {
  --header-height: 0.35in;
  --label-font: 7pt;
  --field-font: 9pt;
}

@media print {
  .label:hover { outline: none; }
  .label .toggleVisible { display: none !important; }
  .label .picker-btn { display: none !important; }
  .label table td input,
  .label table td textarea {
    border-color: transparent !important;
    background: transparent !important;
  }
  .label table td input:hover,
  .label table td textarea:hover,
  .label table td input:focus,
  .label table td textarea:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}

/* ── Debug rulers (?debug=rulers) ──
   Magenta hairlines at every expected Avery label edge. Forces the page
   into print-layout on screen (hides toolbar + sidebar, drops #app-body
   centering, applies the same grid padding print uses) so the rulers
   align with the rendered labels without having to open print preview.
   Opt-in only; inert when the body class is absent. */
.debug-rulers {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 8.5in;
}

.debug-rulers .toolbar,
.debug-rulers .no-print,
.debug-rulers .common-sidebar,
.debug-rulers .page-nav {
  display: none !important;
}

.debug-rulers #app-body {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
}

.debug-rulers #main-content {
  margin: 0 !important;
  padding: 0 !important;
}

.debug-rulers .grid {
  margin: 0 !important;
  padding-top: calc(var(--page-top-margin) + var(--print-offset-y)) !important;
  padding-left: calc(var(--page-side-margin) + var(--print-offset-x)) !important;
}

.debug-rulers-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.5in;
  height: 11in;
  pointer-events: none;
  z-index: 9999;
}

.debug-rulers-overlay .dbg-hline,
.debug-rulers-overlay .dbg-vline {
  position: absolute;
  background: magenta;
}

.debug-rulers-overlay .dbg-hline {
  left: 0;
  width: 100%;
  height: 0.5px;
}

.debug-rulers-overlay .dbg-vline {
  top: 0;
  width: 0.5px;
  height: 100%;
}

.debug-rulers-overlay .dbg-hline::after,
.debug-rulers-overlay .dbg-vline::after {
  content: attr(data-at);
  position: absolute;
  background: magenta;
  color: white;
  font-family: monospace;
  font-size: 7pt;
  padding: 1px 3px;
  line-height: 1;
}

.debug-rulers-overlay .dbg-hline::after {
  top: 1px;
  left: 0;
}

.debug-rulers-overlay .dbg-vline::after {
  top: 0;
  left: 1px;
  writing-mode: vertical-rl;
}

.debug-rulers-overlay .dbg-legend {
  position: absolute;
  bottom: 0.125in;
  left: 0.125in;
  right: 0.125in;
  background: rgba(255, 0, 255, 0.9);
  color: white;
  font-family: monospace;
  font-size: 8pt;
  padding: 4px 6px;
  pointer-events: auto;
}

.debug-rulers-overlay .dbg-legend a {
  color: white;
  text-decoration: underline;
}

.debug-rulers-overlay .dbg-legend a:hover {
  color: #ffe0ff;
}