/* =============================================================================
 * kdeclaration.css — Tenancy Relationship Declaration (MOCI إقرار بعلاقة إيجارية)
 * -----------------------------------------------------------------------------
 * Two things live here:
 *   1. .kdecl-*      the PMS panel + form inside the contract's General tab
 *   2. .kdp-*        the A4 ministry paper itself (screen preview + print)
 *
 * Kept out of ttstyles.css on purpose so the declaration can be restyled, or
 * removed, without touching the shared stylesheet every other screen depends on.
 * ============================================================================= */

/* --- Arabic face used by the paper. Falls back to the system Arabic stack so
       the form still renders correctly if the font file is ever missing. --- */
@font-face {
    font-family: 'KDeclAr';
    src: url('app_assets/ge_ss_two_light.otf') format('opentype');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'KDeclAr';
    src: url('app_assets/ge_ss_two_medium.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'KDeclAr';
    src: url('app_assets/ge_ss_two_bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}

/* =========================================================================
 * 1. PANEL — the card + status strip inside the contract detail General tab
 * ========================================================================= */

.kdecl-panel          { width: 100%; float: left; display: block; }
.kdecl-box            { width: 100%; height: auto; float: left; border: 1px solid #e2ddd0;
                        border-radius: 5px; padding: 5px; box-sizing: border-box; }
.kdecl-head           { width: 100%; height: 30px; float: left; padding: 5px;
                        background: #f3efe4; border-radius: 5px; line-height: 20px;
                        font-size: 14px; margin-bottom: 8px; box-sizing: border-box; }
.kdecl-head b         { color: #6b5f45; }

.kdecl-row            { width: 100%; float: left; margin-bottom: 6px; }
.kdecl-cell           { float: left; padding: 4px 6px; box-sizing: border-box; font-size: 13px; }
.kdecl-c25            { width: 25%; }
.kdecl-c33            { width: 33.33%; }
.kdecl-c50            { width: 50%; }
.kdecl-c100           { width: 100%; }
.kdecl-lbl            { color: #7a6f57; font-weight: 700; display: block; margin-bottom: 2px; }
.kdecl-val            { color: #1f1f1f; word-break: break-word; }

/* --- status pill --- */
.kdecl-pill           { display: inline-block; padding: 2px 10px; border-radius: 11px;
                        font-size: 12px; line-height: 18px; font-weight: 700; }
.kdecl-st-draft       { background: #ecebe8; color: #55524b; }
.kdecl-st-wait        { background: #fdf0d5; color: #8a6100; }
.kdecl-st-ok          { background: #e3f1e4; color: #256b2a; }
.kdecl-st-done        { background: #dde9f7; color: #1d4f8b; }
.kdecl-st-bad         { background: #fbe3e3; color: #99201f; }

/* --- serial + hash chips --- */
.kdecl-serial         { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700;
                        letter-spacing: 0.5px; color: #3b3524; }
.kdecl-hash           { font-family: 'Courier New', monospace; font-size: 11px; color: #8b8371; }

/* --- buttons --- */
.kdecl-btn            { display: inline-block; min-width: 96px; height: 30px; line-height: 30px;
                        text-align: center; border-radius: 3px; font-size: 13px; cursor: pointer;
                        padding: 0 12px; margin: 3px 6px 3px 0; box-sizing: border-box;
                        border: 1px solid transparent; user-select: none; }
.kdecl-btn-primary    { background: #c0a76d; color: #ffffff; }
.kdecl-btn-primary:hover  { background: #ab9459; }
.kdecl-btn-ghost      { background: #ffffff; color: #6b5f45; border-color: #d9d2c0; }
.kdecl-btn-ghost:hover    { background: #f7f4ec; }
.kdecl-btn-ok         { background: #2f7d34; color: #ffffff; }
.kdecl-btn-ok:hover       { background: #276b2b; }
.kdecl-btn-bad        { background: #a32d2c; color: #ffffff; }
.kdecl-btn-bad:hover      { background: #8c2726; }
.kdecl-btn-dis,
.kdecl-btn-dis:hover  { background: #eceae4; color: #a9a396; cursor: not-allowed; opacity: .85; }

/* --- form --- */
.kdecl-fld            { width: 33.33%; float: left; padding: 4px 6px; box-sizing: border-box; }
.kdecl-fld-w50        { width: 50%; }
.kdecl-fld-w100       { width: 100%; }
.kdecl-fld label      { display: block; font-size: 12px; color: #7a6f57; margin-bottom: 3px; }
.kdecl-fld input,
.kdecl-fld select,
.kdecl-fld textarea   { width: 100%; height: 30px; box-sizing: border-box; padding: 4px 7px;
                        border: 1px solid #d9d2c0; border-radius: 3px; font-size: 13px;
                        background: #ffffff; color: #1f1f1f; }
.kdecl-fld textarea   { height: 60px; resize: vertical; }

/* --- styled file picker (kdecl_upload_html) — replaces the raw <input type=file>
   'Choose file' button which never matched the panel. The native input is
   accessible-hidden and driven by its <label>. */
.kdecl-file {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border: 1px solid #e2ddd0; border-radius: 8px; background: #fbfaf6;
}
.kdecl-file .kdecl-file-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kdecl-file-choose {
    display: inline-block; cursor: pointer; padding: 7px 14px; border-radius: 6px;
    background: #fff; border: 1px solid #c0a76d; color: #8a6c2a; font-weight: 700;
    font-size: 13px; white-space: nowrap; transition: background .15s;
}
.kdecl-file-choose:hover  { background: rgba(192,167,109,.14); }
.kdecl-file-choose:active { transform: translateY(1px); }
.kdecl-file-name {
    flex: 1 1 140px; min-width: 0; font-size: 13px; color: #a89c7d;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kdecl-file-name--has { color: #2a2515; font-weight: 600; }
.kdecl-file-upload    { margin: 0; flex: 0 0 auto; }

/* --- dropdown. The native arrow lands on whichever side `direction` puts it
       and does not match the rest of the fields, so it is replaced with an
       inline SVG caret positioned per direction: left for the RTL (Arabic)
       selects, right for any LTR one added later. --- */
.kdecl-fld select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b5f45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px;
}
.kdecl-fld select.kdecl-ar {
    background-position: left 10px center;
    padding-right: 7px;
    padding-left: 26px;
}
.kdecl-fld select:hover  { background-color: #fbfaf6; }
.kdecl-fld select:focus  { border-color: #c0a76d; outline: none; }
.kdecl-fld select option { direction: rtl; text-align: right; }
.kdecl-fld select:not(.kdecl-ar) option { direction: ltr; text-align: left; }
.kdecl-fld input[readonly],
.kdecl-fld input:disabled { background: #f4f2ec; color: #6d6858; cursor: not-allowed; }
/* Arabic input. Deliberately NOT the KDeclAr (GE SS) face used by the paper:
   that font maps ASCII digits to Arabic-Indic through its "anum" OpenType
   feature, so a stored "22200" displayed as "٢٢٢٠٠" in the form even though the
   data was correct. The paper works around it per value (see .kdp-latin in
   tenancy_declaration.php), which is impossible inside an <input> — the value is
   one string. So the form uses the system Arabic stack, which renders Arabic
   properly and leaves Western digits alone. anum is switched off as well, for
   any face further down the list that also carries it. */
.kdecl-fld .kdecl-ar  { direction: rtl; text-align: right;
                        font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
                        font-feature-settings: "anum" 0;
                        font-variant-numeric: lining-nums; }
.kdecl-req            { color: #a32d2c; }

/* --- section heading inside the form. Clears the floated field cells above it
       so each section starts on its own line, in the paper's own order. --- */
.kdecl-sechead        { width: 100%; float: left; clear: both; margin: 10px 0 4px;
                        padding: 5px 8px; box-sizing: border-box;
                        background: #f3efe4; border-radius: 4px;
                        font-size: 12.5px; font-weight: 700; color: #6b5f45;
                        letter-spacing: .2px; }

.kdecl-note           { width: 100%; float: left; padding: 7px 9px; margin: 4px 0 8px;
                        border-radius: 4px; font-size: 12.5px; line-height: 18px;
                        box-sizing: border-box; }
.kdecl-note-info      { background: #f2f6fb; border: 1px solid #cfe0f2; color: #1d4f8b; }
.kdecl-note-warn      { background: #fdf7e6; border: 1px solid #efdfb0; color: #8a6100; }
.kdecl-note-bad       { background: #fdefef; border: 1px solid #f0cdcd; color: #99201f; }
.kdecl-note-ok        { background: #eef7ee; border: 1px solid #cbe6cb; color: #226a2a; }

/* --- print register table --- */
.kdecl-reg            { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kdecl-reg th         { text-align: left; padding: 5px 7px; background: #f3efe4; color: #6b5f45;
                        border-bottom: 1px solid #e2ddd0; font-weight: 700; }
.kdecl-reg td         { padding: 5px 7px; border-bottom: 1px solid #efece3; color: #333; }
/* Review link inside the earlier-declarations table. */
.kdecl-link           { color: #c0a76d; cursor: pointer; font-weight: 700; white-space: nowrap; }
.kdecl-link:hover      { text-decoration: underline; }
.kdecl-link:hover     { color: #ab9459; text-decoration: underline; }

/* =========================================================================
 * 2. THE PAPER — A4, right-to-left, matching the ministry layout
 * ========================================================================= */

.kdp-sheet {
    width: 794px;                 /* A4 at 96dpi */
    min-height: 1123px;
    margin: 0 auto;
    padding: 26px 34px 30px;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
    position: relative;
    direction: rtl;
    text-align: right;
    font-family: 'KDeclAr', 'Traditional Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-size: 13.5px;
    font-weight: 300;          /* the ministry form is set light, not regular */
    line-height: 2.05;
    overflow: hidden;
    /* The Arabic face maps ASCII digits to Arabic-Indic via the "anum"
       feature. The ministry form prints Western digits, so turn it off. */
    font-feature-settings: "anum" 0;
    font-variant-numeric: lining-nums;
}

/* =========================================================================
 * OVERLAY MODE — the ministry's own scan as the page.
 * -------------------------------------------------------------------------
 * The blank form is a scanned image (no text layer, no embedded font), so the
 * only exact way to produce it is to show that scan and place the values on
 * top. Active whenever paper_templates/moci_declaration.png exists.
 * ========================================================================= */
.kdp-sheet--overlay {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;   /* the scan IS the page — fill it exactly */
    padding: 0;
    border: 0;
}
/* One value sitting on the form. Positioned from the RIGHT because the sheet
   is right-to-left, and by percentage so the placement survives whatever
   resolution the scan was exported at. */
.kdp-ov {
    position: absolute;
    z-index: 2;
    direction: rtl;
    /* Entered values use the SAME clean, self-hosted face as the form itself
       (KDeclAr = GE SS Two), not the old Windows-only naskh stack, which fell
       back to Tahoma anywhere but a staff PC (and in the headless PDF render).
       Now the filled text is one consistent modern Arabic sans everywhere, and
       reads like the app. Digits are still wrapped in .kdp-latin, so the GE SS
       Arabic-Indic digit substitution never applies to them. */
    font-family: 'KDeclAr', 'Segoe UI', Tahoma, sans-serif;
    /* Medium weight so entered data reads as entered, a touch stronger than the
       printed labels without tipping into full bold. */
    font-weight: 500;
    font-size: 11px;
    /* Arabic is a joined script — letter-spacing pulls the glyphs apart and
       the joins start to look broken, so the breathing room comes from
       word-spacing plus a slightly open line instead. The small letter value
       is deliberately under half a pixel. */
    letter-spacing: .3px;
    word-spacing: 1.5px;
    line-height: 1.15;
    /* black, like a form filled by hand — the maroon read as part of the
       ministry's own printing rather than as entered data */
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 'top' is the text baseline. Past -100% lifts the value a little higher so
       it sits clearly ABOVE the form's rule rather than resting on it. -110%
       keeps a small lift while sitting the value a touch closer to the line. */
    transform: translateY(-110%);
}
/* A value that is allowed to run onto a second line rather than be cut off —
   a multi-unit lease lists every unit in رقم الشقة. Because the box is
   anchored by its BOTTOM (translateY(-100%) above), extra lines grow UPWARD
   off the rule, which is exactly how the ministry's own forms are filled by
   hand when the list does not fit. */
.kdp-ov--wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.05;
    letter-spacing: 0;
    /* Break ONLY at the separators the renderer marked (a zero-width space
       after each "/") — "A2-290/A2-291/" then "A2-292". overflow-wrap:
       break-word is deliberately NOT set: browsers apply it greedily and it
       was splitting mid-code ("A2-290/A2-291/A2-" + "292") instead of using
       those points. */
    overflow-wrap: normal;
}
/* Two or more units. Set smaller so the whole list fits the narrow slot and
   stays inside the form's frame, which is what is done by hand on the paper
   original: a long list is written small across two lines above the rule. */
/* one unit code — never broken across lines */
.kdp-nb { white-space: nowrap; }
.kdp-ov--multi {
    font-size: 8.5px;
    line-height: 1.0;
}
/* The tenant's e-signature image, placed over the المستأجر block. Positioned by
   percentage (top/right/width) like every value, so it holds wherever the sheet
   is scaled; height follows the image so the signature keeps its aspect. The
   PNG is saved with its white keyed to transparent, so it sits on the form
   without a box around it. */
.kdp-sig-ov {
    position: absolute;
    z-index: 2;
    height: auto;
    max-height: 7%;
    object-fit: contain;
    pointer-events: none;
}
/* Company stamp, laid over the CEO (المؤجر) signature once issued — the same
   seal the contract paper uses. Sits ABOVE the signature (z-index) with a slight
   tilt and some transparency, so it reads like a real stamp pressed over an
   ink signature rather than hiding it. Height-driven (the PNG is portrait), so
   width follows the aspect and it scales with the sheet. */
.kdp-stamp-ov {
    position: absolute;
    z-index: 3;
    width: auto;
    object-fit: contain;
    opacity: 0.72;
    transform: rotate(-8deg);
    transform-origin: center;
    pointer-events: none;
    mix-blend-mode: multiply;
}
/* the control block sits in the sheet's own bottom margin, clear of the form */
.kdp-ctrl--overlay {
    /* A compact stamp in the lower-left, level with the attachments list, in
       the empty margin beside it - not jammed into the very bottom corner.
       Percentage-positioned so it holds wherever the sheet is scaled. */
    /* Tuck the stamp into the bottom-left CORNER of the printed frame, inside
       both borders (measured off the scan: left border 4.76%, bottom border
       96.61%). Anchoring by the BOTTOM instead of the top drops it into the
       empty band below the المرفقات list and keeps its bottom edge a fixed gap
       above the frame's bottom rule whatever the stamp's own height works out
       to - so it never floats high in the band nor spills past the border. */
    position: absolute;
    left: 6%; right: auto; top: auto; bottom: 4%;
    z-index: 3;
    width: auto;
    margin: 0;
    padding: 0;
    /* No rule above it - the base .kdp-ctrl draws a dashed top border, so it is
       cleared here with !important (that rule is defined later and would win). */
    border-top: 0 !important;
    padding-top: 0 !important;
    background: transparent;
    /* Everything in the stamp shares ONE left edge: the QR, the serial and the
       hash all start at the same x. Centring made the (narrower) QR float in the
       middle of the wider serial, so it read as indented - left-align fixes that
       so the QR's left edge lines up with the text beneath it. */
    text-align: left;
    direction: ltr;
}
.kdp-ctrl--overlay .kdp-ctrl-qr    { float: none; width: auto; }
.kdp-ctrl--overlay .kdp-ctrl-qr img{ width: 62px; height: 62px; padding: 3px; margin: 0;
                                     border: 1px solid #d9d2c4; border-radius: 8px; background: #fff; }
.kdp-ctrl--overlay .kdp-ctrl-serial{ font-size: 8.5px; letter-spacing: .5px; margin-top: 2px; text-align: left; }
.kdp-ctrl--overlay .kdp-ctrl-hash  { font-size: 7.5px; color: #888; margin-top: 1px; text-align: left; }
.kdp-ctrl--overlay .kdp-ctrl-copy  { float: none; text-align: center; font-size: 7.5px; margin-bottom: 2px; }

/* --- the controlled-document watermark. Baked as a repeating rotated layer so
       a photocopy carries it too and a blank sheet cannot be manufactured. --- */
.kdp-wm {
    position: absolute;
    top: -20%; left: -20%; width: 140%; height: 140%;
    transform: rotate(-26deg);
    pointer-events: none;
    z-index: 0;
    opacity: 0.10;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.kdp-wm span {
    display: block;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: 2px;
    color: #6a6a6a;
    text-align: center;
}
.kdp-wm-draft span { color: #a32d2c; opacity: 0.85; font-weight: 700; }

.kdp-body { position: relative; z-index: 1; }

/* --- header --- */
.kdp-hdr        { width: 100%; text-align: center; margin-bottom: 6px; }
.kdp-hdr-logo   { height: 74px; margin: 0 auto 4px; display: block; }
.kdp-hdr-ph     { height: 74px; line-height: 74px; font-size: 12px; color: #999;
                  border: 1px dashed #d4cdbb; border-radius: 4px; width: 74px; margin: 0 auto 4px; }
.kdp-hdr-ar     { font-size: 25px; font-weight: 700; letter-spacing: 1px; }
.kdp-hdr-en     { font-size: 12.5px; font-weight: 700; direction: ltr; }

.kdp-deptrow    { width: 100%; overflow: hidden; margin: 8px 0 4px; }
.kdp-dept-ar    { float: right; width: 33%; font-size: 13px; font-weight: 700; color: #8c1c3f; text-align: right; }
.kdp-dept-en    { float: left;  width: 33%; font-size: 12px; font-weight: 700; color: #8c1c3f;
                  direction: ltr; text-align: left; line-height: 1.35; }
.kdp-title      { margin: 0 auto; width: 34%; background: #6d1631; color: #ffffff;
                  border-radius: 14px; text-align: center; font-size: 14px; font-weight: 700;
                  padding: 3px 0; }

.kdp-frame      { border: 1px solid #8c1c3f; border-radius: 3px; padding: 16px 18px; margin-top: 10px; }

/* --- the dotted fill-in line the ministry form uses ---------------------
   The blank runs the WHOLE width of its line on the real form: label, then
   dots all the way to the next label. Fixed-width segments left gaps and did
   not read like the original, so each line is a flex row and the slots GROW
   to fill whatever space is left. The -sm/-lg/-xl modifiers set how much of
   that space each slot takes relative to its neighbours. */
.kdp-fill {
    /* inline-block so the slot still works inside a PROSE paragraph; a flex
       parent blockifies it anyway, so one rule serves both contexts. */
    display: inline-block;
    flex: 1 1 auto;
    min-width: 58px;
    border-bottom: 1px dotted #555;
    padding: 0 5px;
    text-align: center;
    font-weight: 400;
    color: #000000;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* flex-grow drives the fill-in LINES; min-width is what the same slot falls
   back to inside a prose paragraph, where there is no row to share out. */
.kdp-fill-sm  { flex-grow: .6;  min-width: 52px; }
.kdp-fill-lg  { flex-grow: 2.4; min-width: 150px; }
.kdp-fill-xl  { flex-grow: 4;   min-width: 260px; }
.kdp-dots     { display: inline-block; border-bottom: 1px dotted #555; min-width: 60px; }
/* Values that carry no Arabic letters — dates and reference numbers. Rendered
   in a Latin face so ASCII digits stay Western, as the ministry form prints
   them, instead of being remapped to Arabic-Indic by the Arabic font. */
.kdp-latin    { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 13px; letter-spacing: .2px; }

.kdp-p        { margin: 0 0 3px; display: flex; align-items: baseline;
                gap: 5px; flex-wrap: nowrap; }
/* the statutory paragraphs are prose, not a fill-in line — keep them flowing */
/* prose that carries inline blanks — must WRAP, so it stays a block and the
   slots sit in the text rather than competing for one flex row. */
.kdp-p-flow   { display: block; }
.kdp-p-just   { display: block; text-align: justify; line-height: 1.95; }
.kdp-strong   { font-weight: 700; }
.kdp-sec      { font-weight: 700; color: #8c1c3f; margin: 14px 0 4px; }

/* --- signature band --- */
.kdp-signrow  { width: 100%; overflow: hidden; margin: 22px 0 6px; }
.kdp-signcol  { width: 46%; text-align: center; }
.kdp-signcol-r { float: right; }
.kdp-signcol-l { float: left; }
.kdp-signlbl  { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.kdp-signbox  { height: 86px; border-bottom: 1px solid #666; position: relative; }
.kdp-signhint { position: absolute; bottom: 3px; right: 0; left: 0; text-align: center;
                font-size: 10px; color: #b3ab97; }

/* --- attachments --- */
.kdp-att      { margin-top: 16px; }
.kdp-att ol   { margin: 4px 18px 0 0; padding: 0; }
.kdp-att li   { margin-bottom: 1px; }

/* --- control footer: serial, QR, hash, verification block --- */
.kdp-ctrl {
    margin-top: 20px;
    border-top: 1px dashed #b9b0a0;
    padding-top: 10px;
    overflow: hidden;
    direction: ltr;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}
.kdp-ctrl-qr    { float: left; width: 96px; }
.kdp-ctrl-qr img{ width: 92px; height: 92px; display: block; background: #fff;
                  padding: 3px; border: 1px solid #ccc; box-sizing: content-box; }
.kdp-ctrl-txt   { float: left; width: calc(100% - 110px); padding-left: 12px; box-sizing: border-box; }
.kdp-ctrl-serial{ font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700;
                  letter-spacing: 1px; color: #111; }
.kdp-ctrl-line  { font-size: 10.5px; color: #444; line-height: 1.5; }
.kdp-ctrl-line b{ color: #111; }
.kdp-ctrl-hash  { font-family: 'Courier New', monospace; font-size: 10px; color: #666; }
.kdp-ctrl-copy  { float: right; font-size: 10.5px; color: #666; text-align: right; }
.kdp-ctrl-dup   { color: #a32d2c; font-weight: 700; }

/* =========================================================================
 * 3. PRINT — the sheet only; everything else in the tab is suppressed
 * ========================================================================= */
@media print {
    body * { visibility: hidden !important; }
    .kdp-sheet, .kdp-sheet * { visibility: visible !important; }
    .kdp-sheet {
        position: absolute; left: 0; top: 0;
        width: 100%; min-height: auto;
        margin: 0; padding: 10mm 12mm;
        box-shadow: none;
        page-break-after: avoid;
    }
    .kdp-noprint { display: none !important; }

    /* OVERLAY MODE needs the opposite of the rule above. That sheet holds no
       flow content at all - just the ministry scan as its background with the
       values absolutely positioned on top - so `min-height:auto` collapses it
       to zero height and every value lands in a heap at the top of the page.
       Pin it to a real A4 instead and keep the padding at nothing: the scan IS
       the page, so any padding shifts the whole form off its own frame. */
    .kdp-sheet--overlay {
        /* `fixed`, not `absolute`: the paper renders inside the detail split
           view (.tt_page3 sits at left:32%), and an absolutely positioned
           sheet inherits that offset and prints indented by a third of the
           page. Fixed anchors it to the sheet of paper. One sheet prints per
           click, so there is no repeat-on-every-page cost. */
        position: fixed;
        left: 0; top: 0;
        /* 100% of the PAGE AREA, not a hardcoded 210x297mm. Whatever margin or
           hardware printable area the browser and the chosen printer settle
           on, the sheet fills exactly that and there is nothing left over to
           overflow. A fixed 210mm box overflows the moment ANYTHING reserves
           a margin, and Chrome answers overflow by scaling the WHOLE document
           down and anchoring it top-left - which is what left the form sitting
           at about four-fifths size in the corner of the page. */
        width: 100%; height: 100%; min-height: 0; max-width: none;
        padding: 0 !important;
        /* Chrome drops background images when printing unless asked - and here
           the background image is the form itself, so without this the page
           comes out as floating values on blank paper. */
        -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
    }
    /* Printing is triggered from inside the app shell, so the page still holds
       the entire UI. visibility:hidden leaves all of those boxes occupying
       layout, and anything that overruns A4 makes Chrome scale the WHOLE
       document down to fit - which is why the form came out small in a corner.
       The Print button lifts the sheet to <body> and sets this class, so for
       the duration of the print the page holds the sheet and nothing else. */
    body.kdecl-printing { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
    body.kdecl-printing > *:not(.kdp-sheet) { display: none !important; }

    @page { size: A4 portrait; margin: 0 !important; }
}

/* ---- kws_confirm dialog buttons (reuses the #show_msgbox modal) ----------
   A gold OK + a grey Cancel, laid out side by side. Scoped to #show_msgbox_btn
   so the single-OK message box (one centred button) is unaffected. */
#show_msgbox_btn { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.msg_btn_ok    { background: #c0a76d !important; color: #fff !important; }
.msg_btn_ok:hover { background: #b0965a !important; }
.msg_btn_ghost { background: #eeeeee; color: #424242; }

/* ---- REJECTED / CANCELLED center stamp -----------------------------------
   A big diagonal rubber-stamp mark for a rejected (returned) or void
   (cancelled) declaration, so a copy reads as dead at a glance. Only emitted
   for those states (kdecl_render_overlay), never on a live sheet. */
.kdp-void-stamp {
    position: absolute;
    top: 41%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-17deg);
    z-index: 5;
    padding: 6px 34px;
    border: 6px solid #b5322f;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #b5322f inset;
    color: #b5322f;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 60px;
    font-weight: 900;
    letter-spacing: 5px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.40;
    pointer-events: none;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
}