<style type="text/css" media="print">
    @page {
        margin-top: 12px;
        margin-bottom: 12px;
        size: auto;
    }

    .content-heading {
        display: none !important;
    }

    body {
        padding-top: 12px;
        padding-bottom: 12px;
        background: #fff !important;
    }

    a[href]:after {
        content: none !important;
    }

    .barcode-page-shell {
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .barcode-sheet {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .barcode-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
</style>
<div class="barcode-page-shell rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-950 md:p-6">
    <div class="mb-5 flex flex-col gap-3 border-b border-slate-200 pb-4 dark:border-slate-700 md:flex-row md:items-center md:justify-between print:hidden">
        <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 md:text-xl"><?= $title; ?></h2>
        <div class="flex items-center gap-2">
            <a href="<?= base_url('admin/items/items_list') ?>" class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800">
                <?= lang('close'); ?>
            </a>
            <button type="button" class="inline-flex items-center gap-2 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm font-semibold text-rose-700 hover:bg-rose-100 dark:border-rose-800 dark:bg-rose-900/20 dark:text-rose-300 dark:hover:bg-rose-900/30" onclick="window.print();">
                <i data-lucide="printer" class="h-4 w-4"></i>
                <?= lang('print'); ?>
            </button>
        </div>
    </div>
    <div id="printableArea" class="barcode-content">
        <?= $html ?>
    </div>
</div>
