/* Preview page (Preview.razor) — the PDF viewer used by both the barcode/label preview and the
   sale invoice preview. These rules previously lived in Barcode.css; they are all specific to
   this page.

   The top band borrows the master pages' toolbar card (.top-btns-container in SaleAccount.css)
   and the bottom island borrows the invoice pages' floating footer (.welcome-footer-invoice in
   CreateSaleInvoice.css), so the preview reads as part of the same app rather than a bare strip
   of controls over grey. */


/*=============================== Header ===================================*/

/* Same card as .top-btns-container: white, hairline border, 12px radius, soft shadow, inset from
   both edges. Sits at 2.6rem, clearing MainLayout2's top bar exactly as .invoice-container does —
   <HeaderUser /> shares that 2.5rem strip rather than taking a band of its own. Fixed, so the PDF
   scrolls under it instead of pushing it away. */
.preview-header1 {
    position: fixed;
    top: 2.6rem;
    left: 1rem;
    right: 1rem;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.05);
}

.preview-column1,
.preview-column1 button {
    height: 40px;
}

/* Icon-only actions in the invoice preview's top band. .filter-btn / .filter-reset-all-btn are
   34px circles, but the rule above forces 40px of height — matching the width keeps them round
   instead of oval. */
.preview-icon-btn {
    width: 40px;
}


/*=============================== Viewer ===================================*/

/* Starts level with the header card rather than below it, so the grey runs behind the card and
   both floating cards read as sitting on the viewer. Everything below MainLayout2's top bar is
   grey; the card is inset 1rem, so the grey frames it on all sides. */
#pdfViewport {
    position: fixed;
    top: 2.6rem;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    background: #808080;
}

#pdfContainer {
    width: 100%;
    text-align: center;
    /* The scroll content, not the viewport, is what clears the two cards — that is what lets the
       grey extend behind them. Top is the header's own height (40px of content + 20px padding +
       2px border) plus a 12px gap; bottom is the footer island's, in the same way
       .invoice-container reserves room for .welcome-footer-invoice. */
    padding-top: 74px;
    padding-bottom: 4.5rem;
}

#pdfContainer canvas {
    display: block;
    margin: 10px auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}


/*=============================== Footer ===================================*/

/* Two elements rather than one: the outer bar spans the full width and centres the card, while
   the card itself carries the .welcome-footer-invoice look (white, 10px radius, 12px shadow,
   pinned 10px off the bottom).

   The bar is what makes the centring safe. Pinning a shrink-to-fit island at left:50% — which is
   how the invoice footer does it, with an explicit 500px width — leaves the flex line only half
   the page to lay out in, and once there are enough buttons the items collapse to their
   min-content width; that is what broke "1 / 1" onto three lines. Centring inside a full-width
   bar gives the card the whole page to measure against. The bar is click-through so the empty
   space either side doesn't swallow events meant for the PDF underneath. */
.welcome-footer-preview {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.welcome-footer-preview-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background-color: white;
    padding: 10px 30px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    pointer-events: auto;
}

.welcome-footer-preview-card span {
    font-size: 17px;
    font-weight: bold;
    /* Belt and braces against the collapse described above: this span can never be squeezed,
       whatever width the card ends up with. */
    white-space: nowrap;
    flex-shrink: 0;
}

/* app.css gives .btn-primary width:100%, which is right for a form but not for an icon in a row.
   Sized to its content instead — these are square icon buttons like the header's. Note this must
   be width, not flex-shrink: leaving the 100% in place and letting flex shrink it back down makes
   every button's width depend on how many other buttons are in the card. */
.welcome-footer-preview-card button {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
    font-weight: bold;
}

.preview-next-btn-icon,
.preview-back-btn-icon {
    height: 23px;
    width: 23px;
    fill: white;
}


/*=============================== Narrow screens ===================================*/

/* MainLayout2's top bar wraps to two lines / 4.5rem below 700px, so everything pinned under it
   drops by the same 2rem — matching what EditorWindow.css does for the editor's own chrome. */
@media (max-width: 700px) {
    .preview-header1 {
        top: 4.6rem;
    }

    #pdfViewport {
        top: 4.6rem;
    }

    .welcome-footer-preview-card {
        gap: 10px;
        padding: 10px 14px;
    }
}