/* Probate Smart Forms — each form category's table (Form / PDF / Word / Web columns in the
   source, where at most one of those three cells was ever actually filled in per row) is
   restructured as a simple name + single color-coded "Open" button per row, matching the
   single-link-per-item convention used elsewhere on this site. Colors match the source's own
   .btn-default:has(...) CSS rules (Word/PDF/Web-form each got a distinct color there too). */
.form-row-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e3e8ee;
}
.form-row:last-child { border-bottom: 0; }
.form-row-name { flex: 1 1 260px; }
.form-row .btn { flex-shrink: 0; white-space: nowrap; }
.form-row .btn .bi { margin-right: 0.3rem; }

.form-link-pdf { color: #8f1f1b; border-color: #8f1f1b; }
.form-link-pdf:hover, .form-link-pdf:focus-visible { background: #8f1f1b; color: #fff; }
.form-link-word { color: #03395f; border-color: #03395f; }
.form-link-word:hover, .form-link-word:focus-visible { background: #03395f; color: #fff; }
.form-link-web { color: #0f6f52; border-color: #0f6f52; }
.form-link-web:hover, .form-link-web:focus-visible { background: #0f6f52; color: #fff; }

/* Individual "smart form" detail pages (Z5-G, A1-G, etc.) — fillable web forms that replace the
   source DNN pages' Kendo UI PDF export (kendo.drawing.drawDOM/pdf.saveAs) with a plain
   browser print / "Save as PDF" button, since Kendo isn't part of this project. #psmMain is the
   source's own wrapper id, kept as-is since every one of these ~20 forms reuses it. */
#psmMain .card {
    border-color: #153f66;
}
#psmMain .card-header {
    background-color: #153f66;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}
#psmMain .form-number-badge {
    font-size: 2rem;
    border-left: 1px dashed #424242;
    text-align: center;
}
#psmMain .text-large { font-size: 1.05rem; }
#psmMain .text-blond { font-weight: 700; }
#psmMain label { font-weight: bold; }
#psmMain .form-control {
    background-color: #f8fcff;
    border: none;
    border-bottom: 1px solid #2c2b35;
    border-radius: 0;
}
#psmMain table .form-control { border-bottom: none; }
#psmMain .form-check-label { margin-left: 0.4rem; }

/* Standalone inline checkboxes (no .form-check wrapper — these sit mid-sentence/mid-row, not
   stacked) rendered too faint at Bootstrap 5's default 1px border. Bumped size/border and nudged
   down half a line so the box sits on the same baseline as its label text instead of floating
   high. */
#psmMain .form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0;
    vertical-align: -0.2em;
    border: 1.5px solid #333;
}
#psmMain .form-check-input:checked {
    background-color: #333;
    border-color: #333;
}

/* Short fill-in-the-blank inputs used mid-sentence (case fields, dates, amounts). Auto-width
   instead of a fixed percentage so on-screen typing isn't visually cramped; the beforeprint swap
   below is what actually prevents clipping when printed. */
#psmMain .fill-blank {
    display: inline-block;
    width: auto;
    min-width: 90px;
}

/* Field-group pattern for stacked "input over its own label" fields (Signature, Date, Printed
   Name, notary block, etc.) — tight gap between an input and the label describing it, generous
   gap before the next field group, so it's visually unambiguous which label belongs to which box
   (this was the "which box is which" complaint from review). */
#psmMain .field-group { margin-bottom: 1.75rem; }
#psmMain .field-group label {
    display: block;
    margin-top: 0.35rem;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.85rem;
    color: #444;
}

/* Letter paper with a tighter-than-browser-default margin — the default ~1in margin on all four
   sides left a lot of unused white border once the site chrome is hidden for print. */
@page {
    size: letter;
    margin: 0.5in;
}

/* Kendo's kendo.drawing.drawDOM() (used by probate-smart-forms-pdf.js for the "Download PDF"
   buttons) temporarily adds a `k-pdf-export` class to the captured element for the duration of the
   snapshot — a genuine built-in Kendo UI feature (confirmed against the original DNN source's own
   ".k-pdf-export .noExport { display: none; }" rule), not something added by this project. It is
   NOT the same code path as @media print above (that only applies to the plain window.print()
   fallback some older pages still reference) — drawDOM captures the live on-screen rendering as-is
   and ignores @media print entirely, so anything that needs to look different in the exported PDF
   must be scoped under .k-pdf-export instead.

   #psmMain keeps its normal Bootstrap 5 card styling on-screen for a nicer editing experience, but
   the exported PDF should look like the original court form: plain square-cornered, solid-black-
   bordered boxes, with the add/remove (+/-) row buttons and their "click (+) to add" helper text
   hidden (they're editing-only affordances, not part of the form). */
.k-pdf-export .no-print {
    display: none !important;
}
.k-pdf-export .card {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
}
.k-pdf-export .card-header {
    background-color: #fff !important;
    color: #000 !important;
    border-bottom-color: #000 !important;
    border-radius: 0 !important;
    /* Long question headers (typed in mixed case, then visually uppercased via text-transform)
       were getting cut off mid-line instead of wrapping in the exported PDF — Kendo's drawDOM
       appears to measure the wrap width using the pre-transform text metrics, which are narrower
       than the actual all-caps glyphs it then paints, so it doesn't leave enough room and clips
       the overflow. Forcing wrapping explicitly (rather than relying on the browser's default,
       which Kendo's own layout pass doesn't reliably match) fixes this regardless of the exact
       cause. */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    /* text-align: center (inherited from the on-screen rule above) isn't reliably honored by
       Kendo's drawDOM for a long, already-uppercase, near-full-width single line (the "IN THE
       CIRCUIT COURT OF..." header on every form) — it was rendering flush-left in the exported
       PDF despite computing as text-align: center in the browser. Centering the content box itself
       via flexbox, rather than relying on text-run alignment, is a different CSS mechanism Kendo
       handles more predictably. */
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}
/* Section A's per-property/per-encumbrance sub-boxes (Bootstrap's .border/.rounded utilities) get
   their own border on-screen to visually group each record while editing — but the old form only
   ever had ONE box per section, so that inner border is dropped for the exported PDF rather than
   also being squared off, to avoid a nested-box look the original never had. */
.k-pdf-export .border {
    border: none !important;
}
/* "Encumbrance N" is styled as a green .btn-success pill on-screen so it reads as a distinct
   sub-record marker while editing — the old form just had it as plain bold text, no button chrome. */
.k-pdf-export .encumbrance-label {
    display: inline;
    background: none !important;
    border: none !important;
    color: #000 !important;
    padding: 0 !important;
    font-weight: bold;
}
/* The pale blue #f8fcff fill on inputs (below) is an on-screen-only cue for "this is a fillable
   box" while editing — the exported PDF should read like a printed paper form, plain white. */
.k-pdf-export .form-control {
    background-color: #fff !important;
}
/* Bootstrap's .alert-* callouts (instructional notes, "Total for Section X", etc.) keep their
   colored/rounded on-screen styling for editing, but read as plain square-cornered black-bordered
   black-text boxes in the exported PDF, matching the rest of this batch's PDF appearance. */
.k-pdf-export .alert {
    background-color: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    color: #000 !important;
}
/* Bootstrap's checkbox draws its checkmark via an SVG data-URI background-image, which Kendo's
   drawDOM PDF renderer doesn't reliably paint (it's built for vector/text drawing, not decoding
   arbitrary CSS background images) — replaced with a plain CSS-generated checkmark glyph, which
   Kendo does draw reliably, plus a bigger/bolder box so checked vs. unchecked reads unambiguously
   at a glance in the exported PDF. */
.k-pdf-export .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 1.3em !important;
    height: 1.3em !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-image: none !important;
    position: relative;
}
.k-pdf-export .form-check-input:checked {
    background-color: #000 !important;
}
.k-pdf-export .form-check-input:checked::after {
    content: "\2713";
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
}

/* Kendo's per-page template (see Shared/_SmartFormPdfModals.cshtml's #page-template script) is
   rendered as an absolutely-positioned overlay sized to the full page for every page of the
   exported PDF. Pin the "Page X of Y" footer to the bottom-right corner within the page margin. */
.page-template {
    position: relative;
    width: 100%;
    height: 100%;
}
.page-template .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: right;
    font-size: 0.85rem;
    color: #000;
}

@media print {
    .site-header, .page-title-band, .site-footer, .skip-link, .no-print { display: none !important; }
    .content-panel { box-shadow: none !important; border: none !important; padding: 0 !important; }
    #psmMain .form-control, #psmMain select.form-control {
        border: none !important;
        background: transparent !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #psmMain .form-check-input {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 1.5px solid #000 !important;
    }
    /* Inputs/selects are swapped for these unbounded-width spans right before printing (see the
       beforeprint/afterprint handlers on each smart-form page) so a long typed value is never
       clipped by a fixed input width the way it was in the first review pass. */
    .print-fill {
        display: inline-block;
        border-bottom: 1px solid #000;
        padding: 0 2px;
        white-space: pre-wrap;
        overflow-wrap: break-word;
    }
    /* Keep a label glued to the value/box directly above it (e.g. Date's filled-in value and its
       "Date" caption) — without this a page break can land between the two, splitting a field
       group's box from its own caption across pages. Applied to the same building blocks used
       throughout every smart-form page: field-group pairs, cards, and standalone paragraphs. */
    #psmMain .field-group,
    #psmMain .card,
    #psmMain p {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}