/*
 * Shared render overrides for the report cards on the homepage.
 * Used by every file in this folder. See components/home/more-reports.tsx.
 *
 * Scope: presentation only. This file changes type and page padding so the
 * reports match the site they are sitting on. It must never change a report's
 * words, figures, sections or order — three of these documents are Jim's and
 * the whole point of rendering the real files is that we are not editing them.
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

/* The documents are rendered in a 520px frame, not a browser window, so the
   page padding they were authored with is wasted width. */
html,
body {
  margin: 0;
  padding: 10px;
}

.wrap,
.card {
  max-width: 100% !important;
}

/*
 * `!important` is not laziness here. Two of these reports set font-family in
 * inline style attributes, which outrank an ordinary rule in a stylesheet, and
 * we are deliberately not editing the documents to remove them.
 */
body,
div,
p,
span,
td,
th,
li,
table {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
}

h1,
h2,
h3,
h4,
.sample-tag,
.page-label,
.tile .value,
.hdr-top {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
}

/* The job intelligence card sets a monospace file number on purpose. Leave
   anything explicitly monospaced alone. */
code,
kbd,
pre,
samp,
[style*="Courier"] {
  font-family: ui-monospace, "Courier New", monospace !important;
}

/*
 * Hidden for the card render (Lilly, 2026-09-20): the red SAMPLE OUTPUT badge
 * ("fat ugly red bar") and the grey meta line under each white title.
 *
 * Hidden, not deleted. These are Jim's documents and the CSS here is the only
 * layer we are allowed to touch, so opening any file in this folder on its own
 * still shows the report exactly as he wrote it, stamp and all.
 *
 * ⚠ What this costs: with the badge and the meta line both gone, nothing in
 * the visible top of a card says "sample" any more. Each report still says so
 * in its footer, but the footer sits well below the card's bottom edge and is
 * never seen. Two of these five (rate card audit, cash position) carry figures
 * that are illustrative rather than real. If these cards are ever shown to
 * someone who could mistake them for a customer's actual numbers, that needs
 * solving above the fold, not in a footer nobody reaches.
 */
.sample-tag,
.page-label,
.header .meta {
  display: none !important;
}

/* The equipment report is inline-styled throughout and has no class to aim
   at; its grey subtitle is the one element using this colour. */
[style*="#C7D0DC"] {
  display: none !important;
}

/*
 * Flush to the card edge (Lilly, 2026-09-20: "weird overlap happening on
 * border of right card").
 *
 * Each of these documents is a page containing a rounded report card, sitting
 * on its own page background. Rendered inside a card that is *also* rounded,
 * you saw both: a strip of page background, then a second rounded corner
 * offset from the first. It read as a rendering bug rather than as a report.
 *
 * Dropping the page padding and the document's outer radius makes the report's
 * own header start exactly at the card's top-left corner, so there is one card
 * and one corner. Radius is removed only from the outermost containers; pills,
 * tiles and callouts inside keep theirs.
 */
html,
body {
  padding: 0 !important;
  background: #fff !important;
}

/*
 * No radius override. There was one, squaring off each report's outer corners,
 * and it only made sense while the documents sat flush against the card edge.
 * Once the margins came back (below), it just made every report look pointy
 * next to the rounded version Lilly preferred (2026-09-21). The reports keep
 * their own rounded corners now.
 */

/* The outer report card carries its own shadow and border, which doubles up
   against the card's shadow at the seam. */
.card,
.wrap {
  box-shadow: none !important;
}

/*
 * One title size across all five (2026-09-21). Each report sets its own:
 * 20px, 21px and whatever the job card uses. Reflowed into a narrow frame,
 * the 21px one wrapped into a two-line block roughly twice the height of its
 * neighbours, and five headers at five sizes read as a pile of screenshots
 * rather than a set. The equipment title is inline-styled with no class, so
 * it is matched on its own inline declaration.
 */
.header h1,
.hdr-name,
[style*="font-size:21px"] {
  font-size: 23px !important; /* was 17px; Lilly: "make the title text big by 6 pt" */
  line-height: 1.25 !important;
}

/*
 * Margins back (Lilly, 2026-09-21: "It should look like a typical layout,
 * just shrunk. margins in tact"). Each report now renders at 520px with its
 * own breathing room around it, then the whole page is scaled into the card.
 * 520 is measured, not picked: it is the narrowest width at which none of the
 * five documents overflows. The equipment report's room table needs it; at
 * the old 460 it ran 33px past the edge and was sliced off the card.
 *
 * Overrides the `padding: 0` above; same specificity, later rule wins.
 */
body {
  padding: 6px !important; /* was 14px; Lilly: "make the white borders less thick" */
}

/*
 * Every report's outer corner at 8px. The card around it rounds its top
 * corners to (8px + 6px margin) × scale, so the two curves are concentric;
 * that only holds if the reports agree on 8. Four already do; the job card
 * was 12px (Lilly, 2026-09-21: "make sure proportions of inner card and
 * outer border match up").
 */
.card {
  border-radius: 8px !important;
}

/*
 * The equipment report's room table, smaller, so more of it shows above the
 * card's cut (Lilly, 2026-09-21: "can the table in photo inventory card be
 * shrunk so you can see more of the full thing?"). Scoped to that one table:
 * it is the only one styled inline at 13px, so the rate card and cash
 * position tables are untouched.
 */
table[style*="font-size:13px"] {
  font-size: 10px !important;
}
table[style*="font-size:13px"] th {
  font-size: 9px !important;
}
table[style*="font-size:13px"] th,
table[style*="font-size:13px"] td {
  padding: 5px 5px !important;
}

/*
 * Grid lines on the equipment table (Lilly, 2026-09-21: "border lines around
 * the table on photo card & b/w the column. thin within the center, thicker
 * on the edges", then "round the corners. make outer edge blue").
 *
 * Rounded corners need `border-collapse: separate`; a collapsed table ignores
 * border-radius. Separate borders would double every inside line, so each
 * cell draws only its right and bottom edge, and the last column and last row
 * drop theirs where the navy outer edge takes over. The corner cells round
 * too, or the grey header row pokes square past the curve.
 */
table[style*="font-size:13px"] {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #d9dee5 !important; /* thin grey outer edge, same as the inside lines (Lilly, 2026-09-21) */
  border-radius: 8px !important;
}
table[style*="font-size:13px"] th,
table[style*="font-size:13px"] td {
  border: 0 !important;
  border-right: 1px solid #d9dee5 !important;
  border-bottom: 1px solid #d9dee5 !important;
}
table[style*="font-size:13px"] tr > :last-child {
  border-right: 0 !important;
}
table[style*="font-size:13px"] tr:last-child > * {
  border-bottom: 0 !important;
}
table[style*="font-size:13px"] tr:first-child > :first-child {
  border-top-left-radius: 6px;
}
table[style*="font-size:13px"] tr:first-child > :last-child {
  border-top-right-radius: 6px;
}
table[style*="font-size:13px"] tr:last-child > :first-child {
  border-bottom-left-radius: 6px;
}
table[style*="font-size:13px"] tr:last-child > :last-child {
  border-bottom-right-radius: 6px;
}