/* ServPro — Job Order report print layer.
 *
 * Two rules decide whether the report prints correctly:
 *
 * 1. BORDGES always print. BACKGROUNDS do not, unless the user ticks
 *    "Background graphics" in the print dialog. So every form line, box and
 *    section rule is a border — never a background — and print-color-adjust
 *    is only used to make the template's blue section bars match when the
 *    user does enable backgrounds.
 *
 * 2. Inputs, selects and textareas print as their values. Strip their chrome
 *    and the document reads as a filled paper form. This is why the report
 *    needs no separate preview route: Ctrl+P IS the preview.
 */

.jo-doc {
    --jo-ink: #000;
    --jo-rule: #000;
    --jo-shade: #e8f1fb;
    /* One blue for every header, and it is the app's own Bootstrap primary
     * (app.css uses #0d6efd) so the report matches the rest of ServPro.
     * --jo-nonvat-head is the NON-VAT variant: Bootstrap warning, dark text.
     * Only the section bars switch — the letterhead contact icons stay blue. */
    --jo-head: #0d6efd;
    --jo-nonvat-head: #ffc107;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1.25;
    color: var(--jo-ink);
    background: #fff;
    padding: 10px;
}

.jo-doc .jo-sheet {
    border: 1.5px solid var(--jo-rule);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* ---------- generic table scaffolding ---------- */

.jo-doc table.jo-t {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* th lives in tbody here, never thead: no table in the report emits a thead.
 * Scoping th to thead left every column-label row (UNIT PRICE, AMOUNT, HRS,
 * RATE) and every .jo-h/.jo-hd/.jo-sub band unbordered, paddingless and
 * un-aligned — the bands read as floating blue rectangles. */
.jo-doc table.jo-t > tbody > tr > td,
.jo-doc table.jo-t > tbody > tr > th,
.jo-doc table.jo-t > thead > tr > th {
    border: 1px solid var(--jo-rule);
    padding: 2px 4px;
    vertical-align: top;
    font-weight: normal;
    text-align: left;
}

/* One blue for every header — Bootstrap primary, white text. A band whose
 * fill the printer drops would leave the label as white text on white paper,
 * which is why the @media print block forces the background. */
.jo-doc .jo-h {
    background: var(--jo-head);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.jo-doc .jo-hd {
    background: var(--jo-head);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Header bands keep their natural height inside stretched tables. The bottom
 * row's blocks (jo-fill / jo-grow / jo-band) stretch to the sheet's bottom
 * rule, and Chrome distributes a stretched table's extra height across ALL
 * its rows — so whichever block stretches most gets a taller band (seen as a
 * fat RECOMMENDATIONS bar next to a thin TOTAL SUMMARY one). A 1px height is
 * a floor, never a ceiling: cell height is content-minimum, so wrapped labels
 * still fit and every band renders at exactly its natural height. */
.jo-doc table.jo-t > tbody > tr > th.jo-h,
.jo-doc table.jo-t > tbody > tr > th.jo-hd,
.jo-doc table.jo-t > tbody > tr > th.jo-sub {
    height: 1px;
}

/* A bordered void the technician fills in by hand. The paper's TERMS strip is thin;
 * the TOTAL SUMMARY money box is about half its block, so the two differ. */
.jo-doc .jo-blank-area {
    height: 24px;
}

.jo-doc .jo-blank-area-lg {
    height: 72px;
}

/* The bottom band has to reach the sheet's bottom rule. The row is often sized by
 * the taller TECHNICIAN(S) ASSIGNED block, and without this the band stops short
 * and leaves a white strip above the outer border. */
.jo-doc .jo-band {
    height: 100%;
}

.jo-doc .jo-band textarea {
    height: 100%;
    min-height: 120px;
}

/* An explicit height on the sheet's table is what makes its rows — and so its
 * cells — height-definite, which is the only reason the percentage children
 * below resolve at all (same mechanism the band relies on). */
.jo-doc .jo-sheet > table.jo-t {
    height: 100%;
}

/* A block in the sheet's bottom row must reach the sheet's bottom rule: the
 * cell's contents sit in a flex column whose growable table takes the slack.
 * This only resolves in a PLAIN cell — a child's height:100% does NOT resolve
 * inside a rowspan cell (measured: it falls back to the content height), which
 * is why the technicians and money blocks are cells of the bottom row rather
 * than rowspanned from the checklist row. */
.jo-doc .jo-fill {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jo-doc .jo-fill > .jo-grow {
    flex: 1 1 auto;
}

/* The acknowledgement is the band's tallest cell: its clause text stays at the
 * top and the signature line is pinned to the bottom rule, so the blank space
 * falls where the customer signs instead of under the caption. */
.jo-doc .jo-ack {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jo-doc .jo-ack .jo-sign {
    margin-top: auto;
}

/* The paper prints a plain rule for timed-in / timed-out. A datetime-local prints
 * "mm/dd/yyyy --:--" and a picker glyph even when empty, so the native control is
 * for screen only and a mirror carries the ink on paper. */
.jo-doc .jo-dt { display: inline-block; }
.jo-doc .jo-dt-mirror { display: none; }

/* The picker glyph is taller than the 15px field (10px text + 1px padding + a
 * 1px rule), so Chrome hangs it on the text baseline and leaves white space
 * under it. Pin it to the field's vertical centre instead. */
.jo-doc .jo-dt-native::-webkit-calendar-picker-indicator {
    width: 11px;
    height: 11px;
    padding: 0;
    margin-left: 2px;
    vertical-align: middle;
    opacity: 0.6;
    cursor: pointer;
}

.jo-doc .jo-sub {
    background: var(--jo-head);
    color: #fff;
    font-weight: 700;
    text-align: center;
}

/* VAT sheets keep the blue bars; NON-VAT sheets print yellow ones. Dark text
 * carries on yellow (white-on-yellow is unreadable), and .jo-total keeps its
 * transparent opt-out from the rule below. */
.jo-doc.jo-nonvat .jo-h,
.jo-doc.jo-nonvat .jo-hd,
.jo-doc.jo-nonvat .jo-sub:not(.jo-total) {
    background: var(--jo-nonvat-head);
    color: var(--jo-ink);
}

/* The totals are the exception: no fill. A band behind TOTAL MATERIALS/SERVICES,
 * TOTAL LABOR and the TOTAL row competes with the figure instead of labelling
 * it, and the amount is already the boldest ink on the sheet. Dropping the
 * background also forces the text dark, which is the safe direction. */
.jo-doc .jo-total {
    background: transparent;
    color: var(--jo-ink);
}

.jo-doc .jo-lab {
    white-space: nowrap;
    font-weight: 600;
}

.jo-doc .jo-ctr { text-align: center; }
.jo-doc .jo-r { text-align: right; }
.jo-doc .jo-b { font-weight: 700; }

.jo-doc .jo-span2 { border-left: none !important; }
.jo-doc .jo-span3 { border-left: none !important; border-right: none !important; }
.jo-doc .jo-span4 { border-left: none !important; border-right: none !important; }

/* ---------- the form fields that live inside the document ---------- */

.jo-doc .jo-f {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--jo-rule);
    background: transparent;
    padding: 1px 2px;
    margin: 0;
    font: inherit;
    color: inherit;
    border-radius: 0;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.jo-doc textarea.jo-f {
    resize: none;
    border-bottom: 0;
    border: 1px solid var(--jo-rule);
    min-height: 44px;
}

.jo-doc select.jo-f {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}

/* Bootstrap's form focus ring would print as a blue box around every field. */
.jo-doc .jo-f:focus,
.jo-doc .jo-f:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--jo-rule) !important;
    background: transparent !important;
}

.jo-doc .jo-f[readonly] { color: var(--jo-ink); opacity: 1; }

/* The read-only identity block: a box, not an underline. */
.jo-doc .jo-box {
    border: 1px solid var(--jo-rule);
    background: transparent;
    padding: 1px 3px;
    min-height: 15px;
    font-weight: 700;
}

/* ---------- checkboxes ---------- */

.jo-doc .jo-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    min-width: 10px;
    margin: 0 2px 0 0;
    vertical-align: -1px;
    border: 1px solid var(--jo-rule);
    border-radius: 0;
    background: transparent;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* The mark is a thick border, not a background. A background is the first
 * thing a printer drops, and a saved "good" reading that prints as an empty
 * box is indistinguishable from "not checked" — silent loss of a result.
 * A border always prints, and needs no image asset. */
.jo-doc .jo-cb:checked {
    border: 3px solid var(--jo-rule);
    background: transparent;
}

.jo-doc .jo-cb-wrap { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }

/* ---------- repeating line rows ---------- */

.jo-doc .jo-line { display: table-row; }
.jo-doc tr.jo-blank td { height: 17px; }

.jo-doc .jo-legend {
    font-size: 8.5px;
    line-height: 1.3;
    text-align: justify;
}

/* The rule is UNDER the signing void, not over it: the void is the space the
 * customer writes in and the label must sit immediately beneath its own line,
 * the way the paper prints it. With border-top the rule ends up stranded under
 * the clause text with the whole 34px void between it and the caption. */
.jo-doc .jo-sig {
    border-bottom: 1px solid var(--jo-rule);
    min-height: 34px;
}

/* The signature block sits on the right half of the acknowledgement cell: the
 * paper gives the customer's signature its own column instead of running the
 * rule under the whole clause text. A share of the cell (not a fixed width)
 * keeps that fraction when the sheet is fluid on screen and when it prints.
 * The caption keeps centring under its own line. */
.jo-doc .jo-sign {
    width: 50%;
    margin-left: auto;
}

.jo-doc .jo-actions {
    max-width: 1400px;
    margin: 0 auto 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.jo-doc .jo-hint {
    font-size: 11px;
    color: #6c757d;
    margin-left: auto;
}

/* The logo replaces the old text brand. width/height are set in the markup so
 * the browser reserves the box before the file decodes — on a print-and-fill
 * sheet a late reflow would move everything below it. */
.jo-doc .jo-logo {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
}

/* Letterhead: the logo and the contact block share one row — never stacked, and
 * never allowed to wrap (the mock and the paper both keep the details beside the
 * logo). flex:none holds the 160px image at size so the wrapped details cannot
 * squash it. */
.jo-doc .jo-letterhead {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jo-doc .jo-letterhead .jo-logo {
    flex: none;
}

.jo-doc .jo-contact {
    font-size: 7.5pt;
    line-height: 1.35;
}

/* The contact icons are the one spot of colour in the identity block; the
 * letterhead mock shows them in the sheet's blue, not in ink. */
.jo-doc .jo-contact i {
    color: var(--jo-head);
}

/* ---------- screen-only helpers ---------- */

.jo-doc .jo-err {
    display: block;
    color: #b02a37;
    font-size: 9px;
    margin-top: 1px;
}

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

@page {
    size: Letter landscape;
    margin: 6mm;
}

@media print {
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* Bootstrap's app chrome must not reach the paper. */
    header.navbar,
    #sidebarMenu,
    .jo-actions,
    #toastContainer,
    .toast-container {
        display: none !important;
    }

    main,
    .col-md-9,
    .container-fluid,
    .row {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        float: none !important;
    }

    .jo-doc {
        padding: 0;
        font-size: 7.4pt;
        /* 1 form = 1 page: sheet measures ~262mm vs ~204mm printable (Letter landscape, 6mm margins), so scale to fit at Default dialog scale instead of spilling a short page 2. */
        zoom: 0.78;
    }

    .jo-doc .jo-sheet {
        max-width: none;
        border-width: 1pt;
    }

    .jo-doc table.jo-t > tbody > tr > td,
    .jo-doc table.jo-t > tbody > tr > th,
    .jo-doc table.jo-t > thead > tr > th {
        border-width: 0.5pt;
        padding: 1pt 2pt;
    }

    /* Force the section bars to render even when background graphics are off.
     * .jo-sub belongs here too: it carries white text, and a band whose fill
     * the printer drops would leave TOTAL MATERIALS/SERVICES and TOTAL LABOR
     * as white text on white paper. .jo-total is excluded — it has no fill and
     * dark text, so it needs nothing forced and must not pick up the band. */
    .jo-doc .jo-h,
    .jo-doc .jo-hd,
    .jo-doc .jo-sub:not(.jo-total) {
        background: var(--jo-head) !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: inset 0 0 0 100pt var(--jo-head);
    }

    .jo-doc.jo-nonvat .jo-h,
    .jo-doc.jo-nonvat .jo-hd,
    .jo-doc.jo-nonvat .jo-sub:not(.jo-total) {
        background: var(--jo-nonvat-head) !important;
        color: var(--jo-ink) !important;
        box-shadow: inset 0 0 0 100pt var(--jo-nonvat-head);
    }

    .jo-doc .jo-total {
        background: transparent !important;
        color: var(--jo-ink) !important;
        box-shadow: none !important;
    }

    /* Every field needs a printed line, filled or not: this sheet is printed
     * blank and written on with a pen. The rule this replaces underlined only
     * [value] / .is-filled, so an empty field printed with no rule at all and
     * the technician had nothing to write on — while the comment above it
     * claimed the opposite. border: 0 strips the input's own chrome; the
     * border-bottom after it puts back the one rule the paper needs. */
    .jo-doc .jo-f {
        border: 0 !important;
        border-bottom: 0.5pt solid var(--jo-rule) !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        color: var(--jo-ink) !important;
    }

    /* Hand-ticked on paper, so the boxes must be physically bigger than the
     * screen ones — .jo-cb is a fixed px size and does not follow the 7.4pt
     * print type. Screen is untouched. */
    .jo-doc .jo-cb {
        width: 14px;
        height: 14px;
        min-width: 14px;
        border-width: 1pt;
    }

    .jo-doc textarea.jo-f {
        border: 0.5pt solid var(--jo-rule) !important;
    }

    .jo-doc .jo-err { display: none !important; }

    /* Placeholders are on-screen guidance only. Printed, "Actual Reading",
     * "Name" and "Optional recommendations..." read as findings on a form whose
     * blanks have to stay blank, and none of them appear on the paper. */
    .jo-doc ::placeholder {
        color: transparent !important;
    }

    .jo-doc .jo-dt-native { display: none !important; }

    .jo-doc .jo-dt-mirror {
        display: inline-block !important;
        width: 120px;
        border-bottom: 0.5pt solid var(--jo-rule);
    }

    /* The single-page guarantee: never let a table row split across sheets. */
    .jo-doc tr,
    .jo-doc .jo-sign,
    .jo-doc .jo-sig,
    .jo-doc .jo-box {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}