body {
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Preserve newlines (and whitespace runs) typed by users without losing wrapping. */
.preline {
    white-space: pre-line;
    word-break: break-word;
}

/* ==========================================================================
   Standardized status / category badges
   ========================================================================== */
.app-badge {
    align-items: center;
    align-self: flex-start;            /* never stretch inside flex parents */
    background: #e5e7eb;
    border-radius: 9999px;
    color: #374151;
    display: inline-flex;
    flex: 0 0 auto;                    /* keep natural size in flex rows    */
    font-size: 11px;
    font-weight: 600;
    gap: 4px;
    height: 22px;                      /* fixed height — no oval stretching */
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0 10px;
    text-transform: uppercase;
    white-space: nowrap;
    width: max-content;
}

/* Status — generic process flow */
.app-badge--info     { background: #3b82f6; color: #ffffff; } /* blue   */
.app-badge--progress { background: #f59e0b; color: #ffffff; } /* amber  */
.app-badge--success  { background: #10b981; color: #ffffff; } /* green  */
.app-badge--neutral  { background: #6b7280; color: #ffffff; } /* gray   */
.app-badge--danger   { background: #dc2626; color: #ffffff; } /* red    */
.app-badge--warning  { background: #fbbf24; color: #78350f; } /* yellow */
.app-badge--pending  { background: #f59e0b; color: #ffffff; } /* amber  */

/* Roles / domain-specific accents */
.app-badge--admin       { background: #7c3aed; color: #ffffff; } /* purple */
.app-badge--technician  { background: #0ea5e9; color: #ffffff; } /* sky    */
.app-badge--inventory   { background: #3b82f6; color: #ffffff; }
.app-badge--active      { background: #10b981; color: #ffffff; }
.app-badge--expiring    { background: #f59e0b; color: #ffffff; }

/* Priority */
.app-badge--low      { background: #10b981; color: #ffffff; }
.app-badge--medium   { background: #3b82f6; color: #ffffff; }
.app-badge--high     { background: #f59e0b; color: #ffffff; }
.app-badge--critical { background: #dc2626; color: #ffffff; }

.detail-label {
    color: #667085;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.qr-image {
    display: block;
    max-width: 220px;
    width: 100%;
}

.asset-action-btn {
    align-items: center;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    color: #667085;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    width: 34px;
}

.asset-action-btn:hover {
    background: #f2f4f7;
    border-color: #d0d5dd;
    color: #465fff;
}

.asset-action-btn-danger:hover {
    background: #fef3f2;
    border-color: #fecdca;
    color: #d92d20;
}

.dark .asset-action-btn {
    border-color: #344054;
    color: #98a2b3;
}

.dark .asset-action-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: #475467;
    color: #7592ff;
}

.dark .asset-action-btn-danger:hover {
    background: rgba(240, 68, 56, 0.12);
    border-color: rgba(240, 68, 56, 0.28);
    color: #f97066;
}

.sticker-wrap {
    display: grid;
    min-height: 60vh;
    place-items: center;
}

.sticker {
    align-items: center;
    background: #fff;
    border: 0.35mm solid #1d2939;
    border-radius: 1.5mm;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
    color: #101828;
    display: grid;
    font-family: Arial, sans-serif;
    gap: 1mm;
    grid-template-columns: minmax(0, 1fr) 27mm;
    height: 30mm;
    overflow: hidden;
    padding: 0.8mm;
    position: relative;
    width: 60mm;
}

.sticker::before {
    background: linear-gradient(180deg, #465fff, #1d2939);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 1.8mm;
}

.sticker-company {
    font-size: 6.4pt;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    padding-left: 1.6mm;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.sticker-meta {
    font-size: 6.4pt;
    line-height: 1.15;
    margin-top: 1.2mm;
    padding-left: 1.6mm;
}

.sticker-asset-tag {
    color: #1d2939;
    display: block;
    font-size: 9pt;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.7mm;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticker-instruction {
    color: #465fff;
    font-size: 5.6pt;
    font-weight: 700;
    line-height: 1;
    margin-top: 1.2mm;
    padding-left: 1.6mm;
    text-transform: uppercase;
}

.sticker-qr,
.bulk-sticker-qr {
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.sticker-qr {
    height: 27mm;
    padding: 0.6mm;
    width: 27mm;
}

.bulk-sticker-qr {
    height: 25mm;
    padding: 1.8mm;
    width: 25mm;
}

.sticker img {
    display: block;
    height: 100%;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    object-fit: contain;
    width: 100%;
}

.bulk-sticker-preview {
    max-width: 100%;
}

.bulk-sticker-sheet {
    align-content: start;
    background: #fff;
    color: #101828;
    display: grid;
    font-family: Arial, sans-serif;
    grid-auto-rows: 30mm;
    grid-template-columns: repeat(4, 50mm);
    margin: 0 auto;
    min-height: 287mm;
    width: 200mm;
}

.bulk-sticker {
    align-items: center;
    border: 0.25mm solid #d0d5dd;
    box-sizing: border-box;
    display: grid;
    gap: 1mm;
    grid-template-columns: minmax(0, 1fr) 25mm;
    height: 30mm;
    overflow: hidden;
    padding: 1.2mm;
    page-break-inside: avoid;
    position: relative;
    width: 50mm;
}

.bulk-sticker::before {
    background: #465fff;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 1.5mm;
}

.bulk-sticker-company {
    font-size: 6.5pt;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-sticker-tag {
    font-size: 8.5pt;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 1mm;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-sticker-meta {
    font-size: 5.8pt;
    line-height: 1.15;
    margin-top: 1mm;
    overflow: hidden;
}

.bulk-sticker-note {
    font-size: 5.5pt;
    font-weight: 700;
    line-height: 1;
    margin-top: 1mm;
}

.bulk-sticker-qr img {
    display: block;
    height: 100%;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    object-fit: contain;
    width: 100%;
}

@media print {
    @page single-sticker {
        margin: 0;
        size: 60mm 30mm;
    }

    @page bulk-stickers {
        margin: 5mm;
        size: A4;
    }

    .single-sticker-page {
        page: single-sticker;
    }

    .bulk-stickers-page {
        page: bulk-stickers;
    }

    body {
        background: #fff;
    }

    body * {
        visibility: hidden;
    }

    .sticker,
    .sticker *,
    .bulk-sticker-preview,
    .bulk-sticker-preview *,
    .bulk-sticker-sheet,
    .bulk-sticker-sheet * {
        visibility: visible;
    }

    .sticker {
        border: 0;
        box-shadow: none;
        left: 0;
        position: fixed;
        top: 0;
    }

    .bulk-stickers-page .bulk-sticker-preview {
        border: 0;
        box-shadow: none;
        left: 0;
        overflow: visible;
        padding: 0;
        position: absolute;
        top: 0;
    }

    .bulk-stickers-page .bulk-sticker-sheet {
        margin: 0;
        min-height: 287mm;
        width: 200mm;
    }

    .bulk-stickers-page .bulk-sticker {
        break-inside: avoid;
        page-break-inside: avoid;
    }

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