/* On-screen preview of the fiscal receipt (#fiscal-modal), SCREEN ONLY. Owner report 2026-09-27:
   the preview showed three lines of the receipt in a tiny scroll box above a QR code that filled the
   whole window. The frozen markup gives the QR image an inline width:100% of the modal, and the
   receipt text is the flex:1 box that shrinks to whatever the QR leaves over.

   On screen now: the receipt looks like the receipt (the accredited samples): a 40-character column
   centred in the window, the QR centred under the text in the same proportion as on paper, the
   whole strip scrolling as one sheet, with the title and the buttons staying in view. Printing is
   untouched: every rule here sits inside @media screen, and the frozen @media print block of
   index.html still decides the paper.

   Kept in its own file, loaded in <head> after css/receipt-ad.css (css/kasir.css stays the last
   element there), so the four frozen blocks of index.html stay byte-identical: two-id selectors with
   !important outrank the frozen one-class rules and the inline style attributes of the frozen markup.
   Nothing on the receipt itself changes (text, QR data, order of the parts). Listed in
   docs/superpowers/specs/receipt-changes-v2.md. */
@media screen {
  /* One scroll for the whole receipt instead of a squeezed text box. */
  #fiscal-modal .receipt-modal { overflow-y: auto; overscroll-behavior: contain; }
  #fiscal-modal .receipt-modal > * { flex-shrink: 0; }
  #fiscal-modal .receipt-header {
    position: sticky; top: 0; z-index: 2;
    background: inherit; border-radius: 16px 16px 0 0;
  }

  /* The paper strip in the receipt's own format (the accredited samples, akreditasi-1599-contoh-struk):
     a column exactly 40 characters of the receipt font wide, centred in the window, the fiscal text,
     the QR block and the closing line one sheet. Every part of the strip uses the receipt font at
     13px, so 40ch is the same width in each of them. */
  #fiscal-modal #receipt-text-content,
  #fiscal-modal #receipt-extras,
  #fiscal-modal #receipt-text-closing {
    box-sizing: content-box !important;
    width: 40ch !important;
    max-width: calc(100% - 82px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-family: 'Courier New', Consolas, 'DejaVu Sans Mono', 'Liberation Mono', Courier, monospace;
    font-size: 13px;
    background: #ffffff !important;
    box-shadow: none !important;
    border-left: 1px solid #d6dce5;
    border-right: 1px solid #d6dce5;
  }
  #fiscal-modal #receipt-text-content,
  #fiscal-modal #receipt-text-closing {
    flex: none !important;
    overflow-y: visible !important;
  }
  #fiscal-modal #receipt-text-content { margin-bottom: 0 !important; border-top: 1px solid #d6dce5; border-radius: 4px 4px 0 0 !important; padding-bottom: 8px !important; }
  #fiscal-modal #receipt-extras { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  #fiscal-modal #receipt-text-closing { margin-top: 0 !important; border-bottom: 1px solid #d6dce5; border-radius: 0 0 4px 4px !important; padding-top: 8px !important; }
  /* The advertisement field stays below the sheet in its own smaller font (css/receipt-ad.css), on
     the same column: 40 characters of 13px Courier New (0.6em each) = 312px. */
  #fiscal-modal #receipt-ad-text { box-sizing: content-box; width: 312px; max-width: calc(100% - 82px); margin: 0 auto 16px !important; padding-left: 24px !important; padding-right: 24px !important; }

  /* The QR in the same proportion to the text column as on paper: the printed QR is 50 mm (the
     maximum of Pravilnik čl. 10, 2.25.5) on a 40-character column of about 57 mm, so on screen it
     is 35 of the 40 characters wide (87.5%), centred under the text - not the width of the window,
     and not millimetres of a screen whose text is larger than the paper's. */
  #fiscal-modal #receipt-qr { margin: 8px auto !important; }
  #fiscal-modal #receipt-qr-img {
    width: 35ch !important; height: auto !important;
    max-width: 100% !important; margin: 0 auto !important;
  }

  /* The buttons stay in view, in the design system's fixed colours (the fiscal modals never read
     the theme tokens): printing is the one primary action, the console print and closing are quiet. */
  #fiscal-modal .receipt-footer {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; gap: 8px; padding: 12px 16px;
    background: inherit; border-top: 1px solid #d6dce5; border-radius: 0 0 16px 16px;
  }
  #fiscal-modal .receipt-footer .btn {
    min-height: 44px; border-radius: 6px; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: #ffffff !important; color: #0b2146 !important; border: 1px solid #7b879c !important;
    box-shadow: none !important;
  }
  #fiscal-modal .receipt-footer .btn[onclick="printFiscalReceipt()"] {
    background: #0b2146 !important; color: #ffffff !important; border-color: #0b2146 !important;
  }
  #fiscal-modal .receipt-footer .btn.btn-ghost { border-color: transparent !important; }
  #fiscal-modal .receipt-footer .btn:focus-visible { outline: 2px solid #1f5fd0; outline-offset: 2px; }
}