/* ---- Monthly report and machine sheet (mod/monthly.js) ----
   The sheet on screen IS the printed page: white, black text, one column
   of Letter width, marks told apart by shape and hatch — never by hue
   (owner's rule 8). Nothing in the sheet uses a theme token, so dark and
   light mode show the same paper; only the controls above it follow the
   app. Print rules at the end make the app's shell get out of the way and
   fit the report to one Letter portrait page. */

/* the button on the KPI screen's window bar (mod/kpi.js) that opens the report */
/* no margin of its own: it sits in the KPI bar's button row beside the print
   button, level with it (owner, 2026-09-04: "not in alignment") */
.kpi-bar .kpi-report{width:auto; margin-top:0;}
/* while the KPI numbers are still loading the router ignores navigation
   (core/router.js `mounting`), so the button waits too — greyed, not gone */
.kpi:has(.kpi-content.loading) .kpi-report{pointer-events:none; opacity:.45;}

/* the controls: never printed */
.mrep-scroll{background:var(--bg);}
.mrep-controls{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 16px; max-width:880px; margin:0 auto;}
.mrep-controls button{width:auto;}
.mrep-controls button.small.ghost{min-width:36px; padding:7px 10px;}
.mrep-controls input[type="month"]{width:auto; min-width:150px; padding:7px 10px; font-size:14px;}
.mrep-controls select.mrep-tech{width:auto; min-width:150px; max-width:240px; padding:7px 10px; font-size:14px;}
.mrep-controls .spacer{flex:1 1 auto;}
.mrep-controls .segs{margin:0;}
.mrep-cap{font-size:12.5px; color:var(--muted);}
.mrep-host{padding:0 16px 24px; transition:opacity .15s;}
.mrep-host.loading{opacity:.5; pointer-events:none;}

/* the paper */
.mrep-page{
  color-scheme:light; background:#fff; color:#000;
  width:8.5in; max-width:100%; min-height:11in; margin:0 auto; padding:.45in;
  box-shadow:0 8px 30px rgba(0,0,0,.35); border:1px solid #9aa4b1;
  font-family:var(--sans); font-size:10.5px; line-height:1.35;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.mrep-page *{color:inherit;}
.mrep-page .mono{font-family:var(--mono);}

/* letterhead: the mark on its disc, the wordmark, the title, the meta */
.mrep-head{display:flex; align-items:flex-start; gap:14px; padding-bottom:8px; margin-bottom:10px; border-bottom:2px solid #15325F;}
.mrep-brand{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.mrep-head .wm-mark{width:34px; height:34px; box-shadow:0 0 0 1px #15325F;}
.mrep-wm{font-size:12px; letter-spacing:.14em; color:#334;}
.mrep-wm b{font-weight:800; letter-spacing:.09em; color:#15325F;}
.mrep-title{flex:1 1 auto; min-width:0;}
.mrep-title h1{font-size:20px; margin:0; letter-spacing:-.01em; line-height:1.1; color:#15325F;}
.mrep-line{font-size:11.5px; margin-top:3px; color:#000;}
.mrep-meta{flex:0 0 auto; text-align:right; font-size:9px; color:#333; line-height:1.4;}

/* the grid of sections: three columns; a wide section spans all three,
   the trend spans two and packs beside PM compliance (dense flow keeps
   the reading order in the DOM and the eye's order on the page the same) */
.mrep-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 16px; grid-auto-flow:row dense;}
.mrep-sec{min-width:0; break-inside:avoid;}
.mrep-sec.wide{grid-column:1 / -1;}
.mrep-sec.two{grid-column:span 2;}
.mrep-h{font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#000; margin:0 0 4px; padding-bottom:2px; border-bottom:1px solid #000;}
.mrep-sub{font-size:8.5px; color:#444; margin:0 0 5px;}
.mrep-h3{font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#333; margin:0 0 3px;}
.mrep-p{margin:0 0 5px; font-size:9.5px;}
.mrep-note{margin:2px 0 4px; font-size:10px; font-style:italic; color:#222;}
.mrep-fine{margin:3px 0 0; font-size:8.5px; color:#444;}
.mrep-cols{display:grid; gap:8px 10px;}
.mrep-cols.three{grid-template-columns:repeat(3, minmax(0,1fr));}
/* Each list in its own box (owner, 2026-09-03: "by technician, by department,
   top machines need to be boxed in so people dont get confused what data goes
   where"). The heading sits inside the frame, on a rule. */
.mrep-cols > div{min-width:0; border:1px solid #000; padding:6px 8px 7px; break-inside:avoid; background:#fff;}
.mrep-cols > div > .mrep-h3{margin:0 0 5px; padding-bottom:3px; border-bottom:1px solid #000;}
/* every section gets a light frame too, so a page of numbers reads as tiles */
.mrep-sec{border:1px solid #777; padding:6px 8px 8px;}
.mrep-sec > .mrep-h{margin-top:0;}

/* the one big number a section leads with */
.mrep-hero{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:2px 0 5px;}
.mrep-hero b{font-size:26px; font-weight:800; line-height:1; letter-spacing:-.02em;}
.mrep-hero span{font-size:10px; color:#222;}
.mrep-chg{font-family:var(--mono); font-size:9.5px;}

/* stat tiles */
.mrep-stats{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.mrep-stats.three{grid-template-columns:repeat(3, minmax(0,1fr));}
.mrep-stats.four{grid-template-columns:repeat(4, minmax(0,1fr));}
.mrep-stats.five{grid-template-columns:repeat(5, minmax(0,1fr));}
.mrep-stat{border:1px solid #000; padding:5px 7px; min-width:0;}
.mrep-stat .l{font-size:8px; text-transform:uppercase; letter-spacing:.06em; color:#333;}
.mrep-stat .v{font-size:17px; font-weight:700; line-height:1.15; margin:2px 0 1px;}
.mrep-stat .s{font-size:8.5px; color:#444; line-height:1.3;}

/* ranked bars: label | bar | value. Black ink; hours wear a hatch so a
   list of hours never reads as a list of counts */
.mrep-bars{display:flex; flex-direction:column; gap:3px;}
.mrep-brow{display:grid; grid-template-columns:minmax(0,46%) 1fr auto; gap:6px; align-items:center; min-height:12px; font-size:9.5px; break-inside:avoid;}
/* labels wrap to two lines instead of being cut off ("parts of it gets
   clipped" — owner, 2026-09-03) */
.mrep-bl{min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.2; overflow-wrap:anywhere;}
.mrep-bl b{font-family:var(--mono); font-weight:700; margin-right:5px;}
.mrep-bb{height:9px; min-width:0;}
.mrep-bar{display:block; height:100%; background:#222; border:1px solid #000; min-width:3px; box-sizing:border-box;}
.mrep-bar.hatched{background:repeating-linear-gradient(135deg, #222 0 2px, #fff 2px 4px);}
.mrep-bv{font-family:var(--mono); font-size:9.5px; font-variant-numeric:tabular-nums; min-width:26px; text-align:right;}

/* open work: the three states as solid / hatched / light, each outlined */
.mrep-stack{display:flex; height:9px;}
.mrep-stack .seg, .mrep-legend i.sw{display:block; height:100%; box-sizing:border-box; border:1px solid #000; min-width:3px;}
.mrep-stack .seg + .seg{border-left:0;}
.seg.u, .mrep-legend i.u{background:#222;}
.seg.a, .mrep-legend i.a{background:repeating-linear-gradient(45deg, #222 0 2px, #fff 2px 4px);}
.seg.p, .mrep-legend i.p{background:#c9c9c9;}
.mrep-legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:5px; font-size:8.5px; color:#222;}
.mrep-legend span{display:inline-flex; align-items:center; gap:5px;}
.mrep-legend i{display:inline-block; width:12px; height:8px;}
.mrep-legend i.col{background:#c9c9c9; border:1px solid #000; box-sizing:border-box;}
.mrep-legend i.ln{width:16px; height:0; border-top:1.5px solid #000;}
.mrep-legend i.ln.dashed{border-top-style:dashed;}

/* PM meter: the on-time share solid, the rest hatched, the words beside it */
.mrep-meter{height:8px; border:1px solid #000; background:repeating-linear-gradient(135deg, #fff 0 2px, #bbb 2px 4px); margin:2px 0 6px;}
.mrep-meter i{display:block; height:100%; background:#222;}

/* tables */
.mrep-table{width:100%; border-collapse:collapse; font-size:9.5px;}
.mrep-table th, .mrep-table td{padding:2px 4px; border-bottom:1px solid #bbb; text-align:left; vertical-align:top;}
.mrep-table th{font-size:8px; text-transform:uppercase; letter-spacing:.06em; color:#333; border-bottom:1px solid #000;}
.mrep-table .num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums;}
.mrep-table .chg{text-align:right; font-family:var(--mono); white-space:nowrap;}
.mrep-table.list td.mono{white-space:nowrap;}
.mrep-table.list tr{break-inside:avoid;}

/* the trend chart */
.mrep-chart{width:100%;}
.mrep-svg{display:block; width:100%; height:auto; overflow:visible;}
.mrep-svg .ax{stroke:#000; stroke-width:1;}
.mrep-svg .gl{stroke:#d8d8d8; stroke-width:.8;}
.mrep-svg .tk{font-size:8px; font-family:var(--mono); fill:#333;}
.mrep-svg .vl{font-size:8.5px; font-family:var(--mono); font-weight:700; fill:#000;}
.mrep-svg .col{fill:#c9c9c9; stroke:#000; stroke-width:.7;}
.mrep-svg .ln{fill:none; stroke:#000; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round;}
.mrep-svg .ln.dashed{stroke-dasharray:4 3;}
.mrep-svg .mk{fill:#fff; stroke:#000; stroke-width:1.2;}

/* the machine sheet's facts */
.mrep-page.sheet .mrep-sec{margin-bottom:10px;}
.mrep-kv{display:grid; grid-template-columns:auto 1fr auto 1fr; gap:2px 10px; margin:0; font-size:10px;}
.mrep-kv dt{color:#444; font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; align-self:baseline;}
.mrep-kv dd{margin:0; font-family:var(--mono); min-width:0; overflow-wrap:anywhere;}
.mrep-kv.small{grid-template-columns:auto 1fr; font-size:9px;}
.mrep-cols.tight{gap:6px 12px;}
.mrep-page.sheet{min-height:0;}

/* footer */
.mrep-foot{display:flex; justify-content:space-between; gap:14px; margin-top:12px; padding-top:5px; border-top:1px solid #000; font-size:8px; color:#333;}
.mrep-foot span:last-child{text-align:right; max-width:70%;}

/* phones: the paper scales to the screen, the grid to one column */
@media (max-width:720px){
  .mrep-page{padding:14px; min-height:0; font-size:11px;}
  .mrep-grid, .mrep-cols.three, .mrep-stats.four, .mrep-stats.five{grid-template-columns:1fr;}
  .mrep-sec.two{grid-column:auto;}
  .mrep-kv{grid-template-columns:auto 1fr;}
  .mrep-head{flex-wrap:wrap;}
  .mrep-meta{text-align:left;}
}

/* ---- print: Letter portrait, the shell out of the way, one page ---- */
/* ---- the technician review (owner, 2026-09-04): long lists that run on
   across pages — rows whole, header repeated, sections allowed to break ---- */
.mrep-list{width:100%; border-collapse:collapse; font-size:11.5px; margin-top:6px;}
.mrep-list th{text-align:left; font-weight:600; padding:4px 6px; border-bottom:1px solid var(--line); white-space:nowrap;}
.mrep-list td{padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:top;}
.mrep-list td.num, .mrep-list th.num{text-align:right; white-space:nowrap;}
.mrep-list td:first-child{white-space:nowrap;}
.mrep-dim{color:var(--muted); font-style:normal;}
.mrep-stats.four{grid-template-columns:repeat(4, 1fr);}
.mrep-months{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.mrep-month{display:inline-flex; flex-direction:column; align-items:center; min-width:52px; padding:4px 6px; border:1px solid var(--line); border-radius:6px;}
.mrep-month b{font-size:14px;} .mrep-month i{font-style:normal; font-size:10px; color:var(--muted);}
@media (max-width:719px){ .mrep-stats.four{grid-template-columns:repeat(2, 1fr);} .mrep-list{font-size:11px;} }

@media print{
  @page{size:Letter portrait; margin:.4in;}
  .mrep-sec.review{break-inside:auto; page-break-inside:auto;}
  .mrep-list{font-size:9px;} .mrep-list tr{break-inside:avoid; page-break-inside:avoid;}
  .mrep-list thead{display:table-header-group;}
  .mrep-stats.four{grid-template-columns:repeat(4, 1fr);}
  html.mrep-on, html.mrep-on body{height:auto !important; overflow:visible !important; background:#fff !important; color:#000 !important; display:block !important;}
  html.mrep-on .screen{display:none !important;}
  html.mrep-on #screen-module{display:block !important;}
  html.mrep-on #modBar, html.mrep-on #toast, html.mrep-on .mrep-controls, html.mrep-on .modal{display:none !important;}
  html.mrep-on .modroot{display:block !important; position:static !important;}
  html.mrep-on .mrep-scroll{overflow:visible !important; height:auto !important; flex:none !important; background:#fff !important;}
  html.mrep-on .mrep-host{padding:0;}
  .mrep-page{width:auto; max-width:none; min-height:0; margin:0; padding:0; box-shadow:none; border:0; overflow:visible;}
  .mrep-page.sheet .mrep-sec{break-inside:auto;}
  .mrep-page.sheet .mrep-sec > .mrep-h{break-after:avoid;}
  /* nothing is clipped on paper: a long report simply runs to a second page,
     each box whole, headings kept with their box */
  html.mrep-on .mrep-host, html.mrep-on .mrep-grid, .mrep-sec, .mrep-cols > div{overflow:visible !important;}
  .mrep-sec, .mrep-cols > div, .mrep-brow, .mrep-stat{break-inside:avoid; page-break-inside:avoid;}
  .mrep-h, .mrep-h3{break-after:avoid; page-break-after:avoid;}
  .mrep-svg{max-height:2.2in;}
  /* the frames cost a little height; on paper the sheet is packed tighter
     so a normal month still fits one page */
  .mrep-grid{gap:7px 9px;}
  .mrep-sec{padding:4px 7px 5px;}
  .mrep-cols > div{padding:4px 7px 5px;}
  .mrep-head{padding-bottom:6px; margin-bottom:7px;}
  .mrep-hero{margin:1px 0 3px;} .mrep-hero b{font-size:22px;}
  .mrep-foot{margin-top:8px;}
  .mrep-page{font-size:10px;}
}