/*
 | Tampilan satu label. Semua ukuran memakai milimeter supaya hasil cetak
 | sama dengan ukuran label fisik, bukan tergantung resolusi layar.
 |
 | Variabel yang dipakai (di-set dari Blade):
 |   --label-w, --label-h, --barcode-h, --gap, --cols
 */

.label {
    --label-w: 37mm;
    --label-h: 24mm;
    --barcode-h: 9mm;
    /* Lebar blok bar relatif label */
    --bar-w: 88%;

    box-sizing: border-box;
    width: var(--label-w);
    height: var(--label-h);
    /* padding minimal untuk label format 105 */
    padding: 0.8mm 1.5mm 0.8mm;
    background: #fff;
    color: #000;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5mm;
    overflow: hidden;
    page-break-inside: avoid;
    break-inside: avoid;
}

.label--bordered {
    outline: 0.2mm dashed #9aa3b2;
    outline-offset: -0.2mm;
}

/* Title di atas barcode (KET) - compact untuk label kecil */
.label__title-top {
    width: 92%;
    margin: 0 auto 0.4mm;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4mm;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    color: #000;
    /* Max 1 line untuk label kecil */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* Title di bawah label (KET) - paling bawah */
.label__title-bottom {
    width: 92%;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4mm;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    color: #000;
    /* Max 1 line untuk label kecil */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* Bar + teks kode dianggap satu blok supaya lebarnya sama dan rata tengah. */
.label__stack {
    width: var(--bar-w);
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.label__barcode {
    width: 100%;
    height: var(--barcode-h);
    display: block;
}

.label__barcode svg {
    width: 100%;
    height: 100%;
    display: block;
    shape-rendering: crispEdges;
}

/* Teks kecil menempel di bawah bar - compact untuk label kecil */
.label__code {
    width: 100%;
    margin: 0.15mm auto 0;
    display: block;
    font-family: "Courier New", "Consolas", "Monaco", monospace, Arial, Helvetica, sans-serif;
    font-size: 2.2mm;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    text-align: center;
    color: #000;
    /* Single line, no wrap */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* Teks pecahan di bawah kode - compact untuk label kecil */
.label__pecahan {
    width: 100%;
    margin: 0.2mm auto 0;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4mm;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    color: #333;
}

/* Legacy title class - tidak dipakai lagi, tapi tetap ada untuk backward compatibility */
.label__title {
    width: 100%;
    margin: auto auto 0;
    font-family: "Times New Roman", Times, serif;
    font-size: 6.4mm;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.label__error {
    font-family: Arial, sans-serif;
    font-size: 2.6mm;
    color: #b00;
}

/* ---------- Lembar cetak ---------- */

.sheet {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), var(--label-w, 37mm));
    gap: var(--gap, 2mm);
    justify-content: flex-start;
    align-content: flex-start;
    padding-left: 3mm; /* Geser sedikit ke kanan agar tidak terpotong di kiri */
    
    /* CSS Variables untuk offset setiap kolom */
    --offset-col1: 0mm;
    --offset-col2: 0mm;
    --offset-col3: 0mm;
    --offset-col4: 0mm;
    --offset-col5: 0mm;
}

/* Terapkan offset untuk setiap kolom - untuk layout 5 kolom */
.sheet .label-card:nth-child(5n+1) {
    margin-left: var(--offset-col1);
}

.sheet .label-card:nth-child(5n+2) {
    margin-left: var(--offset-col2);
}

.sheet .label-card:nth-child(5n+3) {
    margin-left: var(--offset-col3);
}

.sheet .label-card:nth-child(5n+4) {
    margin-left: var(--offset-col4);
}

.sheet .label-card:nth-child(5n) {
    margin-left: var(--offset-col5);
}

/* Page break setelah 6 baris (30 label untuk 5 kolom) */
.sheet .label-card:nth-child(30n) {
    page-break-after: always;
    break-after: page;
}

/* Untuk 5 kolom: 6 baris x 5 kolom = 30 label per halaman */
/* Label ke-31 akan mulai di halaman baru */

.print-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #101828;
    color: #fff;
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.print-bar a,
.print-bar button {
    font: inherit;
}

.print-bar__info {
    margin-right: auto;
    font-size: 13px;
}

.print-stage {
    padding: 16px;
    background: #dfe3ea;
    min-height: 60vh;
}

.print-paper {
    background: #fff;
    display: inline-block;
    padding: var(--paper-margin, 5mm);
    box-shadow: 0 6px 22px rgba(16, 24, 40, 0.18);
}

@media print {
    .no-print {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        margin: 0;
        padding: 0;
    }

    .print-stage {
        padding: 0;
        background: #fff;
        min-height: 0;
    }

    .print-paper {
        padding: 0;
        box-shadow: none;
        display: block;
    }

    .label {
        outline: none;
    }

    .label--bordered {
        outline: 0.2mm dashed #999;
    }
    
    /* Page break setelah 6 baris (30 label untuk 5 kolom) */
    .sheet .label-card:nth-child(30n) {
        page-break-after: always !important;
        break-after: page !important;
    }
    
    /* Hindari page break di tengah label */
    .label-card {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}