/* Base Reset & Fonts */
:root {
    --a4-width: 210mm;
    --a4-height: 297mm;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #111827;
}

::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
}

/* Print Sheet Visualization (Screen Mode) */
#printSheet {
    width: var(--a4-width);
    height: var(--a4-height);
    /* No padding here, padding determines margins */
    box-sizing: border-box;
    position: relative;
    /* CSS Grid/Flex will apply dynamically via JS, but base is block */
    background: white;
    overflow: hidden;
    /* Avoid overflowing content breaking the sheet illusion */
}

/* Individual Label Styling (Screen & Print) */
.label-item {
    outline: 1px dashed #e5e7eb;
    /* Light gray guide for screen */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 2mm;
    /* Internal padding safe zone */
    transition: background-color 0.2s;
}

.label-item:hover {
    background-color: #f9fafb;
    /* Slight hover effect on screen */
}

/* Label Content Styling */
.label-content {
    height: 100%;
    width: 100%;
    border: 1px solid transparent;
    /* Placeholder */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.label-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.label-logo {
    max-height: 12mm;
    /* Restrict logo height */
    max-width: 100%;
    object-fit: contain;
    object-position: left;
    margin-bottom: 2px;
}

.label-sku {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11pt;
    /* Print friendly unit */
    color: #000;
    line-height: 1.1;
}

.label-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 8pt;
    color: #444;
    line-height: 1.1;
    margin-top: 2px;

    /* Truncate text */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.label-qr {
    flex-shrink: 0;
    width: 20mm;
    /* Fixed width for QR */
    height: 20mm;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    /* Ensure good contrast */
}

.label-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* High contrast for printing */
    image-rendering: pixelated;
}


/* PRINT SPECIFIC STYLES */
@media print {
    @page {
        size: A4;
        margin: 0;
        /* Critical: Remove browser default margins */
    }

    body {
        margin: 0;
        padding: 0;
        background: white;
        height: auto;
        width: 100%;
        overflow: visible;
    }

    /* Hide UI elements */
    .print-hidden,
    nav,
    aside {
        display: none !important;
    }

    /* Reset layout containers */
    main {
        padding: 0 !important;
        /* Critical: Override pt-16 */
        margin: 0 !important;
        height: auto;
        overflow: visible;
        display: block;
    }

    section.print-reset-layout {
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        display: block;
        overflow: visible;
    }

    /* Ensure styles are exact */
    #printSheet {
        box-shadow: none !important;
        transform: none !important;
        margin: 0 !important;
        width: 210mm !important;
        height: 297mm !important;
    }

    .label-item {
        outline: none !important;
        /* Remove guides on print */
    }

    /* Force background colors */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}