/* Styles for the packaging thermal label printing */

/* Styles for printing (thermal labels and document receipts) */

@media print {
  /* Hide UI elements with .no-print */
  .no-print {
    display: none !important;
  }

  /* -------------------------------------------------------------
   * THERMAL LABELS PRINTING (only when .print-label-container exists)
   * ------------------------------------------------------------- */
  body:has(.print-label-container) #root, 
  body:has(.print-label-container) header, 
  body:has(.print-label-container) aside, 
  body:has(.print-label-container) main, 
  body:has(.print-label-container) footer, 
  body:has(.print-label-container) button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  body:has(.print-label-container) html,
  body:has(.print-label-container) body {
    background-color: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100mm !important;
    height: 150mm !important;
    overflow: visible !important;
  }

  body:has(.print-label-container) @page {
    size: 100mm 150mm;
    margin: 0 !important;
  }

  .print-label-container {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100mm !important;
    height: 150mm !important;
    z-index: 9999999 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    padding: 1.5mm !important;
  }

  .thermal-label-sheet {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 97mm !important;
    height: 147mm !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    page-break-after: always !important;
    break-after: page !important;
    overflow: hidden !important;
  }

  .sub-label-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 97mm !important;
    height: 47mm !important;
    padding: 2mm 2.5mm !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    border: 1.2px solid #000000 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
  }

  /* -------------------------------------------------------------
   * GENERAL DOCUMENT RECEIPT PRINTING (e.g. Recibo de Visita)
   * ------------------------------------------------------------- */
  body:not(:has(.print-label-container)) @page {
    size: auto;
    margin: 3mm;
  }

  /* Hide #root completely when printing a document receipt with #print-area in body */
  body:has(#print-area):not(:has(.print-label-container)) #root {
    display: none !important;
  }

  /* Position and display #print-area as a compact single-page ticket/receipt */
  body:has(#print-area):not(:has(.print-label-container)) #print-area {
    display: block !important;
    position: relative !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 440px !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    padding: 4px !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    z-index: 9999999 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }
}

/* Screen utilities for preview modal (displays the 100x150mm sheet with 3 sub-labels stacked) */
.preview-label-sheet {
  width: 378px; /* 100mm at 96dpi is ~378px */
  height: 567px; /* 150mm at 96dpi is ~567px */
  padding: 6px;
  background: white;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  color: black;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.preview-sub-card {
  width: 100%;
  height: 178px; /* approx 47mm */
  border: 1.2px solid #000000;
  border-radius: 5px;
  padding: 8px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  overflow: hidden;
  font-family: 'Inter', -apple-system, sans-serif;
}

/* Blank card styling for inactive slots */
.preview-sub-card-blank, .sub-label-card-blank {
  width: 100%;
  height: 178px;
  border: 1.2px dashed #94a3b8;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media print {
  .sub-label-card-blank {
    border: 1px dashed #cccccc !important;
    background: #ffffff !important;
    color: #cccccc !important;
  }
}

/* General print-label-container should be hidden on screen */
.print-label-container {
  display: none;
}

/* Filter for thermal binarization / high-contrast black-and-white outline look */
.thermal-image-filter {
  filter: grayscale(100%) contrast(400%) brightness(110%) !important;
  mix-blend-mode: multiply !important;
}