@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

/* ─── Body defaults ─── */
/* Pin the rem reference. Without this, rem-sized text follows each browser's configurable
   default font size (Firefox users often have ≠16px) while token-sized text stays at the
   Fluent type ramp — the two drift apart and the same page renders inconsistently. */
html {
    font-size: 16px;
}

/* Static type-ramp defaults so token-sized text is correct even before (or without) the
   FAST design-token script, which re-declares these via document.adoptedStyleSheets and
   therefore still wins once loaded. */
:root {
    --type-ramp-base-font-size: 14px;
    --type-ramp-base-line-height: 20px;
}

body {
    --body-font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size, 14px);
    line-height: var(--type-ramp-base-line-height, 20px);
    margin: 0;
}

/* =====================================================================
   Shell — full-viewport flex column; only nav + content scroll.
   ===================================================================== */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

.shell-toggle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.app-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 12px;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    position: relative;
    z-index: 200;
}

.app-body-row {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ---- brand ---- */
.app-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    border-radius: 4px;
}

.brand-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-size: 18px;
    font-weight: 700;
}

.brand-sub {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

/* ---- header actions ---- */
.hdr-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

    .icon-btn:hover {
        background: color-mix(in srgb, var(--neutral-foreground-rest) 8%, transparent);
    }

.wms-notif {
    position: relative;
    display: inline-flex;
}

    .wms-notif[data-has-unread="true"]::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--error, #d13438);
        border: 2px solid var(--neutral-layer-1);
        pointer-events: none;
    }

/* =====================================================================
   Sidebar
   ===================================================================== */
.app-sidebar {
    flex-shrink: 0;
    width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border-inline-end: 1px solid var(--neutral-stroke-divider-rest);
    overflow: hidden;
    z-index: 50;
    transition: width 200ms cubic-bezier(.4, 0, .2, 1);
    will-change: width;
}

.sidebar-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.sidebar-title {
    flex: 1;
    padding-left: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
}

.collapse-btn .ico-expand {
    display: none;
}

.app-navmenu {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-stroke-rest) transparent;
    overscroll-behavior: none;
}

/* Fluent nav link / group sizing (colors stay from theme) */
fluent-nav-link::part(content) {
    padding: 4px 10px !important;
    margin: 1px 6px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    gap: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

fluent-nav-group::part(heading) {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    padding: 10px 12px 2px !important;
}

/* ---- profile footer (pinned bottom) ---- */
.sidebar-profile-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.usermenu {
    position: relative;
}

.sidebar-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    text-align: start;
    line-height: 1rem;
    transition: background 140ms ease;
}

    .sidebar-profile-btn:hover {
        background: color-mix(in srgb, var(--neutral-foreground-rest) 7%, transparent);
    }

.sidebar-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--accent-fill-rest);
    color: var(--accent-foreground-rest, #fff);
}

.sidebar-profile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-profile-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-profile-email {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- profile popover ---- */
.userpop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Fixed so it floats above the sidebar (which clips with overflow:hidden) instead of
   being cut off. Anchored above the profile button / footer at the bottom-left. */
.userpop {
    position: fixed;
    left: 12px;
    bottom: 100px;
    width: 244px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .75rem;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}

.userpop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.userpop-accentrow {
    flex-wrap: wrap;
}

.userpop-sep {
    height: 1px;
    background: var(--neutral-stroke-divider-rest);
}

.sidebar-control-label {
    font-size: .85rem;
}

.sidebar-accent {
    display: flex;
    gap: .4rem;
}

    .sidebar-accent .swatch {
        width: 22px;
        height: 22px;
        padding: 0;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
        transition: transform .1s ease, border-color .1s ease;
    }

        .sidebar-accent .swatch:hover {
            transform: scale(1.12);
        }

        .sidebar-accent .swatch.is-active {
            border-color: var(--neutral-foreground-rest);
        }

.sidenav-logout fluent-button {
    width: 100%;
}

/* =====================================================================
   Content + footer
   ===================================================================== */
.app-content {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--neutral-layer-1);
    scrollbar-width: thin;
}

.app-content-inner {
    min-height: 100%;
    padding: 1.5rem 2rem;
}

.app-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    color: var(--neutral-foreground-hint);
}

.footer-copyright,
.footer-version {
    font-size: .75rem;
    opacity: .7;
}

.footer-version {
    margin-inline-start: auto;
}

/* ==========================================================
   CONSISTENT SCROLLBAR
   ========================================================== */

.app-navmenu,
.app-content,
.body-content,
.lookup-panel-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-stroke-rest) transparent;
    scroll-behavior: smooth;
    will-change: scroll-position;
}

    .app-navmenu::-webkit-scrollbar,
    .app-content::-webkit-scrollbar,
    .body-content::-webkit-scrollbar,
    .lookup-panel-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .app-navmenu::-webkit-scrollbar-thumb,
    .app-content::-webkit-scrollbar-thumb,
    .body-content::-webkit-scrollbar-thumb,
    .lookup-panel-scroll::-webkit-scrollbar-thumb {
        background: var(--neutral-stroke-rest);
        border-radius: 999px;
    }

        .app-navmenu::-webkit-scrollbar-thumb:hover,
        .app-content::-webkit-scrollbar-thumb:hover,
        .body-content::-webkit-scrollbar-thumb:hover,
        .lookup-panel-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--neutral-foreground-hint);
        }

/* Desktop-wide fallback: any other scrollable area (dialog bodies, etc.) gets the same slim
   treatment. Mouse-driven desktop use (wheel/drag) doesn't need a grabbable scrollbar — it's
   just a position indicator — so it can stay thin everywhere, not just the containers above.
   Left off <768px: touch scrolling already uses the OS's own auto-hiding overlay scrollbar. */
@media (min-width: 768px) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--neutral-stroke-rest) transparent;
    }

    *::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    *::-webkit-scrollbar-thumb {
        background: var(--neutral-stroke-rest);
        border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb:hover {
        background: var(--neutral-foreground-hint);
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* =====================================================================
   Desktop collapse (icons only) + mobile overlay  — pure CSS via :has()
   ===================================================================== */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }

    .mobile-overlay {
        display: none !important;
    }

    .app-shell:has(#nav-collapse:checked) .app-sidebar {
        width: 56px;
    }

    .app-shell:has(#nav-collapse:checked) .sidebar-title,
    .app-shell:has(#nav-collapse:checked) .sidebar-profile-text,
    .app-shell:has(#nav-collapse:checked) .fluent-nav-text,
    .app-shell:has(#nav-collapse:checked) .expand-collapse-button,
    .app-shell:has(#nav-collapse:checked) .rotate,
    .app-shell:has(#nav-collapse:checked) .collapse-btn .ico-collapse {
        display: none !important;
    }

    .app-shell:has(#nav-collapse:checked) .collapse-btn .ico-expand {
        display: inline-flex !important;
    }

    .app-shell:has(#nav-collapse:checked) .sidebar-header {
        justify-content: center;
        padding: 0;
    }

    .app-shell:has(#nav-collapse:checked) .sidebar-profile-btn {
        justify-content: center;
        padding-inline: 0;
    }

    .app-shell:has(#nav-collapse:checked) fluent-nav-link::part(content) {
        justify-content: center !important;
        padding: 4px !important;
    }

    .app-shell:has(#nav-collapse:checked) .fluent-nav-item,
    .app-shell:has(#nav-collapse:checked) .fluent-nav-link,
    .app-shell:has(#nav-collapse:checked) .positioning-region,
    .app-shell:has(#nav-collapse:checked) .content-region {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding-inline: 0 !important;
        gap: 0 !important;
        margin-inline-start: unset !important;
    }

    .app-shell:has(#nav-collapse:checked) .fluent-nav-icon {
        margin: 0 !important;
    }

    /* Drop the active vertical-bar indicator when collapsed — otherwise it gets centered
       and overlaps the icon. */
    .app-shell:has(#nav-collapse:checked) .positioning-region::before,
    .app-shell:has(#nav-collapse:checked) .positioning-region::after,
    .app-shell:has(#nav-collapse:checked) .content-region::before,
    .app-shell:has(#nav-collapse:checked) .content-region::after {
        content: unset !important;
        display: none !important;
    }

    /* Collapsed rail: hide group children (their collapsible container is a sibling of the
       group heading), keeping only top-level items + group icons. */
    .app-shell:has(#nav-collapse:checked) .fluent-collapsible-region-container {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    .app-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: 0;
        border-inline-end: none;
    }

    .app-shell:has(#nav-mobile:checked) .app-sidebar {
        width: 280px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, .28);
    }

    .mobile-overlay {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 49;
        background: rgba(0, 0, 0, .4);
    }

    .app-shell:has(#nav-mobile:checked) .mobile-overlay {
        display: block;
    }

    .app-content-inner {
        padding: 1rem;
    }

    /* Keep dialogs (edit + confirmation) off the screen edges on small screens. */
    fluent-dialog::part(control) {
        max-width: 92vw !important;
    }
}

/* =====================================================================
   Standard content header
   ===================================================================== */
.page-header {
    margin-bottom: 1.25rem;
}

    .page-header h1 {
        margin: 0;
        font-size: 1.6rem;
        font-weight: 600;
    }

.page-subtitle {
    margin: .25rem 0 0;
    color: var(--neutral-foreground-hint);
}

.page-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.muted-hint {
    margin: 0;
    padding: .5rem 0;
    color: var(--neutral-foreground-hint);
}

.confirm-text {
    margin: 0;
    line-height: 1.45;
}

/* Responsive list pattern: data grid on desktop, stacked items on mobile. */
.list-mobile {
    display: none;
}

@media (max-width: 767px) {
    .list-desktop {
        display: none;
    }

    /* Each record becomes its own card; drop the outer WmsCard chrome so frames don't nest. */
    .wms-card:has(.list-mobile) {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .list-mobile {
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    .m-item {
        display: flex;
        flex-direction: column;
        gap: .15rem;
        padding: .75rem .9rem .85rem;
        background: var(--neutral-layer-1);
        border: 1px solid var(--neutral-stroke-divider-rest);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }

    .m-item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        margin-bottom: .1rem;
    }

    .m-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 9px;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--accent-fill-rest);
        background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    }

    .m-title {
        font-size: .95rem;
        font-weight: 600;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .m-meta {
        font-size: .8rem;
        line-height: 1.4;
        color: var(--neutral-foreground-hint);
        overflow-wrap: anywhere;
    }
}

/* Cost summary rows (Packaging formula → Cost card). */
.cost-summary {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem 1rem;
    background: var(--neutral-fill-stealth-rest, rgba(0, 0, 0, .02));
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
}

.cost-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font-size: .9rem;
}

.cost-row-total {
    font-weight: 700;
    padding-top: .5rem;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* Item image gallery (Items → Images tab). */
.item-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .75rem;
}

.item-image-thumb {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
}

    .item-image-thumb.is-primary {
        border-color: var(--accent-fill-rest);
        border-width: 2px;
    }

    .item-image-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Non-image attachment (PDF, etc) rendered in the same thumb slot as a photo. */
.attachment-file-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 8px;
    text-align: center;
    color: var(--neutral-foreground-rest);
    font-size: .75rem;
    overflow: hidden;
    word-break: break-all;
}

.item-image-caption {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--foreground-on-accent-rest, #fff);
    background: var(--accent-fill-rest);
}

/* Fluent file picker dropzone (Items → Images). */
.image-uploader {
    display: block;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest, transparent);
    transition: border-color 120ms ease, background 120ms ease;
}

    .image-uploader:hover {
        border-color: var(--accent-fill-rest);
    }

.image-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    min-height: 90px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    font-size: .875rem;
    text-align: center;
}

    .image-dropzone strong {
        color: var(--accent-fill-rest);
    }

.item-image-actions {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    justify-content: center;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
    padding: 4px 0 2px;
}

/* =====================================================================
   Item detail — read-only master view (hero + spec grid).
   ===================================================================== */
.item-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.item-hero-media {
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .item-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .item-hero-media .item-hero-placeholder {
        color: var(--neutral-foreground-hint);
    }

.item-hero-body {
    flex: 1 1 auto;
    min-width: 0;
}

.item-hero-code {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-hint);
}

.item-hero-name {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 2px 0 0;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
}

.item-hero-alias {
    font-size: .9rem;
    color: var(--neutral-foreground-hint);
    margin-top: 3px;
}

.item-hero-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

@media (max-width: 560px) {
    .item-hero { gap: 14px; }
    .item-hero-media { width: 84px; height: 84px; }
}

/* Label/value specification grid used on read-only detail views. */
.detail-specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px 24px;
}

.detail-spec { min-width: 0; }
.detail-spec.fg-full { grid-column: 1 / -1; }

.detail-spec-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 3px;
}

.detail-spec-value {
    font-size: .92rem;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
}

    .detail-spec-value.is-empty { color: var(--neutral-foreground-hint); }

/* Text list of sub-records (units / barcodes) inside a spec entry — one readable row each. */
.detail-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 2px;
}

.detail-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
    padding-bottom: 7px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

    .detail-list-item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .detail-list-item .dt-hint { font-size: .86rem; }

/* Read-only image gallery (detail view) reuses .item-image-thumb without hover actions. */
.item-image-grid.is-readonly .item-image-thumb { cursor: default; }

/* Mobile polish for the read-only item detail view. Below 560px the auto-fill
   track (minmax 190px) only ever fits 1 column, turning short facts (Batch
   tracked: Yes) into one long undifferentiated scroll — force a real 2-column
   grid instead so short label/value pairs sit side by side; .fg-full entries
   (Description, Units, Barcodes) still span both columns via the existing rule. */
@media (max-width: 560px) {
    .item-hero-name { font-size: 1.15rem; }
    .item-image-grid.is-readonly .item-image-thumb { width: 88px; height: 88px; }
    .detail-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
}

/* Action buttons inside a data-grid row: centered, compact, never touching row borders. */
.grid-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .15rem;
    height: 100%;
}

    .grid-actions .fluent-button {
        --button-height: 28px;
        min-width: 28px;
    }

/* =====================================================================
   Custom card (lighter than FluentCard) + dashboard shortcuts
   ===================================================================== */
.wms-card {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wms-card-title {
    font-weight: 600;
    margin-bottom: .75rem;
}

.placeholder-card {
    max-width: 640px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.shortcut-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 10px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    transition: border-color .15s ease, background-color .15s ease;
}

    .shortcut-card:hover {
        border-color: var(--accent-fill-rest);
        background: color-mix(in srgb, var(--accent-fill-rest) 5%, var(--neutral-layer-1));
    }

.shortcut-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--accent-fill-rest);
    color: var(--accent-foreground-rest, #fff);
}

.shortcut-text {
    display: flex;
    flex-direction: column;
}

.shortcut-title {
    font-weight: 600;
}

.shortcut-sub {
    font-size: .82rem;
    color: var(--neutral-foreground-hint);
}

/* =====================================================================
   Login (EmptyLayout)
   ===================================================================== */
.login-wrapper {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: radial-gradient(1100px 520px at 50% -10%, color-mix(in srgb, var(--accent-fill-rest) 26%, var(--neutral-layer-2)), var(--neutral-layer-2));
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 16px;
    padding: 2.25rem 2rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.login-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto .85rem;
    display: block;
    border-radius: 16px;
    object-fit: cover;
}

.login-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.login-subtitle {
    margin: .25rem 0 0;
    color: var(--neutral-foreground-hint);
}

.login-field {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

    .login-field label {
        font-size: .82rem;
        font-weight: 600;
        margin-bottom: .3rem;
    }

.login-input {
    padding: .6rem .75rem;
    font: inherit;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

    .login-input:focus {
        outline: none;
        border-color: var(--accent-fill-rest);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill-rest) 25%, transparent);
    }

.login-remember {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .25rem 0 1.25rem;
    font-size: .9rem;
}

.login-submit {
    width: 100%;
    padding: .7rem;
    font: inherit;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--accent-foreground-rest, #fff);
    background: var(--accent-fill-rest);
    transition: filter .15s ease, transform .05s ease;
}

    .login-submit:hover {
        filter: brightness(1.07);
    }

    .login-submit:active {
        transform: translateY(1px);
    }

.login-alert {
    margin-bottom: 1rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--error, #d13438) 14%, transparent);
    color: var(--error, #d13438);
    font-size: .88rem;
}

.validation-message {
    color: var(--error, #d13438);
    font-size: .8rem;
    margin-top: .25rem;
}

.login-info {
    margin-bottom: 1rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    color: var(--neutral-foreground-rest);
    font-size: .88rem;
    line-height: 1.45;
}

.login-links {
    margin-top: 1.1rem;
    text-align: center;
    font-size: .88rem;
}

    .login-links a {
        color: var(--accent-fill-rest);
        text-decoration: none;
    }

        .login-links a:hover {
            text-decoration: underline;
        }

/* =====================================================================
   Error UI
   ===================================================================== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* =====================================================================
   Basis-style design system — page skeleton, cards, data tables.
   Ported from D:\BASIS-APP\Basis.Shared (same Fluent UI version) so list
   and form pages read as one clean, professional system.
   ===================================================================== */

/* ---- Page header extras (breadcrumb + title) ---- */
.page-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 3px;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
}

/* Compact page header on phones: smaller title, and .hide-sm lets header action
   buttons drop their text label (icon-only) so they don't wrap or overlap. */
@media (max-width: 560px) {
    .page-title { font-size: 17px; }
    .page-header h1 { font-size: 1.15rem; }
    .page-subtitle { font-size: .82rem; }
    .hide-sm { display: none !important; }
    /* Hiding the label text (.hide-sm) leaves FluentButton's own icon-to-content gap reserved,
       so an icon-only button renders as a wide pill instead of a square. Force a fixed square
       control and zero out the icon's own trailing margin/gap so it centers with no leftover
       space — covers both the light-DOM class and (if the version in use renders one) the
       custom-element/::part() form, since only one of these actually matches at runtime. */
    .page-header .dt-actions .fluent-button,
    .page-header .dt-actions fluent-button {
        width: 30px !important;
        min-width: 30px !important;
        gap: 0 !important;
    }
    .page-header .dt-actions .fluent-button::part(control),
    .page-header .dt-actions fluent-button::part(control) {
        width: 30px !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    .page-header .dt-actions .fluent-button::part(start),
    .page-header .dt-actions fluent-button::part(start),
    .page-header .dt-actions .fluent-button svg,
    .page-header .dt-actions fluent-button svg {
        margin: 0 !important;
    }
}

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 6px;
}

    .page-breadcrumb a {
        color: var(--accent-foreground-rest, var(--accent-fill-rest));
        text-decoration: none;
        font-weight: 500;
    }

    .page-breadcrumb a:hover {
        text-decoration: underline;
    }

/* ---- Card ---- */
.fluent-card {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    padding: 12px 20px;
}

.fluent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.fluent-card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.dt-record-count {
    font-size: 13px;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    margin-inline-start: 4px;
}

/* ---- Stat cards ---- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.stat-card {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 180ms ease, transform 120ms ease;
}

    .stat-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
        transform: translateY(-1px);
    }

    .stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--accent-fill-rest);
        border-radius: 8px 8px 0 0;
    }

.stat-card-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat-card-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--neutral-foreground-rest);
}

.stat-card-value.warn { color: #b25e00; }

.stat-card-sub {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ---- Dashboard "needs attention" list ---- */
.attn-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    transition: border-color .15s ease, background-color .15s ease;
}

    .attn-row:hover {
        border-color: var(--accent-fill-rest);
        background: color-mix(in srgb, var(--accent-fill-rest) 5%, var(--neutral-layer-1));
    }

.attn-count {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
}

.attn-text {
    flex: 1 1 auto;
    font-size: 14px;
}

/* ---- Dashboard trend cards (7-day sparkline) ---- */
.trend-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trend-row.single { grid-template-columns: minmax(0, 1fr); }

.trend-card {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    padding: 12px 16px;
}

.trend-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.trend-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--neutral-foreground-hint);
}

.trend-delta { font-size: 11px; font-weight: 700; white-space: nowrap; }
.trend-delta.up { color: #107c10; }
.trend-delta.down { color: var(--error, #d13438); }

.trend-value {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}

.trend-value .unit { font-size: 11px; font-weight: 400; color: var(--neutral-foreground-hint); }

svg.spark { display: block; width: 100%; height: 34px; }

@media (max-width: 767px) {
    .trend-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---- Grid + spacing utilities ---- */
/* minmax(0, 1fr) (not plain 1fr) so a track may shrink below its content's intrinsic
   width. Without it a child holding a min-width table (.dt-line) forces the column
   wider than the viewport, so the page scrolls instead of the table's own .dt-line-wrap
   showing a horizontal scrollbar. Pair with min-width:0 on the items to be sure. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > * { min-width: 0; }

@media (max-width: 767px) {
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: minmax(0, 1fr); }
}

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Page-header action row (title/subtitle left, buttons right): let it wrap on
   phones instead of the buttons overlapping the subtitle text. The title block
   may shrink (min-width:0); the button cluster keeps its size and stays right-
   aligned even after wrapping to its own line. */
.page-header .d-flex.justify-between {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

.page-header .d-flex.justify-between > :first-child {
    min-width: 0;
    flex: 1 1 220px;
}

.page-header .d-flex.justify-between > :last-child {
    flex-shrink: 0;
    margin-left: auto;
}
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

/* ---- List filters bar ---- */
.list-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: 10px;
}

/* Same fluent-select built-in min-width fix as .form-grid (see below) */
.list-filters fluent-select,
.list-filters fluent-combobox,
.list-filters fluent-text-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

/* =====================================================================
   Data table system (.dt) — clean HTML table, mobile → stacked cards.
   ===================================================================== */
.dt-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-stroke-rest) transparent;
}

.dt {
    font-size: .875rem;
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    min-width: 720px;
}

.dt thead th {
    padding: 8px 10px;
    text-align: start;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-2, var(--neutral-layer-1));
    border-bottom: 1px solid var(--neutral-stroke-rest);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

    .dt thead th.dt-end { text-align: end; }

.dt-sortable {
    cursor: pointer;
    transition: background 80ms ease, color 80ms ease;
}

    .dt-sortable:hover {
        background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, .04));
        color: var(--neutral-foreground-rest);
    }

/* Sort-icon side follows the column's own alignment: left/center headers keep the icon trailing
   the label (unchanged); a right-aligned (numeric) header instead pins the icon to the LEFT edge
   of the cell via absolute positioning, so the label text — still a plain inline text node,
   text-align:end as before — hugs the right edge on its own. display:flex was tried here first and
   REJECTED: setting display:flex on a <th> replaces its table-cell display entirely, so it stops
   participating in the table's column layout and the whole header row collapses/wraps instead of
   staying a normal grid of columns. Absolute positioning leaves display: table-cell (the <th>
   default) untouched — only the icon leaves the flow, nothing about the cell's own layout mode
   changes. */
.dt thead th.dt-sortable {
    position: relative;
}

.dt thead th.dt-sortable.dt-end .dt-sort-icon {
    position: absolute;
    inset-inline-start: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin-inline-start: 8px;
}

.dt-sort-icon {
    display: inline-block;
    margin-inline-start: 4px;
    font-size: 12px;
    opacity: 0.35;
    line-height: 1;
}

.dt-sortable.dt-sorted .dt-sort-icon {
    opacity: 1;
    color: var(--accent-fill-rest);
}

.dt tbody tr {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background 60ms ease;
}

    .dt tbody tr:last-child { border-bottom: none; }
    .dt tbody tr:hover { background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, .03)); }

.dt tbody td {
    padding: 7px 10px;
    vertical-align: middle;
    white-space: nowrap;
}

    .dt tbody td.dt-end { text-align: end; }

    .dt tbody td.dt-wrap-text {
        white-space: normal;
        word-break: break-word;
        min-width: 120px;
        max-width: 320px;
    }

/* Totals row (report pages). tbody td owns the only padding rule in this table — a tfoot with
   none of its own renders its text flush against the cell edge, which visibly does not line up
   under thead/tbody's padded columns even though the cells share the same boundaries. Match the
   padding so it lines up, and add a top border to set the summary row apart from the data above. */
.dt tfoot td {
    padding: 10px;
    font-weight: 700;
    border-top: 1px solid var(--neutral-stroke-rest);
}

    .dt tfoot td.dt-end { text-align: end; }

/* Grouped report rows (e.g. Sales Detail): a document "header" row (shaded, bold, carries the
   document's own totals) sits above its indented item-line rows — same column grid throughout,
   just different cells populated per row, no colspan. */
.dt-group-row td {
    background: var(--neutral-layer-2, var(--neutral-layer-1));
    border-top: 2px solid var(--neutral-stroke-rest);
    font-weight: 600;
}

.dt-detail-row td {
    font-size: .92em;
}

.dt-detail-row td:first-child {
    padding-inline-start: 20px;
}

.dt-mono { /* letter-spacing: -0.03em; */ }
.dt-hint { color: var(--neutral-foreground-hint); }

.dt-link {
    color: var(--accent-fill-rest);
    text-decoration: none;
    cursor: pointer;
}

    .dt-link:hover { text-decoration: underline; }

.dt-actions {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    align-items: center;
}

    .dt-actions .fluent-button { --button-height: 28px; min-width: 28px; }

/* Right-side slide-out panels (Stock/Customer Lookup, Notifications) get a lighter, smaller
   header than Fluent's centered-modal default (24px/weight 400, 24px bottom padding) — a
   slide-out doesn't carry the same visual weight as a full dialog. Scoped to fluent-dialog.right
   only, so centered confirm/edit dialogs keep their normal header. */
fluent-dialog.right .fluent-dialog-header {
    padding-bottom: 14px !important;
}

/* This title is always rendered as an <h4> by FluentUI's own DialogParameters.Title — there's
   no TitleTemplate/tag override in its public API, so it can't be swapped for a real <h2>.
   Size/weight it like one instead (h2-ish, ~20px/600) so it balances against the 20px close
   button, rather than the library's h4-but-24px/weight-400 default.
   !important: Fluent's own component styling (likely a ::slotted() rule inside fluent-dialog's
   shadow root, invisible to document.styleSheets) otherwise wins over an equal/higher-specificity
   light-DOM rule here — same class of problem as the ::part() overrides above. */
fluent-dialog.right .fluent-dialog-header h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* A long title (e.g. an attachment's original filename) otherwise runs straight into the close
   button — FluentUI wraps the title in its own div with an inline style="width:100%" (not
   reachable through any Blazor parameter), which claims the whole header row and leaves the
   close button no space to sit in. Applies to every fluent-dialog, not just .right — the same
   layout bug hits a centered dialog just as easily (e.g. AttachmentPreviewDialog on a narrow
   screen). !important on the wrapper only: nothing but !important beats an inline style. */
.fluent-dialog-header > div:first-child {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
}

.fluent-dialog-header h4 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fluent-dialog-header fluent-button {
    flex-shrink: 0;
}

/* Shared shell for header slide-out "lookup" panels (Stock Lookup, Customer Lookup, …):
   search stays put; the results (however many rows) scroll in the remaining panel height
   instead of pushing the search field off-screen or growing the panel past the viewport.
   min-height:0 on the scroll child is required for a flex child to actually shrink and
   scroll rather than overflow its flex parent. No padding here — fluent-dialog's own
   .control part already applies 24px on every side; adding more here was doubling the
   inset (44px combined) and needlessly narrowing the usable content width. */
.lookup-panel-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.lookup-panel-search {
    flex-shrink: 0;
}

.lookup-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 12px;
}

/* Lookup panels: always phone-style cards, never the desktop .dt table — the panel itself
   is always phone-width (min(480px, 100vw)), so there's no wider layout to switch to. Tapping
   a card expands it in place to show extra detail (no menu on these panels, so whole-card-click
   is unambiguous here, unlike the app-wide dt-card convention). */
.lookup-panel-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lookup-panel-card {
    cursor: pointer;
    transition: border-color .15s ease;
}

    .lookup-panel-card:hover,
    .lookup-panel-card.is-expanded {
        border-color: var(--accent-fill-rest);
    }

    .lookup-panel-card .dt-card-header svg {
        color: var(--neutral-foreground-hint);
        flex-shrink: 0;
        margin-top: 2px;
    }

/* ---- Mobile: table → stacked cards at <768px ---- */
.dt-mobile { display: none; }

@media (max-width: 767px) {
    .dt-wrap { display: none; }
    .dt-mobile { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
    /* Line tables opting into the card treatment (read-only document views) */
    .dt-line-wrap.dt-line-desktop { display: none; }
}

/* ---- WmsPager: desktop bar (numbered pages + page-size) / mobile prev-next strip.
   Same <768px switch as the table above — .dt-pager-desktop and .dt-pager-mobile were
   rendering unstyled and simultaneously (no rules existed for either class at all) until
   this block. */
.dt-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: .85rem;
}

.dt-pager-mobile { display: none; }

.dt-pager-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .dt-pager-btn:hover:not(:disabled) {
        background: var(--neutral-layer-2);
        border-color: var(--neutral-foreground-hint);
    }

    .dt-pager-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .dt-pager-btn.dt-pager-active {
        background: var(--accent-fill-rest);
        border-color: var(--accent-fill-rest);
        color: var(--accent-foreground-rest, #fff);
        font-weight: 600;
    }

.dt-pager-info {
    margin: 0 4px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.dt-pager-size {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--neutral-foreground-hint);
}

    .dt-pager-size select {
        height: 30px;
        border: 1px solid var(--neutral-stroke-rest);
        border-radius: 6px;
        background: var(--neutral-layer-1);
        color: var(--neutral-foreground-rest);
        font-size: .85rem;
        padding: 0 6px;
    }

@media (max-width: 767px) {
    .dt-pager-desktop { display: none; }

    .dt-pager-mobile {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

        .dt-pager-mobile .dt-pager-btn {
            min-width: 76px;
        }
}

.dt-card {
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    padding: 11px 13px;
    background: var(--neutral-layer-1);
}

.dt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

.dt-card-title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dt-card-meta {
    font-size: .8rem;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* ---- Sticky save footer for forms ---- */
.save-footer {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, .08);
}

.save-footer-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--neutral-foreground-hint);
    min-width: 0;
    flex: 1;
}

/* Button cluster on the right: always a flex row with a gap so Save/Cancel don't touch. */
.save-footer > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 479px) {
    .save-footer { flex-direction: column; align-items: stretch; }
    .save-footer > div:last-child fluent-button { flex: 1; }
}

/* Compact, evenly-spaced action buttons inside table rows. */
.dt-actions fluent-button::part(control),
.grid-actions fluent-button::part(control) {
    height: 30px;
    min-width: 30px;
    padding: 0 6px;
}

/* ---- Status pill (list badges) ---- */
.dt-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.dt-pill-accent {
    color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

.dt-pill-neutral {
    color: var(--neutral-foreground-hint);
    background: color-mix(in srgb, var(--neutral-foreground-hint) 12%, transparent);
}

.dt-pill-warning {
    color: #b25e00;
    background: color-mix(in srgb, #e08700 14%, transparent);
}

.dt-pill-danger {
    color: var(--error, #d13438);
    background: color-mix(in srgb, var(--error, #d13438) 12%, transparent);
}

/* =====================================================================
   Form line-item table (.dt-line) + section headers + empty states.
   Used inside form cards for editable child collections (BOM materials,
   item units/barcodes, etc.).
   ===================================================================== */
.dt-line-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-stroke-rest) transparent;
}

.dt-line {
    font-size: .875rem;
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    min-width: 480px;
}

.dt-line thead th {
    padding: 8px 10px;
    text-align: start;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--neutral-foreground-hint);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

    .dt-line thead th.dt-end { text-align: end; }

.dt-line-row {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background 60ms ease;
}

    .dt-line-row:last-child { border-bottom: none; }
    .dt-line-row:hover { background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, .03)); }

    .dt-line-row td {
        padding: 7px 10px;
        vertical-align: middle;
        white-space: nowrap;
    }

.dt-line-name { font-weight: 500; }
.dt-bold { font-weight: 600; }

/* dt-line column helpers */
.col-num { width: 28px; color: var(--neutral-foreground-hint); font-size: .75rem; }
.col-code { width: 72px; }
.col-item { min-width: 160px; }
.col-num-r { min-width: 80px; text-align: end; }
.col-actions { width: 90px; white-space: nowrap; text-align: end; }

/* Right-align numeric column HEADERS to match their right-aligned cells.
   Needed because `.dt thead th` / `.dt-line thead th` (text-align:start) out-specifies
   the plain `.col-num-r` class, leaving headers left while values are right. */
.dt thead th.col-num-r,
.dt thead th.dt-end,
.dt-line thead th.col-num-r,
.dt-line thead th.col-actions,
.dt-line thead th.dt-end { text-align: end; }

/* =====================================================================
   Row/line card standard: identity + overflow menu header, then
   label/value rows with hairline dividers. Used inside .dt-card (mobile
   list rows) and as the mobile fallback for .dt-line (editable/read-only
   line items). A row for a field that doesn't apply just isn't rendered
   — never left blank — so nothing misaligns between cards.
   ===================================================================== */
.dt-card-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt-card-lineno { font-size: .68rem; color: var(--neutral-foreground-hint); }
.dt-card-code { font-size: .72rem; }

.dt-card-menu { position: relative; flex-shrink: 0; }
.dt-card-menu summary {
    list-style: none;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer;
    color: var(--neutral-foreground-hint); font-size: 1.1rem; font-weight: 700;
}
    .dt-card-menu summary::-webkit-details-marker { display: none; }
    .dt-card-menu summary:hover { background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, .04)); color: var(--neutral-foreground-rest); }
.dt-card-menu[open] summary { background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent); color: var(--accent-fill-rest); }
.dt-card-menu-list {
    position: absolute; right: 0; top: 34px; z-index: 20; min-width: 130px;
    background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-divider-rest); border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
    padding: 4px; display: flex; flex-direction: column; gap: 1px;
}
    .dt-card-menu-list button {
        all: unset; padding: 7px 10px; font-size: .82rem; border-radius: 5px; cursor: pointer;
        color: var(--neutral-foreground-rest);
    }
    .dt-card-menu-list button:hover { background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent); color: var(--accent-fill-rest); }
    .dt-card-menu-list button.danger:hover { background: color-mix(in srgb, var(--error, #d13438) 12%, transparent); color: var(--error, #d13438); }

.dt-card-div { border-top: 1px solid var(--neutral-stroke-divider-rest); margin: 9px 0 8px; }

.dt-rows .dt-row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 5px 0; font-size: .83rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}
    .dt-rows .dt-row:last-child { border-bottom: none; }
    .dt-rows .dt-row .k { color: var(--neutral-foreground-hint); }
    .dt-rows .dt-row .v { font-weight: 600; text-align: right; }
    .dt-rows .dt-row.hero .v { color: var(--accent-fill-rest); }

/* Label-above-value variant for long/multi-line text (address, notes, free-text reasons) —
   the default .dt-row squeezes wrapped text into the right half of a flex row, which reads
   badly past ~2 lines; .wide stacks label then value, full width, left-aligned. */
.dt-rows .dt-row.wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
    .dt-rows .dt-row.wide .v { text-align: left; font-weight: 500; overflow-wrap: anywhere; }

/* Inline section header (title + count + hint on the left, action on the right) */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.section-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.section-hint {
    color: var(--neutral-foreground-hint);
    font-size: .85rem;
}

/* Mobile: the title + hint sit inline on desktop, but on a phone that squeezes the
   hint into a cramped sliver next to the title. Stack them (title over full-width
   hint) and keep any right-side action pinned to the top row beside the title.
   Breakpoint matches the table→card collapse (<768px) so the whole card reads as
   mobile consistently. */
@media (max-width: 767px) {
    .section-head {
        align-items: flex-start;
        gap: 8px 10px;
    }

    .section-head-left {
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .section-hint {
        font-size: .8rem;
        line-height: 1.35;
    }
}

/* Dashed empty-state box inside a form card */
.dt-empty {
    text-align: center;
    padding: 28px;
    color: var(--neutral-foreground-hint);
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 6px;
}

/* Form card gets roomier padding than list cards */
.form-card { padding: 20px 24px; }

/* ============================================================
   form-grid — document-header layout. Every column is guaranteed at
   least 240px (so a field is never squeezed too narrow to read) and
   auto-fit drops the column count 4→3→2→1 fluidly as the card narrows
   — no hand-picked breakpoints, so no per-field ordering to get right.
   .fg-full spans whatever the current column count is.
   ============================================================ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 16px;
    max-width: 1200px;
}

.form-grid > div { min-width: 0; }
.form-grid .fg-full { grid-column: 1 / -1; }
/* .fg-wide is intentionally NOT given a grid-column span here. It looks like it should mean
   "span 2 columns" (and briefly did — see git history), but every one of the ~30 forms using it
   across the app was built and visually tuned around it being a plain 1-column field; making it
   actually span 2 broke field grouping across all of them. Company Profile's Identity card (the
   one place that actually wanted a 2-column-wide field) now has its own dedicated
   .company-identity-fields grid instead of relying on this class — see below. */

/* Keep every field flush with its column. fluent-select (and friends) ship a
   built-in min-width (~250px) that stops them shrinking with the grid cell and
   makes controls overlap on small screens — zero it out inside the grid. */
.form-grid fluent-text-field,
.form-grid fluent-number-field,
.form-grid fluent-select,
.form-grid fluent-combobox,
.form-grid fluent-search,
.form-grid .fluent-datepicker,
.form-grid fluent-text-area {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.form-grid fluent-select::part(control),
.form-grid fluent-combobox::part(control) {
    min-width: 0;
    width: 100%;
}

/* 2-column variant for narrow containers (modal dialogs) */
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* .fg-spacer's job is reserving one blank cell at a specific spot in the full
   4-column desktop row; once auto-fit has already dropped to fewer columns
   there's no fixed "4th slot" left for it to reserve, so it would just land
   wherever the flow happens to put it and could reopen a mid-row gap. Simplest
   correct behavior: only show spacers at the width where 4 columns actually
   fit (matches the grid's own auto-fit math: 4 × 240px + 3 × 16px gap ≈ 1000px). */
@media (max-width: 999px) {
    .form-grid > .fg-spacer { display: none; }
}

/* Dialogs: never let a fluent field's built-in min-width push past the dialog edge */
fluent-dialog fluent-select,
fluent-dialog fluent-combobox,
fluent-dialog fluent-search,
fluent-dialog fluent-text-field,
fluent-dialog fluent-number-field,
fluent-dialog fluent-text-area {
    min-width: 0 !important;
    max-width: 100%;
}

/* Uniform label-to-input spacing in dialog forms. Fluent inputs render their label
   as a SEPARATE sibling node, so inside a vertical FluentStack the stack gap lands
   between a label and its own control. Zero the flex gap and rebuild spacing with
   margins: 4px label→control, 14px between field groups. */
fluent-dialog .stack-vertical {
    gap: 0 !important;
}

fluent-dialog .stack-vertical > * {
    margin-bottom: 14px;
}

fluent-dialog .stack-vertical > label.fluent-input-label {
    margin-bottom: 4px;
}

fluent-dialog .stack-vertical > *:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Single-image upload row — company logo, customer ID document, …
   ============================================================ */
.img-upload-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.img-upload-preview {
    width: 140px;
    height: 140px;
    border: 1px solid var(--wms-border, #d9dbe0);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 10px;
    flex: 0 0 auto;
}

.img-upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Company profile — Identity card: logo left, field grid right (logo + fields as one unit,
   not two separate cards). */
.company-identity {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.company-identity-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    text-align: center;
    max-width: 140px;
}

/* Own small grid rather than reusing .form-grid's auto-fit/spacer system — that system's
   breakpoints assume the grid owns the full page width, which breaks once it's a flex sibling
   of the logo. Two fixed columns, no dead spacer cell to hide: NPWP/Phone pair up, everything
   else (name, email, address) just takes the full row. */
.company-identity-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.company-identity-fields .ci-full { grid-column: 1 / -1; }

@media (max-width: 560px) {
    .company-identity { flex-direction: column; align-items: stretch; }
    /* .company-identity-logo now stretches to the full card width (align-items:stretch above) —
       justify-content centers the row within that width instead of it hugging the left edge. */
    .company-identity-logo { flex-direction: row; justify-content: center; max-width: none; }
    .company-identity-fields { grid-template-columns: 1fr; }
}

/* Single-image slots (company logo, …) where the frame itself is the click target — no
   separate dropzone panel needed since only one image is ever allowed. The clicking label wraps
   only the image; the bottom overlay bar is a sibling (not nested in the label) so the Remove
   button living in that bar doesn't also trigger the label's "open file picker" default action. */
.img-upload-preview-clickable {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.img-upload-preview-clickable > label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
}

.img-upload-preview-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 2px 2px 8px;
    font-size: .68rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

.img-upload-preview-change {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: inherit;
}

/* Compact icon-only Remove button riding in the same slim overlay bar as "Change". */
.img-upload-preview-overlay fluent-button::part(control) {
    height: 22px;
    min-width: 22px;
    padding: 0 4px;
    color: #fff;
}

/* FluentInputFile's own scoped CSS puts a dashed border + hover background on its wrapping
   .fluent-inputfile-container — appropriate for the drag/drop galleries (item images, customer ID
   doc) but redundant/double-boxed around a click-to-upload frame that already draws its own
   border. Scoped to the company logo slot only, via !important since the library's rule carries
   a scope-hash attribute selector this can't out-specificity otherwise. */
.company-identity-logo .fluent-inputfile-container {
    background-color: transparent !important;
    border: none !important;
}

.img-upload-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px;
    flex: 1 1 260px;
}

/* ============================================================
   Printable documents (surat jalan, receipts, invoices)
   A screen preview that looks like paper, and clean print output.
   Forces light document colors regardless of the app theme.
   ============================================================ */
/* Embedded document preview: sticky action bar + a scrollable canvas that holds the
   "paper" sheet, all inside the normal app content (not a full-page takeover). */
.doc-toolbar {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 48px;                 /* match .sidebar-header height */
    padding: 0 16px;
    background: var(--neutral-layer-1, #fff);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e2e4e9);
}

.doc-toolbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.doc-toolbar-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-toolbar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.doc-preview-wrap {
    padding: 24px 16px;
    overflow: auto;
    background: #e9ebef;
}

@media (prefers-color-scheme: dark) {
    .doc-preview-wrap { background: #26282c; }
}
:root[data-theme="dark"] .doc-preview-wrap { background: #26282c; }
:root[data-theme="light"] .doc-preview-wrap { background: #e9ebef; }

/* Preview pages: let the canvas fill the content area (drop the inner page padding). */
.app-content-inner:has(.doc-preview-wrap) { padding: 0; }

/* The sheet is a FIXED A4 page — it never reflows or scales down. It stays centered
   (margin auto); on screens narrower than the page the canvas simply scrolls, so the
   paper is always true A4 (matches Basis's fixed 794px document iframe). */
.print-sheet {
    background: #fff;
    color: #1a1c20;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 18mm 16mm;
    box-sizing: border-box;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .18);
    font-size: 12px;
    line-height: 1.45;
}

/* Wide/many-column reports opt into landscape instead of being squeezed into portrait — paired with
   the "landscape-page" named @page rule below (screen preview only; print sizing is reset under
   @media print same as .print-sheet, then re-widened via the page: landscape-page assignment). */
.print-sheet-landscape {
    width: 297mm;
    min-height: 210mm;
}

/* Letterhead */
.print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 2px solid #1a1c20;
    padding-bottom: 12px;
}

.print-head-brand { display: flex; gap: 14px; align-items: flex-start; }
.print-logo { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.print-company-name { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.print-company-line { font-size: 11px; color: #3a3d43; }
.print-company-address { white-space: pre-line; }
.print-head-right { flex: 0 0 auto; text-align: right; }
.print-doctitle {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* Document meta (No./date/ref) sitting directly under the title, right side */
.print-headmeta {
    display: inline-block;
    margin-top: 8px;
    min-width: 230px;
    text-align: left;
}
.print-headmeta-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 11px;
    margin-bottom: 2px;
}
.print-headmeta-label { color: #55585f; }
.print-headmeta-value { font-weight: 600; }

.print-void {
    margin-top: 10px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .2em;
    color: #b42318;
    border: 2px solid #b42318;
    padding: 4px;
}

/* Parties: ship-to (left) + source warehouse (right) */
.print-parties {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 18px;
}

.print-party-block { flex: 1 1 0; min-width: 0; }
.print-party-right { text-align: right; }
.print-party-label {
    font-size: 11px;
    color: #55585f;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 2px;
}
.print-party-name { font-weight: 700; font-size: 13px; }
.print-party-line { font-size: 11px; color: #3a3d43; }

/* Line table */
.print-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.print-table th,
.print-table td {
    border: 1px solid #c2c3c5;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.print-table thead th {
    background: #f0f1f4;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.print-table tfoot td {
    font-weight: 700;
    background: #f7f8fa;
}

/* Grouped/register-style report tables (e.g. Sales Detail): a document "header" row per group,
   many of whose columns are intentionally blank (filled only on its item-line rows below, or
   vice versa). The default .print-table gives every th/td a full box border — fine for a normal
   line-item table, but on a table with lots of blank cells it reads as a grid full of empty boxes.
   .print-table-plain drops the per-cell box grid in favor of row-separator lines only (matches a
   classic register/ledger report look), same idea as the app's screen-side .dt table which never
   had per-cell borders to begin with. Opt in with class="print-table print-table-plain". */
.print-table-plain th,
.print-table-plain td {
    border: none;
    border-bottom: 1px solid #d7d9e0;
}

.print-table-plain thead th {
    border-bottom: 1.5px solid #c2c3c5;
}

.print-table-plain tfoot td {
    border: none;
    border-top: 2px solid #1a1c20;
}

.print-table .pt-group-row td {
    background: #eef0f4;
    font-weight: 700;
    border-top: 1.5px solid #1a1c20;
}

.print-table .pt-detail-row td:first-child {
    padding-inline-start: 16px;
}

/* Numbers/codes/dates should never wrap onto a second line inside their narrow column —
   only free-text columns (item name, etc, left at the browser default) wrap. */
.print-table .pt-num { width: 36px; text-align: center; white-space: nowrap; }
.print-table .pt-code { width: 90px; white-space: nowrap; }
.print-table .pt-qty { width: 80px; text-align: right; white-space: nowrap; }
.print-table .pt-unit { width: 70px; white-space: nowrap; }
.print-table .pt-total-label { text-align: right; }

.print-notes {
    margin-top: 12px;
    font-size: 11px;
}

.print-notes-label { font-weight: 700; }

/* Signatures */
.print-signs {
    display: flex;
    gap: 30px;
    margin-top: 34px;
}

.print-sign { flex: 1 1 0; text-align: center; }
.print-sign-role { font-size: 11px; color: #3a3d43; }
.print-sign-space { height: 60px; }
.print-sign-name { border-top: 1px solid #c2c3c5; padding-top: 4px; font-size: 11px; }

@media print {
    /* Print only the document sheet — hide all app chrome + the preview toolbar. Report pages
       (Stock Mutation / Sales / Inventory Valuation) and Stock Card reuse this same mechanism via
       dedicated /print routes + DocumentPrintShell, exactly like every other document type — there
       is no separate "aggregate report" print path to account for here. */
    .app-header,
    .app-sidebar,
    .app-footer,
    .mobile-overlay,
    .doc-toolbar { display: none !important; }

    .app-body-row { display: block !important; }
    .app-content,
    .app-content-inner {
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body,
    .doc-preview-wrap,
    .print-sheet { background: #fff !important; }
    .doc-preview-wrap {
        padding: 0 !important;
        overflow: visible !important;
    }

    .print-sheet {
        width: auto;
        margin: 0;
        padding: 0;
        box-shadow: none;
        min-height: 0;
        font-size: 11pt;
    }
    .print-table thead { display: table-header-group; }
    .print-table tr { page-break-inside: avoid; }

    /* Assigns the landscape named page (below) to this sheet instead of the default portrait @page. */
    .print-sheet-landscape { page: landscape-page; }
}

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

@page landscape-page {
    size: A4 landscape;
    margin: 14mm;
}