/* 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;
}
/* Each card header and lettered sub-section carries a real <h2>/<h3> so these forms have a
   navigable heading outline — they are the numbered questions of a court form, and as bare <div>s
   they were invisible as structure to a screen reader (WCAG 1.3.1 Info and Relationships, Level A,
   and 2.4.6 Headings and Labels, Level AA). The heading element is nested INSIDE the existing
   div rather than replacing it, so every rule keyed to .card-header still applies unchanged —
   including the .k-pdf-export rules that drive the PDF export. These resets strip the browser's
   default heading size and margins so the change is semantic only and nothing moves on screen. */
#psmMain .card-header h2,
#psmMain .alert h3 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    color: inherit;
}
#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;
}
/* ROOT CAUSE of long question headers still being cut off at the right edge in the exported PDF
   (2026-09, Garvine email — Initial Plan #3/#5/#7, Annual Plan #4/#6/#7): no fonts are registered
   via kendo.pdf.defineFont, so Kendo paints every PDF text run in the standard PDF Helvetica /
   Helvetica-Bold, while the browser lays out and line-breaks the text using Bootstrap 5's
   system-ui font stack (Segoe UI on Windows). Bold uppercase Helvetica is ~5% wider than Segoe UI,
   so a line the browser measured as just fitting overflows the card's clip once painted. Using
   Arial/Helvetica (metric-compatible with the PDF's Helvetica) for the snapshot makes the browser's
   line breaks match what actually gets drawn. Scoped to .k-pdf-export only, so the on-screen form
   is unchanged. */
.k-pdf-export,
.k-pdf-export * {
    font-family: Arial, Helvetica, sans-serif !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 {
    /* ── Page setup ──────────────────────────────────────────────────────
       Letter portrait with 0.5in margins, the same paper and margins the Kendo
       drawDOM export passes to kendo.drawing.pdf (see probate-smart-forms-pdf.js), so a
       printed form and an exported one agree on page size and text area. */
    @page {
        size: Letter portrait;
        margin: 0.5in;
    }

    /* ── Use the whole text area ─────────────────────────────────────────
       The form sits inside _Layout's .page-main > .container. Bootstrap sizes .container by
       breakpoint, and the ~720px print viewport (see the grid note below) lands in the `sm`
       tier, whose max-width is 540px — so a printed form was using only about 5.4in of the
       7.5in text area, with 2in of empty paper down the right-hand side. On screen the
       container is at its lg/xl width, which is what drawDOM captures, so this also brings a
       printed form back in line with the exported one. */
    .page-main > .container {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ── Density ─────────────────────────────────────────────────────────
       The Kendo export captures the on-screen (desktop-width) rendering and scales the whole
       snapshot down onto the page, so everything in it — type, padding, borders — is smaller
       than a 1:1 print. Matching that by scaling the root font size rather than with `zoom`:
       Bootstrap 5 expresses its padding, margins and gaps in rem, so they shrink in proportion
       with the text, while 1px and 2px borders stay exactly 1px and 2px instead of being
       scaled into fuzzy sub-pixel lines the way `zoom` would. Same density, sharper rules.

       12px against the 16px default is about 9pt body text — close to the exported PDF, and
       still a normal size for a printed court form that people fill in by hand. Anything keyed
       to px rather than rem (e.g. .fill-blank's min-width) deliberately does not scale here. */
    html { font-size: 12px; }

    /* ── Keep the grid horizontal ────────────────────────────────────────
       THE SINGLE BIGGEST DIFFERENCE between printing and the Kendo export. Letter portrait
       minus 0.5in margins leaves a 7.5in text area — about 720 CSS px, which is UNDER
       Bootstrap's `md` breakpoint of 768px. So when printing, every .col-md-* collapses to
       full width and a two- or three-across row of fields stacks into one field per line,
       roughly doubling the page count. drawDOM never hits this because it captures the
       on-screen (desktop-width) layout and scales it down.

       Re-asserting the md widths here restores the on-screen arrangement. Explicit widths
       rather than a zoom trick, because media queries are evaluated against the viewport and
       are not affected by CSS zoom — zooming would shrink the text without bringing
       Bootstrap's own md rules back into play. */
    #psmMain .col-md-1 { width: 8.3333%; }
    #psmMain .col-md-2 { width: 16.6667%; }
    #psmMain .col-md-3 { width: 25%; }
    #psmMain .col-md-4 { width: 33.3333%; }
    #psmMain .col-md-5 { width: 41.6667%; }
    #psmMain .col-md-6 { width: 50%; }
    #psmMain .col-md-7 { width: 58.3333%; }
    #psmMain .col-md-8 { width: 66.6667%; }
    #psmMain .col-md-9 { width: 75%; }
    #psmMain .col-md-10 { width: 83.3333%; }
    #psmMain .col-md-11 { width: 91.6667%; }
    #psmMain .col-md-12 { width: 100%; }
    #psmMain [class*="col-md-"] { flex: 0 0 auto; }

    /* ── Page breaks ─────────────────────────────────────────────────────
       The same two class names the Kendo export uses for pagination (forcePageBreak and
       keepTogether), so both routes break the form in the same places. */
    #psmMain .page-break { break-before: page; page-break-before: always; }
    #psmMain .prevent-split { break-inside: avoid; page-break-inside: avoid; }

    /* ── Match the exported PDF's appearance ─────────────────────────────
       These mirror the .k-pdf-export rules above — that block is the source of truth for how
       an exported form should look, and this keeps a printed one consistent with it.

       The card header rule is not cosmetic: on screen it is white text on navy, and browsers
       do NOT print background colours unless the user ticks "Background graphics". Left
       alone, every section title would print as WHITE TEXT ON WHITE PAPER — the headings
       would simply be missing from the page. Forcing black-on-white removes that dependency
       on a print-dialog checkbox entirely. */
    #psmMain .card {
        border: 2px solid #000 !important;
        border-radius: 0 !important;
    }
    #psmMain .card-header {
        background-color: #fff !important;
        color: #000 !important;
        border-bottom: 1px solid #000 !important;
        border-radius: 0 !important;
        /* Slightly smaller than body text so the court caption — "IN THE CIRCUIT COURT OF THE
           ELEVENTH JUDICIAL CIRCUIT, IN AND FOR MIAMI-DADE COUNTY, FLORIDA, PROBATE DIVISION",
           the same on every one of these forms — sets on ONE line. Measured in the print font
           stack at the 12px root above: that caption is 723px at 1rem against 694px of usable
           width inside the card's padding, so it wrapped; 0.9rem brings it to about 651px. The
           margin is deliberate, since print font metrics vary a little by platform. Long
           numbered question headers still wrap, which is expected. */
        font-size: 0.9rem;
    }
    #psmMain .card-header h2,
    #psmMain .alert h3 { color: #000 !important; }
    /* Sub-record boxes (.border/.rounded utilities) are an on-screen grouping cue only — the
       paper form never had a nested box. Same reasoning as the export rules. */
    #psmMain .border { border: none !important; }
    #psmMain .alert {
        border: 1px solid #000 !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }
    /* "Encumbrance N" is a green pill on screen; the paper form had plain bold text. */
    #psmMain .encumbrance-label {
        background: none !important;
        color: #000 !important;
        padding: 0 !important;
        font-weight: bold;
    }

    /* .right-panel is _Layout's site-wide Sandi chat widget. It is position: fixed, so it isn't
       in the page flow on screen, but a fixed box still gets painted when printing — it was
       coming out as an empty white rounded rectangle with a drop shadow at the foot of the last
       sheet of every form. NOTE: this hides it for these forms only, because this stylesheet is
       the only one with an @media print block; the widget will do the same on any other page of
       the site that someone prints. */
    .site-header, .site-footer, .skip-link, .no-print, .right-panel { display: none !important; }

    /* ── Keep the page's <h1> in the PDF ─────────────────────────────────
       PAC/PDF-UA checkpoint "First heading level": a document's first heading must be H1, and
       these forms start at H2 (the numbered questions). The page's only <h1> is _Layout's
       .page-title-band, which print used to hide outright — display: none also removes it from
       the PDF's structure tree, so the printed file had no H1 at all.

       So the band stays in the layout and only its visible chrome is dropped. The <h1> itself
       cannot be hidden by any of the usual screen-reader-only techniques, because Chromium's
       print pipeline only tags what it actually PAINTS: there is no sr-only equivalent for PDF
       export. Measured against PAC, `position: absolute; clip: rect(0 0 0 0)` produced zero H1
       tags, and a zero-height overflow-hidden container produced zero; font-size: 1px produced
       one, and cleared the checkpoint.

       The cost is honest: 1px type is still painted, so page 1 carries a faint grey mark about
       a quarter-inch wide in the top-left corner. White-on-white would hide it but is the
       classic hidden-text pattern and would likely trade this error for a contrast failure.
       The alternative, if the mark is ever unacceptable, is to promote the court-caption
       card-header to <h1> in the markup of all 21 forms and drop this block. */
    .page-title-band {
        display: block !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }
    .page-title-band > .container { display: block !important; padding: 0 !important; }
    .page-title-band .page-title-date { display: none !important; }
    .page-title-band h1 {
        font-size: 1px;
        line-height: 1;
        margin: 0;
        color: #000;
    }
    .content-panel { box-shadow: none !important; border: none !important; padding: 0 !important; }
    /* The page's grey background otherwise prints as a border around the form whenever the user
       leaves "Background graphics" ticked (and it is always on when a server renders the page
       headlessly). A court form should be on white paper either way. */
    html, body, .content-panel { background: #fff !important; }
    /* Mirror the on-screen control: no box, just the ruled line you write on. The pale #f8fcff
       fill is an editing-only cue. The bottom border is deliberately KEPT — dropping it (as an
       earlier revision did) left a blank form with nothing to write on. These rules only matter
       if the beforeprint swap below didn't run; normally the controls are gone by print time. */
    #psmMain .form-control, #psmMain select.form-control {
        border: none !important;
        border-bottom: 1px solid #000 !important;
        background: transparent !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #psmMain table .form-control { border-bottom: none !important; }
    #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 {
        border-bottom: 1px solid #000;
        padding: 0 2px;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        /* An empty span is zero-height as well as zero-width, so without this a blank field's
           rule collapses to nothing. Holds the line open at one line's height. */
        min-height: 1.15em;
    }
    /* Full-width fields take the width of the control they replaced, so a blank form prints the
       same ruled lines as the Kendo export. Overflowing text wraps onto another line instead of
       being clipped at the control's width, which is why these are spans and not the inputs. */
    .print-fill-block {
        display: block;
        width: 100%;
    }
    /* Mid-sentence blanks (case number, dates, amounts) stay in the run of text. min-width
       matches #psmMain .fill-blank above so an empty one is still a visible blank to write in. */
    .print-fill-inline {
        display: inline-block;
        min-width: 90px;
    }
    /* Table cells get no rule, matching `#psmMain table .form-control` on screen — the cell
       borders already delimit where to write. */
    #psmMain table .print-fill { border-bottom: none; }
    /* 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 p {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* Keep each numbered question (a .card) on one sheet WHERE IT FITS. break-inside is
       best-effort by spec: the browser honours it when the box fits in a page, and ignores it
       when the box is taller than a page, because it has to break something. That gives exactly
       the behaviour these forms want — short questions are never split, long ones (the big
       checkbox lists) still flow — without needing to know any card's height in advance.

       It does mean a question that doesn't fit the remaining space moves to the next sheet and
       leaves the tail of the previous one blank. That is the intended trade: a court form reads
       better as whole questions than as tightly packed pages. */
    #psmMain .card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* The safety net for the cards too tall to keep whole. Without this, a card that has to
       split can leave its header stranded alone at the foot of a page with the questions it
       introduces overleaf (the "9. THE WARD HAS THE FOLLOWING HEALTH INSURANCE..." case).
       break-after: avoid moves the header onto the next page with the content it belongs to. */
    #psmMain .card-header {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* Belt and braces for the same seam, from the other side: Chromium weighs break-before on
       the following box as well as break-after on the heading. */
    #psmMain .card-header + * {
        break-before: avoid;
        page-break-before: avoid;
    }
    /* Don't strand a single line of a paragraph by itself at a page boundary. */
    #psmMain { orphans: 2; widows: 2; }
}