/* TRAP-99: dedicated print stylesheet for the QR-label batch sheet (docs/frontend-ux-conventions.md
   has no print convention yet — this establishes it). The on-screen rules lay the labels out as a
   simple responsive grid; the @media print block hides everything except the .tw-print-area subtree
   using the standard "hide all, re-show + reposition one element" technique, so it works regardless
   of what app-shell chrome (appbar/drawer/breadcrumbs) wraps it — no per-release maintenance of a
   list of chrome class names.

   .tw-print-mode-label (added after real-world Dymo LabelWriter testing, 2026-07-18): a dedicated
   thermal/label-printer roll printer has no A4-sized tray — it prints one small physical label per
   "page". Forcing our own fixed @page size while such a printer is the OS destination fights the
   printer's actual media, so labels come out cropped/misaligned. This mode drops to a single column
   with one label per printed page (break-after) so each physical label gets exactly one QR code; the
   matching @page override (size: auto, no forced A4) is injected per-instance via <HeadContent> in
   BoxBatchDetail.razor rather than here, because @page can't be scoped by an ancestor class. */

.tw-label-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.tw-label-cell {
    border: 1px solid var(--mud-palette-lines-default, #444);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.tw-label-code {
    font-family: var(--tw-font-mono, monospace);
    margin-top: 4px;
    word-break: break-all;
}

@media print {
    body * {
        visibility: hidden;
    }

    .tw-print-area,
    .tw-print-area * {
        visibility: visible;
    }

    .tw-print-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

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

    @page {
        size: A4;
        margin: 12mm;
    }

    .tw-label-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8mm;
    }

    .tw-label-cell {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tw-print-mode-label .tw-label-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .tw-print-mode-label .tw-label-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none;
        break-after: page;
        page-break-after: always;
    }

    .tw-print-mode-label .tw-label-cell:last-child {
        break-after: auto;
        page-break-after: auto;
    }
}

/* The label sheet inherits the app theme, so in dark mode it printed near-white text on white
   paper: unreadable labels and a lot of toner. Print is always ink on paper. */
@media print {
    .tw-print-area,
    .tw-print-area * {
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .tw-label-cell {
        border-color: #000 !important;
    }
}