/* General styles */
html,
body {
    height: 100%;
    margin: 0;
    font-family: "Poppins", sans-serif; /* Use modern font */
}

body {
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
}

footer {
    background-color: #f8f9fa;
    padding: 10px 0;
    text-align: center;
    margin-top: auto; /* Push footer to the bottom */
}

footer a {
    color: #f0246c; /* Change link color to pink */
    text-decoration: none; /* Remove underline if desired */
}

footer a:hover {
    text-decoration: underline; /* Add underline on hover (optional) */
}

table {
    font-size: 0.95rem;
    color: #333;
}

.table th {
    background-color: #f8f9fa;
    color: #495057;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table {
    border: 1px solid #dee2e6;
}

.fa {
    margin-left: 5px; /* Add spacing for icons */
}

/* Constrain the main content width */
.main-content {
    max-width: 1600px; /* Adjust the value to your needs */
    margin: 0 auto; /* Center horizontally */
}

/* Override Bootstrap primary color */
:root {
    --bs-primary: #f0246c;
}

.btn-primary {
    background-color: #f0246c !important;
    border-color: #f0246c !important;
}

.btn-primary:hover {
    background-color: #d01f5f !important;
    border-color: #c01e56 !important;
}

.icon-custom {
    color: #f0246c; /* Custom pink color for the icons */
}

.icon-custom:hover {
    color: #d01f5f; /* Slightly darker pink on hover (optional) */
}

/* Reduce the font size for the entire table */
.table {
    font-size: 0.85rem; /* Adjust the value as needed */
}

/* Optionally reduce the padding for table cells */
.table td, .table th {
    padding: 6px; /* Adjust for tighter spacing */
}

/* Center-align and wrap headers if needed */
.table th {
    text-align: center;
    white-space: normal; /* Enable text wrapping */
}

.bootstrap-table .search {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.bootstrap-table .search input {
    width: 50%;               /* Expand the width as needed */
    max-width: 600px;         /* Set a max width */
    padding: 8px 12px;        /* Adjust padding for a cleaner look */
    border-radius: 4px;       /* Optional: rounded corners */
    border: 1px solid #ccc;   /* Optional: clean border */
    font-size: 14px;
}

.bootstrap-table .fixed-table-toolbar {
    justify-content: space-between;
}

/* Minimal and simplified autocomplete dropdown styling */
.autocomplete-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
  }
  
  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    font-size: 1rem;
    color: #212121;
    border-bottom: 1px solid #ccc;
  }
  
  .autocomplete-items div:hover,
  .autocomplete-active {
    background-color: #eee;
  }
  
/* ===== 50 × 20 mm label ===================================== */
/* The outer “.label” container represents the physical 50×20 mm sticker. */
.label {
    width: 50mm;                 /* Exactly 50 mm wide on screen/print. */
    height: 20mm;                /* Exactly 20 mm tall on screen/print. */
    display: flex;               /* Use flexbox to lay out children in a row. */
    align-items: center;         /* Vertically center all immediate children. */
    border: 1px solid #333;      /* Outline the label so we see its edges. */
    box-sizing: border-box;      /* Include border in width/height calculations. */
    padding: 0;                  /* Remove any internal padding so children start flush. */
    background: white;
}

/* -- vertical price strip (rotated text) -------------------- */
/* This block handles the left-hand price, rotated 90°. */
.label .price {
    flex: 0 0 1mm;                /* same narrow width */
    display: flex;
    align-items: center;
    justify-content: center;

    transform: rotate(-90deg);
    transform-origin: center;

    font: bold 8pt/1 Arial, sans-serif;
    white-space: nowrap;

    margin-left: 0;               /* ensure it sits flush against the parent’s left edge */
}

/* -- QR block (≈13 mm) --------------------------------------- */
.label .qr {
    flex: 0 0 15mm;
    /* tightened vertical breathing room */
    padding-top: 0.3mm;
    padding-bottom: 0.3mm;
    /* remove any left gap so it hugs the price bar */
    margin-left: 0;
}
.label .qr img {
    width: 100%;                 /* Fill the entire 13 mm × available height. */
    height: 100%;
    object-fit: contain;         /* Scale the QR image uniformly to fit its box. */
}

/* -- Reference + Description -------------------------------- */
/* The “.info” section takes up whatever space remains. */
.label .info {
    flex: 1;                              /* Grow to fill remaining width. */
    display: flex;                        /* Use flex-column to stack ref + desc. */
    flex-direction: column;
    justify-content: space-between;      /* Push ref to top, desc toward bottom. */
    padding: 0.5mm 0.8mm;                 /* Internal padding: 0.5 mm top/bottom, 0.8 mm left/right. */
}
/* Style for the product reference line */
.label .info .ref {
    font-weight: bold;    /* Make the SKU stand out. */
    font-size: 7pt;       /* A little smaller than the price but still legible. */
    line-height: 1;       /* Tight line-height so no extra vertical gap. */
}
/* Style for the product description line(s) */
.label .info .desc {
    font-size: 6pt;       /* Even smaller so longer text fits. */
    line-height: 1;       /* Keep multiple lines (if any) tightly packed. */
}

/* ===== scaled thumbnail inside off-canvas ================== */
/* When previewing in the off-canvas, shrink the whole label by 50%. */
#labelPreview.scaled {
    transform: scale(1);             /* 50% size for an easy-to-view thumbnail. */
    transform-origin: top left;       /* Anchor the shrinking to the top-left corner. */
}

/* ===== full‐modal upscaling ================================= */
#fullLabelModal .modal-dialog {
  display: flex;             /* turn dialog into a flex container */
  align-items: center;       /* vertical center */
  justify-content: center;   /* horizontal center */
  width: auto;               /* no forced width */
  max-width: none;
  height: auto;              /* no forced height */
  margin: 0;                 /* remove Bootstrap’s default margins */
}

/* ── Make the white “sheet” collapse to content ── */
#fullLabelModal .modal-content {
    background-color: transparent !important;
    border: none;
    padding: 0;
    overflow: visible;
  }

/* ── No inner scrolling or caps ── */
#fullLabelModal .modal-body {
  padding: 0;
  overflow: visible;
}

/* ── Blow up your 50×20 mm canvas around its center ── */
#fullLabelModal #fullLabelPreview.amplified {
  width: 50mm;
  height: 20mm;
  transform: scale(4);                    /* scale factor as you prefer */
  transform-origin: center center;        /* grow outwards from center */
}

#labelPreviewContainer {
    cursor: pointer; /* indicate it's clickable */
  }
  
  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    color: rgb(240, 36, 108);
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none; /* let clicks pass through to preview */
    z-index: 10;
    text-align: center; /* <-- center text inside the box */
  }

  @media print {
    /* 1) hide everything... */
    body * {
      visibility: hidden;
    }
  
    /* 2) except your label container */
    #labelPreviewContainer,
    #labelPreviewContainer * {
      visibility: visible;
    }
  
    /* 3) position it at the very top-left */
    #labelPreviewContainer {
      position: absolute;
      top: 0;
      left: 0;
    }
  
    /* 4) force the paper size to 50×20 mm, zero margins */
    @page {
      size: 50mm 20mm;
      margin: 0;
    }
  }