/* =====================================================================
   THE SHARED REPORT / WORKLIST TEMPLATE.  (Client A2, 2026-09-26.)

   The client's words about the screens built before this: they look
   "made in a hurry". He was right - every page was laid out by hand,
   text centred, content against the screen edge, an explanation
   paragraph under every title, no search, no sort, no paging, and
   colour used for decoration.

   This is one stylesheet so that never happens one page at a time
   again. Style guide points 21-35 live here; a screen gets them by
   using the classes, not by re-deciding them.

   Clinical Blue, the theme the rest of the system already uses.
   ===================================================================== */

:root {
  --rp-ink:        #1B2733;
  --rp-muted:      #6B7A8D;
  --rp-faint:      #98A6B3;
  --rp-line:       #E3E9EF;
  --rp-line-firm:  #C9D5DF;
  --rp-surface:    #FFFFFF;
  --rp-surface-2:  #F7FAFC;
  --rp-blue:       #17457F;
  --rp-blue-soft:  #EEF4FB;
  --rp-red:        #B3261E;
  --rp-red-soft:   #FDECEA;
  --rp-amber:      #8A5A00;
  --rp-amber-soft: #FFF6E5;
  --rp-green:      #1C6B43;
  --rp-green-soft: #E9F5EE;
  --rp-radius:     6px;
  --rp-gap:        14px;
}

/* --- 21. PAGE FRAME ------------------------------------------------- */
.rp-page {                       /* centred, never against the edge */
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 20px 28px;
  text-align: left;              /* point 3: nothing is centred by default */
  color: var(--rp-ink);
  font-size: 13px;
}
.rp-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; margin-bottom: var(--rp-gap);
  border-bottom: 1px solid var(--rp-line);
}
.rp-head h1 {                    /* clearly larger than body text */
  margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700;
}
.rp-head .rp-sub {               /* at most 8 words, and only if needed */
  font-size: 12px; color: var(--rp-muted);
}
.rp-head .rp-spacer { flex: 1 1 auto; }
.rp-head .rp-actions { display: flex; gap: 8px; align-items: center; }

/* --- 22. FILTER BAR ------------------------------------------------- */
.rp-card {
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  margin-bottom: var(--rp-gap);
}
.rp-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 12px 14px;
}
.rp-filters .rp-f { display: flex; flex-direction: column; gap: 4px; }
.rp-filters label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--rp-muted); font-weight: 600;
}
/* point 20: the control and the button are the same height, and their
   edges line up. One rule, so no screen has to measure it again. */
.rp-filters input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.rp-filters select,
.rp-filters button,
.rp-filters .btn {
  height: 34px; box-sizing: border-box; padding: 6px 12px; margin: 0;
  font-size: 13px; line-height: 20px;
  border: 1px solid var(--rp-line-firm); border-radius: 4px;
  background: var(--rp-surface); color: var(--rp-ink);
}
.rp-filters button, .rp-filters .btn {
  cursor: pointer; font-weight: 600;
  background: var(--rp-blue); border-color: var(--rp-blue); color: #fff;
}
.rp-filters button.rp-secondary {
  background: var(--rp-surface); color: var(--rp-ink);
  border-color: var(--rp-line-firm);
}

/* --- 23. SUMMARY TILES ---------------------------------------------- */
.rp-tiles { display: flex; gap: var(--rp-gap); flex-wrap: wrap; margin-bottom: var(--rp-gap); }
.rp-tile {
  flex: 1 1 170px; min-width: 150px;
  background: var(--rp-surface);
  border: 1px solid var(--rp-line); border-top: 3px solid var(--rp-blue);
  border-radius: var(--rp-radius);
  padding: 10px 14px; cursor: pointer;                /* every tile filters */
  text-align: left; text-decoration: none; color: inherit; display: block;
}
.rp-tile:hover { background: var(--rp-surface-2); }
.rp-tile.on { background: var(--rp-blue-soft); border-color: var(--rp-blue); }
.rp-tile b { display: block; font-size: 25px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rp-tile span {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--rp-muted); margin-top: 2px;
}
.rp-tile.warn { border-top-color: var(--rp-amber); }
.rp-tile.bad  { border-top-color: var(--rp-red); }
.rp-tile.good { border-top-color: var(--rp-green); }

/* --- 24. THE TABLE -------------------------------------------------- */
.rp-tblbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--rp-line);
}
.rp-tblbar .rp-count { font-size: 12px; color: var(--rp-muted); }
.rp-tblbar .rp-spacer { flex: 1 1 auto; }
.rp-search {
  height: 32px; box-sizing: border-box; padding: 5px 10px; min-width: 240px;
  border: 1px solid var(--rp-line-firm); border-radius: 4px; font-size: 13px;
}
.rp-tblwrap { overflow-x: auto; }          /* wide tables scroll, the page never does */
table.rp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rp-tbl thead th {
  position: sticky; top: 0; z-index: 2;     /* sticky header */
  background: var(--rp-surface-2);
  border-bottom: 1px solid var(--rp-line-firm);
  padding: 8px 10px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--rp-muted); font-weight: 700;
  text-align: left; white-space: nowrap;
}
table.rp-tbl thead th.rp-sortable { cursor: pointer; user-select: none; }
table.rp-tbl thead th.rp-sortable::after { content: ' \2195'; color: var(--rp-faint); }
table.rp-tbl thead th.rp-asc::after  { content: ' \2191'; color: var(--rp-blue); }
table.rp-tbl thead th.rp-desc::after { content: ' \2193'; color: var(--rp-blue); }
table.rp-tbl tbody td {
  padding: 9px 10px; border-bottom: 1px solid var(--rp-line);
  height: 40px; box-sizing: border-box;     /* compact ~40px rows */
  vertical-align: middle;
  /* THE LEGACY PAGE WRAPS EVERYTHING IN <center>, which these screens
     inherit - so the patient names and test names came out centred
     however carefully the container said otherwise. Point 24 wants text
     columns left; saying so on the cell is the only place that wins. */
  text-align: left;
}
table.rp-tbl tbody tr:nth-child(even) { background: #FCFDFE; }   /* light zebra */
table.rp-tbl tbody tr:hover { background: var(--rp-blue-soft); }
/* numbers right, and the HEADER follows its cells */
table.rp-tbl .n, table.rp-tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.rp-tbl .rp-name { width: 99%; }       /* the name column takes the spare width */
table.rp-tbl .rp-narrow { width: 1%; white-space: nowrap; }
/* ---------------------------------------------------------------------
   A LABEL-AND-VALUE TABLE: the value sits next to its label.
   (Client APPLY-DONE point 3, 12-10 13:44, on the System update screen:
   "put each value next to its label (no wide empty gap)".)

   The class was already being used by that screen and had no rule at
   all, so the table fell back to rp-tbl's width:100% and stretched the
   label column across the card - "Release" at the far left and
   "2026.10.1" at the far right with a hand's width of nothing between
   them. The label column now takes only the room its words need and
   the value follows it.
   --------------------------------------------------------------------- */
table.rp-tbl--kv { width: auto; }
table.rp-tbl--kv tbody th {
  width: 1%; white-space: nowrap; text-align: left;
  font-weight: 600; color: var(--rp-muted);
  padding: 7px 18px 7px 10px; border-bottom: 1px solid var(--rp-line);
}
table.rp-tbl--kv tbody td { white-space: nowrap; }
/* 28. a bold totals row, in the table - never floating in text */
table.rp-tbl tfoot td {
  padding: 10px; border-top: 2px solid var(--rp-line-firm);
  font-weight: 700; background: var(--rp-surface-2);
}

/* --- 25. GROUPED ROWS ----------------------------------------------- */
table.rp-tbl tr.rp-group td {
  background: var(--rp-surface-2); font-weight: 700;
  border-top: 1px solid var(--rp-line-firm);
}
table.rp-tbl tr.rp-group .rp-gmeta { font-weight: 400; color: var(--rp-muted); font-size: 11.5px; }
table.rp-tbl tr.rp-child td:first-child { padding-left: 26px; }

/* --- 27. COLOUR MEANS ONE THING; status is a BADGE ------------------ */
.rp-badge {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.rp-badge.red   { color: var(--rp-red);   background: var(--rp-red-soft);   border-color: #F5C6C2; }
.rp-badge.amber { color: var(--rp-amber); background: var(--rp-amber-soft); border-color: #F0DFB8; }
.rp-badge.green { color: var(--rp-green); background: var(--rp-green-soft); border-color: #BFE0CD; }
.rp-badge.grey  { color: var(--rp-muted); background: var(--rp-surface-2);  border-color: var(--rp-line); }
.rp-badge.blue  { color: var(--rp-blue);  background: var(--rp-blue-soft);  border-color: #CFE0F2; }

/* --- 26. ROW ACTIONS and bulk tick ---------------------------------- */
.rp-tbl td.rp-act { text-align: right; white-space: nowrap; }
.rp-btn {
  height: 28px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  border-radius: 4px; cursor: pointer;
  background: var(--rp-blue); border: 1px solid var(--rp-blue); color: #fff;
}
.rp-btn.rp-secondary { background: var(--rp-surface); color: var(--rp-ink); border-color: var(--rp-line-firm); }
.rp-btn[disabled] { opacity: .5; cursor: default; }
.rp-bulk {
  display: none; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--rp-blue-soft);
  border-bottom: 1px solid var(--rp-line);
}
.rp-bulk.on { display: flex; }

/* --- tabs (26, 33) --------------------------------------------------- */
.rp-tabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--rp-line); }
.rp-tabs a {
  padding: 9px 14px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--rp-muted); border-bottom: 2px solid transparent;
}
.rp-tabs a.on { color: var(--rp-blue); border-bottom-color: var(--rp-blue); }
.rp-tabs a:hover { color: var(--rp-ink); }

/* --- 29. EMPTY STATE: one short grey line --------------------------- */
.rp-empty { padding: 22px 14px; color: var(--rp-muted); font-size: 13px; }

/* --- 30. the (i) tooltip -------------------------------------------- */
.rp-i {
  display: inline-block; width: 15px; height: 15px; line-height: 14px;
  text-align: center; border-radius: 50%; font-size: 10px; font-weight: 700;
  border: 1px solid var(--rp-line-firm); color: var(--rp-muted);
  cursor: help; margin-left: 5px; background: var(--rp-surface);
}

/* --- 31. PRINT ------------------------------------------------------ */
@media print {
  .rp-noprint, .rp-filters, .rp-tiles, .rp-tblbar, .rp-tabs,
  .rp-bulk, .rp-head .rp-actions, .rp-tbl td.rp-act, .rp-tbl th.rp-act { display: none !important; }
  .rp-page { max-width: none; padding: 0; }
  .rp-card { border: 0; }
  table.rp-tbl thead th { position: static; background: #fff; }
  table.rp-tbl tbody tr:nth-child(even) { background: #fff; }
  .rp-printhead { display: block !important; margin-bottom: 10px; }
  .rp-printfoot { display: block !important; margin-top: 12px; font-size: 10px; color: #444; }

  /* *** HIDE THE APPLICATION CHROME (41-43). ***
     profile1.php emits its header, the user strip and the <nav1> menu as
     plain siblings of the page container, with no class to target - so
     they PRINTED. Found by reading section IM's own output on 30-09: the
     signed imaging report went to paper reading "Hospital Manager ...
     Hi ! ADMIN ... Home  Out Patient  New Patient Registration", above
     the patient's letterhead, on a sheet meant for a patient. The case
     passed, because it asked whether the report's own words were there
     and not whether anything else was.
     Structural, like consultation_print.php's: everything that is not
     the page container is hidden. #rp-printdoc is the document the print
     builder makes and is exempt - it is the only other thing on this
     page that is meant to reach paper. */
  body > div:not(.rp-page):not(#rp-printdoc),
  body > nav1, body > table, body > center { display: none !important; }

  @page { size: auto; margin: 12mm 10mm 14mm; }
}
.rp-printhead, .rp-printfoot { display: none; }

/* --- 32. editable lists --------------------------------------------- */
.rp-edit { width: 84px; height: 30px; box-sizing: border-box; padding: 4px 8px;
           text-align: right; border: 1px solid var(--rp-line-firm); border-radius: 4px;
           font-size: 13px; }
tr.rp-dirty td { background: var(--rp-amber-soft) !important; }
.rp-savebar { display: none; align-items: center; gap: 10px; padding: 9px 14px;
              background: var(--rp-amber-soft); border-bottom: 1px solid #F0DFB8; }
.rp-savebar.on { display: flex; }

/* --- 34. no horizontal scroll at 1366 ------------------------------- */
@media (max-width: 1400px) {
  /* 16px, not 14: item 10 measures content-to-edge at 1366 and the rule
     is at least 16px. Two pixels, but a rule that is measured is a rule
     that is either kept or not. */
  .rp-page { padding-left: 16px; padding-right: 16px; }
  .rp-tile { flex-basis: 150px; }
}

/* ---- two classes the reports kept re-inventing ---------------------
   .rp-num  a money or count column: right-aligned, and tabular figures
            so the digits line up down the column (style point 28)
   .rp-h2   a section heading INSIDE a report - the hospital's legacy
            stylesheet paints h2 as a chip, which is wrong here */
.rp-tbl td.rp-num, .rp-tbl th.rp-num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rp-h2 {
  margin: 22px 0 8px; padding: 0; font-size: 14px; font-weight: 700;
  background: none; border: 0; border-radius: 0; color: var(--rp-ink);
  text-transform: none; letter-spacing: 0; text-align: left; width: auto;
}

/* ---- a short note under the tiles, and the tab links -------------- */
.rp-note {
  margin: 0 0 var(--rp-gap); padding: 9px 12px; font-size: 12.5px;
  background: var(--rp-surface-2); border: 1px solid var(--rp-line);
  border-left: 3px solid var(--rp-red); border-radius: 4px;
}
.rp-tbl .rp-sub { display: block; font-size: 11px; color: var(--rp-muted); }

/* K5 / K4.3: a HINT UNDER A FIELD, which is where the one standard puts
   its explanations - never in a placeholder, which disappears the moment
   somebody types. The class is new: shifts.php is its first user, and the
   rule is here rather than inline because the next report screen that
   needs a hint should find one already styled. */
.rp-hint {
  margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--rp-muted);
}

/* two tables side by side, stacking on a narrow screen (point 34) */
.rp-cols { display: flex; gap: var(--rp-gap); flex-wrap: wrap; align-items: flex-start; }
.rp-cols > * { flex: 1 1 340px; min-width: 0; }

/* ---- point 20: a button lines up with the box beside it ------------
   Measured 2026-09-27: a legacy rule renders .rp-search 44px tall while
   .rp-btn is 28, so a button in the table bar sat 13px high and 16px
   short of the box next to it. Both are pinned here, in the bar, so the
   pair matches whatever the rest of the page does to inputs. */
.rp-tblbar { align-items: center; }
.rp-tblbar > *,
.rp-tblbar .rp-search,
.rp-tblbar .rp-btn { align-self: center; margin-top: 0; margin-bottom: 0; }
.rp-tblbar .rp-search,
.rp-tblbar .rp-btn { height: 34px; box-sizing: border-box; line-height: 1.2; }
.rp-tblbar .rp-btn { padding: 4px 12px; }

/* ---------------------------------------------------------------------
   POINTS 41-43: THE PRINT DOCUMENT (js/print_doc.js builds it).

   While #rp-printdoc exists the SCREEN is hidden and only the document is
   printed - which is what stops the menu, the tabs, the filter bar, the
   tiles, the buttons and the scrollbars reaching paper. The old approach
   hid those one class at a time and missed whatever a screen had added
   since.
 ------------------------------------------------------------------- */
#rp-printdoc { display: none; }

@media print {
  body.rp-printing > *:not(#rp-printdoc) { display: none !important; }
  body.rp-printing #rp-printdoc { display: block !important; }

  .pd-page { page-break-after: always; break-after: page; }
  .pd-page:last-child { page-break-after: auto; break-after: auto; }

  .pd-lh { text-align: center; margin-bottom: 6px; }
  .pd-ttl { font-size: 15px; font-weight: 700; text-align: center; }
  .pd-sub { font-size: 11px; text-align: center; color: #333; }
  .pd-filters { font-size: 10.5px; text-align: center; color: #444; margin-top: 2px; }
  .pd-cap { font-size: 12px; font-weight: 700; margin-top: 6px; }
  .pd-head { border-bottom: 1px solid #000; padding-bottom: 6px; margin-bottom: 8px; }

  table.pd-tbl { width: 100%; border-collapse: collapse; font-size: 10.5px; }
  table.pd-tbl th, table.pd-tbl td {
    border: 1px solid #999; padding: 3px 5px; text-align: left; vertical-align: top;
  }
  table.pd-tbl th { background: #eee; font-weight: 700; }
  table.pd-tbl td.rp-num, table.pd-tbl th.rp-num { text-align: right; }
  /* 42: headings repeat, and no row is ever split */
  table.pd-tbl thead { display: table-header-group; }
  table.pd-tbl tr { page-break-inside: avoid; break-inside: avoid; }

  .pd-foot {
    display: flex; justify-content: space-between;
    margin-top: 8px; padding-top: 4px; border-top: 1px solid #999;
    font-size: 10px; color: #333;
  }
  @page { size: auto; margin: 12mm 10mm 12mm; }
}

/* --- header facts: "who and what is this", before any table ----------
   Used by rp_fact(). Reads as a row of label-over-value pairs that wraps
   on a narrow screen instead of squeezing, and it PRINTS - the facts are
   the part of a voucher that identifies it. */
.rp-facts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 12px; }
.rp-fact { display: flex; flex-direction: column; gap: 1px; min-width: 120px; }
.rp-fact > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
                  color: var(--rp-muted); }
.rp-fact > b { font-size: 14px; }
.rp-fact.red > b { color: var(--rp-red); }

/* a quieter aside inside a cell - never the only carrier of meaning */
.rp-dim { color: var(--rp-muted); }

/* A DESTRUCTIVE BUTTON LOOKS DESTRUCTIVE. Cancelling a voucher or voiding
   a bill must not wear the same blue as "Show". */
.rp-btn.rp-danger { background: var(--rp-red); border-color: var(--rp-red); color: #fff; }

/* --- a one-line footnote under a table (points 3, 30) ----------------
   The explanation itself lives in the (i) tooltip; this line only names
   what the reader is looking at. Paragraphs of explanation on the page
   are what the client asked us to stop doing. */
.rp-foot { margin: 8px 2px 0; font-size: 12px; color: var(--rp-muted); }

/* the "nothing to show" print page (style guide 41-42): a print must
   always produce a document, even when the answer is "nothing today" */
.pd-none { margin: 24px 0; font-size: 13px; font-style: italic; }

/* --- THE FILTER ROW STAYS LEVEL (client, 28-09, with a screenshot) ----
   The row is align-items:flex-end, so ANY extra element inside a .rp-f
   after its control makes that cell taller and lifts its box above every
   other box on the row - the Supplier box was 24px high of the rest
   because an (i) icon sat under it. Two rules keep it honest:
     * the (i) belongs in the LABEL (see rp_info in the markup);
     * nothing in the row stretches, so the action button sits directly
       after the last box instead of being pushed to the far right. */
.rp-filters .rp-f > .rp-i { margin-left: 4px; }
.rp-filters label .rp-i { vertical-align: baseline; }
.rp-filters .st-item select { min-width: 240px; }
.rp-filters .st-inhand-wrap { justify-content: flex-end; }
.st-inhand {
  display: inline-block; height: 34px; line-height: 34px;
  font-size: 13px; font-weight: 600; color: var(--rp-muted); white-space: nowrap;
}

/* Point 20/34, measured 28-09: an EasyUI combogrid draws its own box and
   it comes out 2px taller than the house control, so a row that mixes a
   grid with a drop-down sits 2px out of line. On a filter row the grid
   takes the house height - one rule, so no screen measures it again. */
.rp-filters span.textbox { height: 34px; box-sizing: border-box; }
.rp-filters span.textbox .textbox-text { height: 32px; line-height: 32px; }
.rp-filters span.textbox .textbox-addon,
.rp-filters span.textbox .textbox-icon { height: 32px; }

/* A COMBO GRID IS ONE BOX, NOT A BOX INSIDE A BOX.
   (Client, 29-09, with a screenshot of the focused control.)

   EasyUI draws the control as a <span class="textbox"> with a real
   <input class="textbox-text"> inside it, and the hospital's legacy form
   stylesheet then gives that inner input its own border-radius,
   background and height - measured 28px tall and 178px wide inside a
   34x240 box. It reads as a second, smaller box, and the moment it takes
   focus the legacy blue glow draws a rounded rectangle around the inner
   one, which is what the client saw.

   The SPAN is the control. The input inside it carries no shape of its
   own: it fills, and it is transparent. */
.rp-filters span.textbox .textbox-text {
  height: 32px; line-height: 32px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: 0 8px; margin: 0; width: 100%;
}
.rp-filters span.textbox .textbox-text:focus { outline: 0; box-shadow: none; }

/* ---------------------------------------------------------------------
   P3 (client, 29-09): the worklist dialog shows WHAT IS STILL TO DO,
   with what has already been done folded away below it. Folded rows are
   in the table all along - the record is not thrown away, only closed -
   so opening the fold costs no second read.
   ------------------------------------------------------------------ */
.wl-lines tr.wl-folded { display: none; }
.wl-lines tr.wl-folded.wl-folded--open { display: table-row; }
.wl-lines tr.wl-donehd > td { padding: 6px 0 4px; border-bottom: 0; }
.wl-donetoggle {
    background: none; border: 0; padding: 2px 0; cursor: pointer;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #6B7A8D;
}
.wl-donetoggle:hover { color: #223; }
.wl-donetoggle .wl-chev { font-size: 10px; }
.wl-lines tr.wl-allclear td { color: #6B7A8D; padding: 10px 0; }

/* ---------------------------------------------------------------------
   P8c (client, 29-09): the lab result opens the SAME entry form Lab
   Result Entry uses, over the worklist dialog. One text box cannot hold
   a panel; this one lays out every parameter with its unit and range.
   ------------------------------------------------------------------ */
.wl-labov {
    position: fixed; inset: 0; background: rgba(15,23,33,.45);
    display: none; align-items: center; justify-content: center; z-index: 1200;
}
.wl-labov.wl-labov--on { display: flex; }
.wl-labbox {
    background: #fff; border-radius: 6px; width: min(960px, 94vw);
    max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 18px 50px rgba(15,23,33,.3);
}
.wl-labhd {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; border-bottom: 1px solid #E3E8EF; font-size: 15px;
}
/* D4.8: the tube labels, offered the moment the samples are collected. */
.wl-labels {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 10px 16px; margin: 0; background: #F4F7FA;
    border-top: 1px solid #E3E8EF; font-size: 14px;
}
.wl-labelrow { display: inline-flex; align-items: center; gap: 8px; }
/* L1: the strip says what size it prints at, and where that is decided.
   Grey and small: it is a fact, not a control. */
.wl-labelsize { flex-basis: 100%; font-size: 12px; color: #667085; }
.wl-labelrow label { margin: 0; font-weight: normal; color: #52606D; }

/* ON1 / client 01-10: the order number stays in the dialog's heading
   while the result is typed, so the person entering it never has to
   close the form to check which order they are answering. */
.wl-labord {
    font-size: 13px; color: #334155; background: #F4F7FA;
    border: 1px solid #E3E8EF; border-radius: 4px; padding: 2px 8px;
}
.wl-labx {
    margin-left: auto; background: none; border: 0; font-size: 22px;
    line-height: 1; cursor: pointer; color: #6B7A8D;
}
.wl-labbd { padding: 12px 16px; overflow: auto; }
.wl-labbd table { margin: 0; }
.wl-labmsg { padding: 0 16px; color: #B42318; font-size: 13px; }
.wl-labft {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 16px; border-top: 1px solid #E3E8EF;
}
.wl-labval {
    margin-left: 8px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* =====================================================================
   STYLE POINT 47 - A DIALOG HAS ROOM TO BREATHE.  (Client, 30-09.)

   These screens open their dialogs with .cl-dlg and lay them out with
   .ix-m-hd / .ix-m-bd / .ix-m-ft - but BOTH of those contracts were
   written somewhere this stylesheet's screens never load: .cl-dlg's
   padding lives in css/clinical.css, and the .ix-m-* layout lives in an
   inline <style> inside _indent_ui.php, which belongs to the indent
   module. On a report screen the classes were therefore INERT: the
   asset dialog, the imaging report dialog and the imaging template
   dialog had no padding, no separated heading and no footer - the
   buttons were simply the last thing in the content. That is what the
   client photographed.

   Written here, in the stylesheet every report screen does load. The
   indent module's own rules are an inline <style> in the page, so they
   load AFTER this file and still win inside that module - nothing there
   changes.
   ===================================================================== */
.cl-dlg { background:#fff; }

/* the title row */
.cl-dlg > .cl-dlg__hd {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; margin:0;
    border-bottom:1px solid #E3E8EF;
}
.cl-dlg .cl-dlg__ttl { font-size:15px; font-weight:700; color:#1b2430; }

/* the body - 16-24px to every edge, and it is the only part that scrolls */
.cl-dlg .ix-m-bd,
.cl-dlg .cl-dlg__bd { padding:20px; }
.cl-dlg .ix-m-bd > :first-child,
.cl-dlg .cl-dlg__bd > :first-child { margin-top:0; }
/* a summary strip above the body keeps the same side margin */
.cl-dlg .ix-m-hd { padding:16px 20px 0; }
.cl-dlg .ix-m-hd:empty { display:none; }

/* a small heading names each group of fields */
.cl-dlg .ix-m-sec {
    font-size:11.5px; font-weight:700; letter-spacing:.6px;
    text-transform:uppercase; color:#6B7A8D;
    margin:18px 0 8px; padding-bottom:5px;
    border-bottom:1px solid #EDF1F6;
}
.cl-dlg .ix-m-bd > .ix-m-sec:first-child { margin-top:0; }

/* THE FOOTER IS FIXED AND RIGHT-ALIGNED, and stays put while the body
   scrolls - so Save is in the same place in every dialog on every
   screen, whatever the content does. */
.cl-dlg .ix-m-ft,
.cl-dlg .cl-dlg__ft {
    position:sticky; bottom:0; z-index:2;
    display:flex; align-items:center; justify-content:flex-end;
    flex-wrap:nowrap; gap:8px;
    padding:12px 20px; margin:0;
    background:#fff; border-top:1px solid #E3E8EF;
}
/* anything that must sit on the LEFT of the footer says so */
.cl-dlg .ix-m-ft .ix-m-ft__left,
.cl-dlg .cl-dlg__ft .ix-m-ft__left { margin-right:auto; }

/* =====================================================================
   THE DAY DIALOG.  (16.11.7, client 04-10; checklist C-3.)

   Two classes the dialog needs and this stylesheet did not have. They
   are written HERE, in the file every report screen loads, because the
   lesson of style point 47 - three dialogs whose classes were inert
   because their contract lived in a stylesheet those screens never load
   - is one defect per project, not one per dialog.

   .rp-muted  a row the calculation did NOT use: a punch outside every
              window, a pending or rejected manual entry, a device punch
              replaced by a full-day correction. It is shown because the
              operator has to see it, and greyed because counting it
              would be wrong. Struck through, so it reads as "not used"
              in a photograph as well as on screen.
   .rp-why    "How this was worked out" - one plain line per rule, which
              is the client's own shape for it.
   ===================================================================== */
table.rp-tbl tr.rp-muted td { color: var(--rp-muted); text-decoration: line-through; }
table.rp-tbl tr.rp-muted td:last-child { text-decoration: none; font-style: italic; }
.rp-why { margin: 0; padding-left: 18px; }
.rp-why li { font-size: 12.5px; line-height: 1.55; color: var(--rp-ink); margin: 0 0 4px; }

/* =====================================================================
   A CARD'S HEADING.  (Found 04-10 while building the exceptions
   dashboard.)

   .rp-card__hd was carried in the markup of month_close.php,
   manual_punches.php and attendance_exceptions.php and was defined in
   NO stylesheet - so every card heading on those screens rendered as
   whatever the browser does with a bare <div>, and the button beside it
   sat against the text with no gap. The same defect style point 47 was
   written about, in a different place: a class a screen carries and
   nothing reads.

   .rp-spacer pushes what follows it to the right. The clinical sheet's
   .cl-spacer does that job on clinical screens; report screens do not
   load that file, which is how the button ended up touching the title.
   ===================================================================== */
.rp-card__hd {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin: 0;
    font-size: 13px; font-weight: 700; color: var(--rp-ink);
    border-bottom: 1px solid var(--rp-line);
    background: var(--rp-surface-2);
    border-radius: 10px 10px 0 0;
}
.rp-card__hd .rp-spacer, .rp-card__hd .cl-spacer { margin-left: auto; }
.rp-card__hd .rp-btn { font-weight: 600; }

/* =====================================================================
   A FORM INSIDE A DIALOG  -  layout only, added 15-10 for the
   accounting masters and meant for every dialog form after them.

   Style 47 asks for three measured things in a dialog: 16-24px of
   padding, a small heading per group of fields, and a fixed
   right-aligned footer. The footer is .ix-m-ft, which already exists;
   these classes are the body.

   HEIGHT, BORDER, RADIUS AND FONT OF A CONTROL ARE NOT HERE. They
   belong to css/form_standard.css - one height for the whole project
   (K5 A1 / A8) - and the pre-commit check refuses a page that sets
   them. All this does is place the label and let the control fill its
   cell, so every row's box starts at the same x (style 20).
   ===================================================================== */
.rp-dlgform {
    display: grid; grid-template-columns: 130px 1fr;
    gap: 8px 10px;
    /* START, NOT CENTRE. Centring left the control 5px above its label
       on three rows out of four and level on the fourth (measured
       15-10) - the row was taller than either box and the two were
       being centred against different things. Starting both at the
       row's top makes label top == control top, and the label centres
       its own TEXT inside the control's height. */
    align-items: start;
}
.rp-dlgform > label {
    /* MEASURED 15-10. Centring the label's BOX against the control's
       box does not hold: the house label rule carries a bottom margin,
       the grid counts it as part of the label, and the label's centre
       came out 5px low on three rows and level on the fourth. Zeroing
       the margin here lost to a later rule in the cascade.
       So the label is given the control's own height and centres its
       TEXT inside it - no margin arithmetic to lose, and it reads from
       the same --ct-control-h the one control height comes from, so it
       follows if that ever changes. */
    display: flex; align-items: center;
    min-height: var(--ct-control-h, 34px);
    margin: 0;                 /* bootstrap1.css:1033 gives every label
                                  5px at the bottom; in a grid the cell
                                  does the spacing */
    text-align: left; white-space: nowrap;
}
.rp-dlgform input, .rp-dlgform select, .rp-dlgform textarea {
    width: 100%; box-sizing: border-box;
}
/*  CHOOSING A FILE ON A FORM ROW.  form_standard.css's K5-GO A6 gives
    the file control a label-as-button at the one control height, and
    that is what is reused - but the .fs-file span around it comes out
    taller than one control (its own content box plus the text's
    descender space), so on a .rp-dlgform row the label's centre landed
    2.5px above the control's. Measured on Import from Tally at
    1366x768 AND 1920x1080, before and after. Giving the span the one
    control height is all that was wrong.

    IT REACHES NO EXISTING SCREEN: .fs-file is used today only by
    hospital_setup.php and pharmacy_setup.php, and neither puts it in a
    .rp-dlgform - checked, not assumed.  */
.rp-dlgform .fs-file {
    height: var(--ct-control-h, 34px);
    align-items: center;
}
.rp-dlgsec {
    margin: 14px 0 6px; font-weight: 600;
    color: var(--rp-ink-dim, #555); font-size: 12.5px;
}
.rp-dlgsec:first-child { margin-top: 0; }
.rp-dlgpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/*  A PAIR AND A HINT LINE UP WITH THEIR LABEL, the same problem
    .rp-dlgval already solved below: the label is one control high
    (34px) and these are not, so R3.1 ("every label on a row starts at
    the same top") fails by a few pixels. Measured on the one-step bank
    dialog at 1366x768: the Opening balance label sat 5px off its pair
    and a hint row 2.5px off its label.

    The pair gets the control height because its children ARE controls;
    the hint keeps its own height and is aligned to the top instead,
    because a sentence may wrap to two lines and must not be squeezed
    into 34px.  */
.rp-dlgform > .rp-dlgpair { min-height: var(--ct-control-h, 34px); align-items: center; }
/*  and the controls INSIDE a pair carry bootstrap's own bottom margin
    (bootstrap1.css gives every select one), which made the pair 44px
    tall against a 34px label however the pair itself was aligned -
    measured. In a grid cell the cell does the spacing.  */
.rp-dlgform > .rp-dlgpair > input,
.rp-dlgform > .rp-dlgpair > select,
.rp-dlgform > .rp-dlgpair > .rp-dlgval { margin: 0; }
.rp-dlgform > .rp-dlghint { display: flex; align-items: center;
                            min-height: var(--ct-control-h, 34px); }
.rp-dlgval {
    /* A VALUE ROW LINES UP LIKE A CONTROL ROW. The balance A3 puts
       beside a picked ledger is read-only text, not a box - and
       measured 15-10 its label sat 7.3px off, because the label is a
       control's height and the text is not. Giving it the same height
       and centring its text puts every row of the form on one rhythm. */
    display: flex; align-items: center;
    min-height: var(--ct-control-h, 34px);
    font-weight: 600;
}