/* Label Print Styles */

/* Screen preview container */
.label-preview-container {
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Base label styles - vertical layout by default */
.bale-label {
    background: white;
    border: 1px dashed #ccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Arial', sans-serif;
    padding: 12px;
}

/* Inner wrapper - pass-through by default */
.bale-label .label-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* In vertical mode, barcode comes first visually, then info-column below */
.bale-label .label-barcode {
    order: -1;
    margin: 8px 0;
    display: flex;
    justify-content: center;
}

/* Info column is a simple pass-through in vertical mode */
.bale-label .label-info-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Reorder: bale number goes above barcode in vertical mode */
.bale-label .label-info-column .label-bale-number {
    order: -1;
}

/* Size variants - screen preview (scaled to fit dialog) */
.bale-label.size-100x60 {
    width: 420px;
    height: 227px;
}

.bale-label.size-100x75 {
    width: 420px;
    height: 283px;
}

.bale-label.size-60x100 {
    width: 227px;
    height: 378px;
    padding: 6px;
    overflow: hidden;
}

/* Label content elements */
.label-bale-number {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.label-barcode svg {
    max-width: 100%;
    height: auto;
}

.label-farmer-info {
    font-size: 12px;
    margin-top: 4px;
    text-align: center;
}

.label-metadata {
    font-size: 10px;
    color: #666;
    margin-top: 4px;
    text-align: center;
}

/* --- 100x60 horizontal layout --- */
.bale-label.size-100x60 {
    padding: 10px 14px;
}

.bale-label.size-100x60 .label-inner {
    flex-direction: row;
    gap: 16px;
}

.bale-label.size-100x60 .label-barcode {
    order: 0;
    flex-shrink: 0;
    margin: 0;
}

.bale-label.size-100x60 .label-info-column {
    min-width: 0;
    justify-content: center;
    overflow: hidden;
}

.bale-label.size-100x60 .label-info-column .label-bale-number {
    order: 0;
    font-size: 16px;
    white-space: nowrap;
}

.bale-label.size-100x60 .label-farmer-info {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bale-label.size-100x60 .label-metadata {
    font-size: 10px;
    white-space: nowrap;
}

/* --- 100x75 horizontal layout (same as 100x60 but taller) --- */
.bale-label.size-100x75 {
    padding: 10px 14px;
}

.bale-label.size-100x75 .label-inner {
    flex-direction: row;
    gap: 16px;
}

.bale-label.size-100x75 .label-barcode {
    order: 0;
    flex-shrink: 0;
    margin: 0;
}

.bale-label.size-100x75 .label-info-column {
    min-width: 0;
    justify-content: center;
    overflow: hidden;
}

.bale-label.size-100x75 .label-info-column .label-bale-number {
    order: 0;
    font-size: 16px;
    white-space: nowrap;
}

.bale-label.size-100x75 .label-farmer-info {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bale-label.size-100x75 .label-metadata {
    font-size: 11px;
    white-space: nowrap;
}

/* --- 60x100 rotated layout --- */
/* Rotate the entire inner content 90deg; swap width/height so the
   rotated block (which is visually landscape) fits inside the portrait label */
.bale-label.size-60x100 .label-inner {
    transform: rotate(90deg);
    width: 366px;   /* maps to the label height */
    height: 215px;  /* maps to the label width */
    flex-direction: row;
    gap: 12px;
}

.bale-label.size-60x100 .label-barcode {
    order: 0;
    flex-shrink: 0;
    margin: 0;
}

.bale-label.size-60x100 .label-info-column {
    min-width: 0;
    justify-content: center;
    overflow: hidden;
}

.bale-label.size-60x100 .label-info-column .label-bale-number {
    order: 0;
}

.bale-label.size-60x100 .label-bale-number {
    font-size: 14px;
    white-space: nowrap;
}

.bale-label.size-60x100 .label-farmer-info {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bale-label.size-60x100 .label-metadata {
    font-size: 8px;
    white-space: nowrap;
}

/* Print-specific styles */
@media print {
    /* Hide everything except the label */
    body * {
        visibility: hidden;
    }

    .print-label-content,
    .print-label-content * {
        visibility: visible;
    }

    .print-label-content {
        position: absolute;
        left: 0;
        top: 0;
    }

    /* Physical dimensions for print */
    .bale-label.size-100x60 {
        width: 100mm;
        height: 60mm;
        padding: 3mm;
    }

    .bale-label.size-100x75 {
        width: 100mm;
        height: 75mm;
        padding: 3mm;
    }

    .bale-label.size-60x100 {
        width: 60mm;
        height: 100mm;
        padding: 2mm;
        overflow: hidden;
    }

    /* Remove preview styling for print */
    .bale-label {
        border: none;
        box-shadow: none;
    }

    @page {
        margin: 0;
        size: auto;
    }
}