/* Label Styles */
.label-container {
  width: 100%;
  background: white;
  border: 1pt solid black;
  border-radius: 4pt;
  padding: 6pt;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
}

.label-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1pt;
  font-weight: bold;
}

.label-product-name {
  max-width: 60%;
  word-wrap: break-word;
  overflow: hidden;
}

.label-serial-number {
  text-align: right;
}

.label-divider {
  border-bottom: 0.5pt solid black;
  margin-bottom: 5pt;
}

.label-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  flex: 1;
}

.label-left-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1pt;
}

.label-field {
  /* Base field styling */
}

.label-field-label {
  color: #333;
}

.label-field-value {
  font-weight: bold;
  word-break: break-word;
}

.label-field-divider {
  /* Dynamic border-bottom and margin-top will be applied via CSS custom properties */
}

.label-qr-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-qr-code {
  /* Dynamic width and height will be applied via CSS custom properties */
}

.label-qr-placeholder {
  border: 2pt dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  /* Dynamic width, height, and font-size will be applied via CSS custom properties */
}

/* Size-specific styles for 40x30 labels */
.label-container--40x30 {
  --font-size: 5pt;
  --content-font-size: 5pt;
  --title-font-size: 4pt;
  --qr-size: 45pt;
  --gap: 1.5pt;
  --label-height: 85pt;
  --margin-top: 0.2pt;
  --border-bottom: 0.3pt dashed #ccc;
}

.label-container--40x30 {
  height: var(--label-height);
}

.label-container--40x30 .label-header {
  font-size: var(--title-font-size);
}

.label-container--40x30 .label-serial-number {
  font-size: var(--content-font-size);
}

.label-container--40x30 .label-content-grid {
  gap: var(--gap);
}

.label-container--40x30 .label-field-label {
  font-size: var(--font-size);
}

.label-container--40x30 .label-field-value {
  font-size: var(--content-font-size);
}

.label-container--40x30 .label-field-divider {
  border-bottom: var(--border-bottom);
  margin-top: var(--margin-top);
}

.label-container--40x30 .label-qr-code {
  width: var(--qr-size);
  height: var(--qr-size);
}

.label-container--40x30 .label-qr-placeholder {
  width: var(--qr-size);
  height: var(--qr-size);
  font-size: var(--font-size);
}

/* Size-specific styles for 100x76 labels */
.label-container--100x76 {
  --font-size: 12pt;
  --content-font-size: 13pt;
  --title-font-size: 10pt;
  --qr-size: 100pt;
  --gap: 8pt;
  --label-height: 205pt;
  --margin-top: 2pt;
  --border-bottom: 2pt dashed #ccc;
}

.label-container--100x76 {
  height: var(--label-height);
}

.label-container--100x76 .label-header {
  font-size: var(--title-font-size);
}

.label-container--100x76 .label-serial-number {
  font-size: var(--content-font-size);
}

.label-container--100x76 .label-content-grid {
  gap: var(--gap);
}

.label-container--100x76 .label-field-label {
  font-size: var(--font-size);
}

.label-container--100x76 .label-field-value {
  font-size: var(--content-font-size);
}

.label-container--100x76 .label-field-divider {
  border-bottom: var(--border-bottom);
  margin-top: var(--margin-top);
}

.label-container--100x76 .label-qr-code {
  width: var(--qr-size);
  height: var(--qr-size);
}

.label-container--100x76 .label-qr-placeholder {
  width: var(--qr-size);
  height: var(--qr-size);
  font-size: var(--font-size);
}