/* ================================================================
   INVOICE / RECEIPT DOCUMENT
   The one page billing document rendered by
   application/resources/views/pages/bill/components/elements/receipt-document.blade.php
   ---------------------------------------------------------------
   Brand colours and every font size are tokens on :root. The print
   block at the bottom re-declares ONLY the size tokens in pt, so the
   printed page is the same design at paper-appropriate sizes.
   ================================================================ */

:root {
    /* brand */
    --zq-receipt-dark: #2f4212;
    --zq-receipt-accent: #c9971a;
    --zq-receipt-ink: #1d1d1d;
    --zq-receipt-muted: #6d6d6d;
    --zq-receipt-row: #d9d9d9;
    --zq-receipt-rule: #cfcfcf;

    /* type scale - screen */
    --zq-fs-base: 15px;
    --zq-fs-small: 12px;
    --zq-fs-title: 44px;
    --zq-fs-company: 23px;
    --zq-fs-band: 17px;
    --zq-fs-tablehead: 15px;
    --zq-fs-total: 19px;
}

.zq-receipt-card {
    padding: 34px 38px 26px 38px;
}

.zq-receipt {
    color: var(--zq-receipt-ink);
    font-size: var(--zq-fs-base);
    line-height: 1.5;
}

/* ---------- header: brand + document type ---------- */

.zq-receipt-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
}

.zq-receipt-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.zq-receipt-logo {
    max-width: 230px;
    max-height: 92px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.zq-receipt-company {
    margin-top: 6px;
    font-size: var(--zq-fs-company);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--zq-receipt-dark);
}

.zq-receipt-type {
    text-align: right;
    flex-shrink: 0;
}

.zq-receipt-type-band {
    background: var(--zq-receipt-dark);
    padding: 20px 34px;
    min-width: 250px;
}

.zq-receipt-type-text {
    color: #ffffff;
    font-size: var(--zq-fs-title);
    line-height: 1;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.zq-receipt-registration {
    margin-top: 6px;
    font-size: var(--zq-fs-small);
    color: var(--zq-receipt-muted);
}

/* Status badge - screen only, never part of the printed document. */
.zq-receipt-status {
    margin-top: 8px;
    text-transform: uppercase;
}

/* ---------- company contact + references ---------- */

.zq-receipt-meta {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 26px;
}

.zq-receipt-contact-line {
    font-weight: 600;
    color: var(--zq-receipt-dark);
    margin-bottom: 5px;
}

.zq-receipt-refs {
    text-align: right;
    flex-shrink: 0;
}

.zq-receipt-ref-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zq-receipt-ref-value {
    margin-bottom: 7px;
}

/* ---------- billed to ---------- */

.zq-receipt-billed-band {
    display: inline-block;
    margin-top: 24px;
    padding: 11px 44px 11px 18px;
    background: var(--zq-receipt-dark);
    color: #ffffff;
    font-size: var(--zq-fs-band);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.zq-receipt-client {
    display: flex;
    gap: 40px;
    margin-top: 18px;
}

.zq-receipt-client-col {
    flex: 1 1 0;
    min-width: 0;
}

.zq-receipt-client-field {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-height: 28px;
    padding-bottom: 7px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--zq-receipt-rule);
    font-weight: 600;
}

.zq-receipt-client-field a {
    color: var(--zq-receipt-ink);
}

.zq-receipt-client-icon {
    color: var(--zq-receipt-accent);
    font-size: var(--zq-fs-base);
}

.zq-receipt-client-field-label {
    color: var(--zq-receipt-muted);
    font-weight: 500;
}

.zq-receipt-project {
    margin-top: 14px;
    color: var(--zq-receipt-muted);
}

/* ---------- line items ---------- */

.zq-receipt-table {
    width: 100%;
    margin-top: 26px;
    border-collapse: collapse;
}

.zq-receipt-table thead th {
    background: var(--zq-receipt-accent);
    color: #ffffff;
    font-size: var(--zq-fs-tablehead);
    font-weight: 700;
    padding: 13px 14px;
    border: 0;
    white-space: nowrap;
}

.zq-receipt-table td {
    padding: 14px;
    vertical-align: top;
    border: 0;
}

.zq-receipt-table .zq-col-figure {
    text-align: right;
    white-space: nowrap;
}

.zq-receipt-lineitem {
    border-bottom: 1px solid var(--zq-receipt-rule);
}

.zq-receipt-longdescription {
    color: var(--zq-receipt-muted);
    font-size: var(--zq-fs-small);
}

.zq-receipt-adjustment {
    border-bottom: 1px solid var(--zq-receipt-rule);
    color: var(--zq-receipt-muted);
}

.zq-receipt-invoice-total td {
    font-weight: 700;
    border-top: 2px solid var(--zq-receipt-dark);
    border-bottom: 1px solid var(--zq-receipt-rule);
}

.zq-receipt-payment {
    background: var(--zq-receipt-row);
}

.zq-receipt-payment-date {
    font-size: var(--zq-fs-small);
    color: #4a4a4a;
}

/* ---------- totals ---------- */

.zq-receipt-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.zq-receipt-totals table {
    min-width: 360px;
}

.zq-receipt-totals td {
    padding: 9px 0;
}

.zq-receipt-totals-label {
    text-align: right;
    font-weight: 700;
    padding-right: 40px !important;
}

.zq-receipt-totals-value {
    text-align: right;
    white-space: nowrap;
}

.zq-receipt-balance .zq-receipt-totals-label,
.zq-receipt-balance .zq-receipt-totals-value {
    font-size: var(--zq-fs-total);
    font-weight: 700;
}

.zq-receipt-cancelled {
    margin-top: 18px;
}

/* ---------- amount in words & terms ---------- */

.zq-receipt-footnotes {
    display: flex;
    gap: 40px;
    margin-top: 26px;
}

.zq-receipt-words {
    flex: 1 1 45%;
}

.zq-receipt-words-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zq-receipt-terms {
    flex: 1 1 55%;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
}

.zq-receipt-terms p {
    margin-bottom: 4px;
}

/* ---------- signatures & footer ---------- */

.zq-receipt-signatures {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin-top: 70px;
}

.zq-receipt-signature {
    flex: 1 1 0;
    text-align: center;
}

.zq-receipt-signature-line {
    border-top: 1px solid var(--zq-receipt-ink);
    margin-bottom: 8px;
}

.zq-receipt-signature-label {
    font-weight: 700;
}

.zq-receipt-thanks {
    margin-top: 34px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- small screens ----------
   Scoped to `screen` on purpose. An A4 page box is 190mm = 718px, which is
   under this breakpoint, so an unscoped `max-width: 767px` also fires while
   printing and collapses the document into the stacked phone layout.
   ------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

    .zq-receipt-card {
        padding: 18px;
    }

    .zq-receipt-header,
    .zq-receipt-meta,
    .zq-receipt-client,
    .zq-receipt-footnotes {
        flex-direction: column;
        gap: 16px;
    }

    .zq-receipt-type,
    .zq-receipt-refs {
        text-align: left;
    }

    .zq-receipt-type-band {
        min-width: 0;
        padding: 14px 20px;
    }

    :root {
        --zq-fs-title: 30px;
    }

    .zq-receipt-totals table {
        min-width: 0;
        width: 100%;
    }

    .zq-receipt-signatures {
        gap: 30px;
    }
}

/* ================================================================
   PRINT

   The printed page is the screen page. This block deliberately does
   NOT restyle any geometry - no separate paddings, column widths,
   min-widths or logo sizes. Every layout rule above applies as-is, so
   what comes out of the printer is the same document.

   Only four things happen here:
     1. page setup, and undoing bootstrap's own print block
     2. a slightly smaller type scale, in pt, sized for paper
     3. hiding screen-only chrome
     4. forcing the brand colours to actually print

   On (1): bootstrap.min.css ships
   `@page { size: a3 }` and `body { min-width: 992px !important }`.
   On A4 the browser then shrinks the whole sheet to about 70%, which
   is what made the text tiny. receipt.css is linked after bootstrap,
   so re-declaring both here wins.
   ================================================================ */

@media print {

    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    html,
    body {
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .container,
    .container-fluid {
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Type scale - print. The same scale as the screen, a step down so a
       full page of line items still fits A4. */
    :root {
        --zq-fs-base: 11pt;
        --zq-fs-small: 9pt;
        --zq-fs-title: 30pt;
        --zq-fs-company: 16.5pt;
        --zq-fs-band: 12.5pt;
        --zq-fs-tablehead: 11pt;
        --zq-fs-total: 14pt;
    }

    /* Screen-only chrome inside the page. */
    .zq-receipt-actions-card,
    .zq-receipt-notes-card,
    .zq-receipt-status {
        display: none !important;
    }

    /* App chrome, for when the browser's own Ctrl+P is used instead of the
       print button - the button already prints the document on its own. */
    .left-sidebar,
    .topbar,
    .page-titles,
    .right-sidebar,
    .footer,
    #nprogress,
    .chat-windows,
    .preloader {
        display: none !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* The card is the document's frame on screen; on paper the @page
       margin is the frame. */
    .zq-receipt-card {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    .zq-receipt {
        font-size: var(--zq-fs-base);
        color: var(--zq-receipt-ink) !important;
    }

    /* Links print as plain text - bootstrap otherwise underlines them and
       appends the href in brackets. */
    .zq-receipt a,
    .zq-receipt a:after {
        text-decoration: none !important;
        color: inherit !important;
        content: none !important;
    }

    /* Keep every background and colour. Without this browsers drop them. */
    .zq-receipt,
    .zq-receipt * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .zq-receipt-type-band {
        background: var(--zq-receipt-dark) !important;
    }

    .zq-receipt-type-text {
        color: #ffffff !important;
    }

    .zq-receipt-billed-band {
        background: var(--zq-receipt-dark) !important;
        color: #ffffff !important;
    }

    .zq-receipt-table thead th {
        background: var(--zq-receipt-accent) !important;
        color: #ffffff !important;
    }

    .zq-receipt-payment {
        background: var(--zq-receipt-row) !important;
    }

    /* Do not split a row, the signatures or the footnotes across pages. */
    .zq-receipt-lineitem,
    .zq-receipt-payment,
    .zq-receipt-adjustment,
    .zq-receipt-invoice-total,
    .zq-receipt-signatures,
    .zq-receipt-footnotes,
    .zq-receipt-totals {
        page-break-inside: avoid;
    }

    .zq-receipt-table thead {
        display: table-header-group;
    }
}