* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin: 0; background: #f4f5f7; color: #222; }
.topbar { background: #1f2937; color: #fff; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
.topbar a { color: #fff; text-decoration: none; margin-left: 16px; font-size: 14px; }
.container { max-width: 900px; margin: 20px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
h2 { margin-top: 0; }
label { display: block; margin: 10px 0 4px; font-size: 14px; font-weight: bold; }
input, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
button { cursor: pointer; border: none; border-radius: 4px; padding: 10px 16px; font-size: 14px; background: #2563eb; color: #fff; margin-top: 12px; }
button.secondary { background: #6b7280; }
button:hover { opacity: .9; }
.msg { padding: 10px; border-radius: 4px; margin-bottom: 12px; font-size: 14px; }
.msg.ok { background: #d1fae5; color: #065f46; }
.msg.err { background: #fee2e2; color: #991b1b; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #e5e7eb; padding: 8px; text-align: left; font-size: 14px; }
th { background: #f3f4f6; }

/* --- Billing screen --- */
.pos-wrap { display: flex; gap: 20px; }
.pos-left { flex: 2; }
.pos-right { flex: 1; background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 14px; }
#scanInput { font-size: 18px; padding: 12px; }
.cart-row { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; padding: 6px 0; font-size: 14px; }
.cart-total { font-size: 20px; font-weight: bold; margin-top: 10px; text-align: right; }

/* --- Label preview (56mm x 38mm) --- */
#labelBox {
  width: 56mm; height: 38mm;
  border: 1px dashed #999;
  padding: 2mm 3.5mm 2mm 2mm;
  font-family: Arial, sans-serif;
  display: flex; flex-direction: column; justify-content: space-between;
  margin-top: 16px;
}
#labelBox .l-store { font-size: 10px; font-weight: bold; text-align: center; }
#labelBox .l-name { font-size: 9px; text-align: center; }
#labelBox .l-meta { font-size: 8px; display: flex; justify-content: space-between; }
#labelBox .l-bottom { display: flex; align-items: center; justify-content: space-between; }
#labelBox svg, #labelBox canvas { max-width: 100%; }
/* ================================
   56mm × 38mm PRODUCT LABEL
   ================================ */

.print-label {
    width: 56mm;
    height: 38mm;

    box-sizing: border-box;

    padding: 2.2mm 2.5mm 2mm 2.5mm;

    background: #fff;
    color: #000;

    font-family: Arial, Helvetica, sans-serif;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    line-height: 1;
}


/* Store name */
.label-store {
    width: 100%;

    text-align: center;

    font-size: 5.2mm;
    font-weight: bold;

    line-height: 5.5mm;

    white-space: nowrap;
    overflow: hidden;
}


/* Product name */
.label-product {
    width: 100%;

    text-align: center;

    font-size: 4.5mm;
    font-weight: bold;

    line-height: 5mm;

    margin-top: 1mm;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* SKU / Size / Colour / MRP rows */
.label-row {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 3.2mm;
    font-weight: bold;

    line-height: 4mm;

    margin-top: 1.2mm;

    min-height: 4mm;
}


/* Left side text */
.label-row span:first-child {
    max-width: 60%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Right side text */
.label-row span:last-child {
    max-width: 40%;

    text-align: right;

    white-space: nowrap;
    overflow: visible;
}


/* Bottom section */
.label-bottom {
    width: 100%;

    flex: 1;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-top: 1mm;

    min-height: 12mm;
}


/* Barcode */
.barcode-area {
    width: 42mm;

    height: 13mm;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


/* Barcode SVG */
#lblBarcode {
    width: 41mm !important;
    height: 12mm !important;

    display: block;
}


/* QR */
.qr-area {
    width: 11mm;
    height: 11mm;

    display: flex;

    justify-content: center;
    align-items: center;

    flex-shrink: 0;
}


/* QR canvas */
#lblQr {
    width: 11mm !important;
    height: 11mm !important;

    display: block;
}


/* ================================
   PRINT
   ================================ */

@media print {

    @page {
        size: 56mm 38mm;
        margin: 0;
    }

    html,
    body {
        width: 56mm;
        height: 38mm;

        margin: 0;
        padding: 0;
    }

    .print-label {
        width: 56mm;
        height: 38mm;

        margin: 0;
        padding: 2.2mm 2.5mm 2mm 2.5mm;
    }
}