, not a direct child of , so hiding ancestors by display:none had been hiding the dialog right along with them — a blank printout). Then make the dialog and everything inside it visible again and pull it out to the page origin, since it would otherwise still print at its normal (now-invisible-but-still-occupying-space) position partway down the page. visibility:hidden alone still leaves every hidden element's box height in the flow, though — on a page with a long table behind the dialog, that leftover height is tall enough to spill onto a second, entirely blank printed page. display:none on .page's own direct children (everything except the dialog) removes that height outright, while .page and body themselves stay un-hidden so the dialog inside can still render. */ body.printing-modal * { visibility: hidden; } body.printing-modal dialog[open], body.printing-modal dialog[open] * { visibility: visible; } body.printing-modal main.page > *:not(dialog) { display: none; } body.printing-modal dialog[open] { position: absolute; left: 0; top: 0; display: block; width: 100%; max-width: 100%; box-shadow: none; border: none; margin: 0; padding: 0; } } /* ---- Blank QR tag sheets ---- */ .tags-toolbar-controls { display: flex; align-items: center; gap: 0.6rem; } .tags-toolbar-controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-muted); } .tags-toolbar-controls input { width: 4.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); } .tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; } .tag-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); position: relative; padding: 0.7rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .tag-brand { width: 100%; box-sizing: border-box; min-height: 1.32rem; padding: 0.28rem 0.35rem; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: #123c32; color: #fff; white-space: nowrap; font-size: 0.66rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; } .tag-brand strong { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.12em; } .tag-qr-row { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; } .tag-side-brand { writing-mode: vertical-rl; transform: rotate(180deg); color: #13795b; font-size: 0.56rem; font-weight: 900; line-height: 1; letter-spacing: 0.13em; text-align: center; text-transform: uppercase; } .tag-qr { width: 200px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; background: #fff; border-radius: 3px; } .tag-token { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; font-weight: 600; color: var(--accent); letter-spacing: 0.03em; } .tag-fields { width: 100%; display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.3rem; } .tag-field { display: flex; flex-direction: column; gap: 0.2rem; } .tag-field-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .tag-field-line { border-bottom: 1px solid var(--text); height: 1.3rem; } @media print { .tags-grid { grid-template-columns: repeat(3, 1fr); gap: 8mm; } .tag-card { break-inside: avoid; border-color: #999; padding: 5mm; gap: 3mm; } .tag-brand { color: #fff !important; background: #123c32 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .tag-side-brand { color: #13795b !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .tag-token { font-size: 0.85rem; color: #000; } .tag-field-label { color: #000; } .tag-field-line { border-bottom-color: #000; height: 8mm; } } /* ---- Plant directory (read-only report) ---- */ .directory-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; } .dir-search { flex: 1; min-width: 14rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); } /* Enough columns (13) that forcing every cell to one line always overflows into a horizontal scrollbar, regardless of window width. Letting cells wrap instead lets the browser's normal table layout fit it to the page. */ .dir-table { width: 100%; border-collapse: collapse; } .dir-table th, .dir-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); white-space: normal; } .dir-table td.dir-code { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; } .c-code, .item-code { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; white-space: nowrap; } .dir-table tbody tr:hover { background: rgba(127, 127, 127, 0.08); } .dir-inactive { color: var(--text-muted); font-style: italic; } .dir-new-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0.1rem 0.4rem; vertical-align: middle; } .print-timestamp { display: none; } @media print { /* @page has no selector to scope by — this is the one rule in effect for every printed page app-wide. Landscape suits the wide Directory/Dashboard tables; no other page currently needs a different orientation. */ @page { size: A4 landscape; margin: 12mm; } body, .page { background: #fff; color: #000; } /* position:fixed anchors this to the printed page's own corner (not the document's normal flow), so it lands top-right on every printed page — including inside a printed modal, where the timestamp paragraph sits near the bottom of the dialog's markup but still needs to appear at the top of the printed sheet like every other report's timestamp does. */ .print-timestamp { display: block; position: fixed; top: 0; right: 0; margin: 0; font-size: 0.75rem; color: #444; text-align: right; } /* Row separators default to a light theme-based grey (or a dark-mode tint) that some printers/PDF engines render as barely-there — force a dependable faint grey on paper regardless of which theme was active. */ th, td { border-bottom: 1px solid #bbb; } .dir-table th:last-child, .dir-table td:last-child { display: none; } /* On screen, nowrap + a scrolling container keep the report tidy; paper can't scroll, so anything wider than the page just gets clipped off the edge. Force the table back to the page width and let cells wrap instead. */ .table-scroll { overflow: visible; } .dir-table { table-layout: fixed; width: 100%; } .dir-table th, .dir-table td { color: #000; white-space: normal; word-break: break-word; font-size: 0.72rem; padding: 0.3rem 0.4rem; } /* The stat-panel bar charts (Downtime History's By Department/Symptoms Summary) fill each bar with an inline background-color, with the value printed in white text on top of it — if the browser's print dialog has "Background graphics" switched off (a per-print, often-default setting outside this app's control), that fill silently disappears and the white-on-nothing text goes with it, making the whole chart look empty. print-color-adjust:exact forces Chrome/Firefox to keep background colors regardless of that toggle, so the bars print reliably either way. */ .bar-chart * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .inline-form { display: inline-block; margin: 0; } .inline-form select { padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius); } .table-scroll { overflow-x: auto; } #sharedIssuesList table { width: 100%; } .shared-issue-detail-link { border: 0; padding: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; } .shared-issue-detail-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.75rem; } .shared-issue-detail-field { margin-bottom: 0.75rem; overflow-wrap: anywhere; } .shared-issue-detail-value { white-space: pre-wrap; } .shared-issue-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; } .shared-issue-photo-thumb { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem; cursor: pointer; } .shared-issue-photo-thumb img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius); } .shared-issue-photo-modal img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto 1rem; object-fit: contain; } #sharedIssueDetailModal h2, #sharedIssuePhotoModal h2 { margin: 0 0 0.75rem; } #sharedIssueDetailRetry[hidden] { display: none !important; } .shared-maintenance-table { width: 100%; } .shared-maintenance-table td { white-space: pre-wrap; min-width: 4.5rem; } .shared-maintenance-table th { white-space: normal; } @media print { .shared-maintenance-table { table-layout: fixed; } .shared-maintenance-table th, .shared-maintenance-table td { min-width: 0; overflow-wrap: anywhere; font-size: 0.68rem; padding: 0.3rem; } } .shared-issue-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; } .shared-issue-filters label { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; font-size: 0.88rem; } .shared-issue-filters select, .shared-issue-filters input { width: 100%; min-width: 0; min-height: 2.5rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; } #sharedIssuesList th, #sharedIssuesList td { white-space: normal; } #sharedIssuesList tbody tr:hover, #sharedIssueStats tbody tr:hover { cursor: default; } @media print { #sharedIssuesList table { table-layout: fixed; } #sharedIssuesList th, #sharedIssuesList td { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 0.68rem; padding: 0.3rem; } } .contact-form { display: flex; gap: 0.35rem; align-items: center; } .contact-form input { padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius); width: 9rem; font-size: 0.85rem; } .contact-form button { font-size: 0.75rem; padding: 0.25rem 0.6rem; } /* ---- Nav hamburger toggle (hidden on desktop/tablet; see mobile block below) ---- */ .nav-toggle { display: none; width: 2.3rem; height: 2.3rem; flex-shrink: 0; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1.2rem; line-height: 1; color: var(--text); cursor: pointer; } /* Maintenance Due / Issues / Assets shortcuts, kept reachable without opening the hamburger — same links still live inside .topnav too, so this is a redundant fast-path, not a replacement. Sits as its own full-width row below the topbar (below the app name), not squeezed into the topbar row itself. Desktop/tablet already show the full nav inline, so this only needs to exist below the mobile breakpoint. */ .nav-quick-icons { display: none; gap: 0.4rem; padding: 0 0.8rem 0.6rem; } .nav-quick-icon { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.4rem 0.2rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1.15rem; line-height: 1; text-decoration: none; color: var(--text-muted); } .nav-quick-icon span { font-size: 0.68rem; font-weight: 700; line-height: 1; white-space: nowrap; } .nav-quick-icon.is-active { background: var(--nav-highlight-tint); border-color: var(--nav-highlight); color: var(--nav-highlight); } /* Workspace switch gets its own colors, distinct from the generic nav highlight above and from the app's normal green accent buttons, so Downtime vs Maintenance reads at a glance instead of blending in. */ .nav-workspace-icons .nav-quick-icon-downtime.is-active { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); } .nav-workspace-icons .nav-quick-icon-maintenance.is-active { background: var(--clear-tint); border-color: var(--clear-border); color: var(--clear-border); } /* ---- Small-screen fit (phones + narrow tablets) ---- */ @media (max-width: 900px) { .topbar-inner { padding: 0.6rem 0.8rem; gap: 0.9rem; flex-wrap: wrap; } .nav-toggle { display: inline-flex; } .nav-quick-icons { display: flex; } .topnav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0.15rem; margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); } .topnav.is-open { display: flex; } .topnav a, .nav-dropdown-toggle { white-space: normal; padding: 0.6rem 0.3rem; } .nav-dropdown-toggle { width: 100%; justify-content: space-between; } .nav-dropdown-menu { position: static; display: none; box-shadow: none; border: none; min-width: 0; padding-left: 0.9rem; } .nav-dropdown-menu.is-open { display: flex; } .page { padding: 1rem 0.8rem 2.5rem; } .brand-company { display: none; } /* Any bare table not already wrapped in .table-scroll gets its own horizontal scroll instead of blowing out the page width. */ .card, .entry-panel { overflow-x: auto; } } /* ---- Quick Add ---- */ .quick-add-form { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; } .quick-add-form input[type="text"] { width: 100%; max-width: 24rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; } .quick-add-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* ---- Quick Add / Quick Tag ---- */ .quick-add-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: 34rem; } .quick-add-form input[type="text"] { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; } .quick-add-tagrow { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .quick-add-actions { display: flex; gap: 0.6rem; } .qa-new-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; letter-spacing: 0.08em; color: var(--accent); } .qt-path { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem 1rem; } .qt-path label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--text-muted); } .qt-path select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); } /* ---- Selectable table rows (click = highlight one, Shift+click = range) ---- */ table.selectable-rows tbody tr { cursor: default; } table.selectable-rows tbody tr.row-selected > td { background: color-mix(in srgb, var(--accent) 26%, transparent); } table.selectable-rows tbody tr.row-selected > td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* ---- Reports ---- */ .report-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .report-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 1.25rem; } .report-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--text-muted); } .report-field select, .report-field input { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; color: var(--text); background: var(--surface); } .report-extra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; } .report-heading { font-size: 1.1rem; margin: 0.5rem 0 0.3rem; } .report-chart { min-height: 60px; margin: 0.5rem 0 1.25rem; } .report-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .report-table th, .report-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .report-table th { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Production Values' "Last 7 Days" grid — product rows x day columns, a bar per day (today highlighted) with a trend line drawn over the same bars, plus Trend and Today summary columns. See production.php's loadProd7d(). */ .prod7d-grid { display: grid; grid-template-columns: minmax(90px, 1.4fr) repeat(7, minmax(28px, 1fr)) minmax(52px, 0.9fr) minmax(52px, 0.9fr); width: 100%; } .prod7d-grid .cell { padding: 6px 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; } .prod7d-grid .cell.head { color: var(--text-muted); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; align-items: flex-end; justify-content: center; padding-bottom: 8px; } .prod7d-grid .cell.head.label, .prod7d-grid .cell.head.trend, .prod7d-grid .cell.head.today { justify-content: flex-start; } .prod7d-grid .cell.label { font-weight: 600; font-size: 0.85rem; } /* .bar-cell isn't a .cell (it's a child of the .row-days cell, not a grid column itself) so it needs its own rule — without it, only the header cell picked up the tint and the "today" column looked highlighted for one row instead of running the full height of the table like every other row's .cell.today-col already does. */ .prod7d-grid .cell.today-col, .prod7d-grid .bar-cell.today-col { background: rgba(79, 154, 124, 0.1); } .prod7d-grid .row-days { position: relative; grid-column: span 7; display: grid; grid-template-columns: repeat(7, 1fr); height: 44px; padding: 0; border: none; } .prod7d-grid .row-days.with-nums { height: 60px; } .prod7d-grid .row-days svg.prod7d-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .prod7d-grid .bar-cell { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 0 6px; } .prod7d-grid .bar-fill { width: 100%; border-radius: 2px 2px 0 0; background: rgba(147, 161, 156, 0.35); } .prod7d-grid .bar-num { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: 0.62rem; color: var(--text-muted); } .prod7d-grid .total-row { border-top: 2px solid var(--border); border-bottom: none; font-weight: 700; } .prod7d-grid .trend-badge { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 0.82rem; } .prod7d-grid .trend-badge.up { color: var(--accent); } .prod7d-grid .trend-badge.down { color: #c0622a; } /* The 7-day graph and the Period Totals table sit side by side on a wide screen; each is a plain flex item so they wrap to stacked automatically on a narrow one, no separate responsive rule needed. */ .prod-panels-row { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1.25rem; } #prod7dPlantLabel, #prodTotalsPlantLabel { color: var(--text-muted); font-size: 0.85rem; font-weight: 400; } .prod-panels-row .card { flex: 1 1 480px; min-width: 0; margin-top: 0 !important; } /* Squeezed into half the page width next to the 7-day graph — same content-fit reasoning as .stat-panel-table (Downtime History's By Department table): no forced nowrap-and-scroll, columns shrink to fit and long values wrap instead. */ #prodTotalsTable { table-layout: auto; width: 100%; } #prodTotalsTable th, #prodTotalsTable td { text-align: right; white-space: normal; word-break: break-word; padding: 0.4rem 0.5rem; } #prodTotalsTable th:first-child, #prodTotalsTable td:first-child { text-align: left; } #prodTotalsTable tbody tr.total-row td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 700; } .report-table tbody tr:hover { background: rgba(127,127,127,0.08); } .report-link { color: var(--accent); text-decoration: none; } .report-link:hover { text-decoration: underline; } .event-detail-link, .task-detail-link { color: var(--accent); font-weight: 600; text-decoration: none; } .event-detail-link:hover, .task-detail-link:hover { text-decoration: underline; } .report-single { font-size: 1rem; color: var(--text); } /* ---- Tables that must fit the window width with no horizontal scroll ---- */ /* width:100% (not nowrap) lets the browser's normal table-layout algorithm shrink columns to fit — long content (Equipment/Component/Comment) wraps onto a second line instead of forcing the table wider than the viewport. Used by the Dashboard's Open/History tables and the shared (no-login) equivalent in shared_view.php. */ .fit-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .fit-table th, .fit-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); } .fit-table th { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Stat tiles (Open vs Resolved) */ .stat-tiles { display: flex; flex-wrap: wrap; gap: 1rem; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 8rem; } .stat-num { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-num.stat-warn { color: var(--safety, #a8631a); } .stat-num.stat-ok { color: var(--accent); } .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .report-untagged { margin-top: 1rem; } .report-untagged h3 { font-size: 0.95rem; margin: 0 0 0.4rem; } .report-untagged ul { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; color: var(--text-muted); columns: 2; } .company-switch-form { display: inline-flex; margin: 0; } .company-edit-form { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 0.8fr) auto; gap: 0.4rem; align-items: center; min-width: 25rem; } .company-edit-form input { min-width: 0; padding: 0.42rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--surface); } @media (max-width: 700px) { .company-edit-form { grid-template-columns: 1fr; min-width: 12rem; } } /* Public fault-reporting: "already reported" cards shown before submitting a duplicate. Colors match public_report_status.php's own STATUS_COLOR map, so a public reporter sees the same status color scheme whether they're about to submit or checking back later via their status link. */ .public-existing-item { padding: 0.75rem 0; border-bottom: 1px solid var(--border); } .public-existing-item:last-child { border-bottom: none; } .public-status-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.55rem; border-radius: 999px; margin-bottom: 0.35rem; color: #fff; } .public-status-badge.reported { background: #b8860b; } .public-status-badge.in-progress { background: #2f6f9e; } .public-status-badge.active-downtime { background: var(--danger); } .public-existing-description { font-weight: 600; } .public-existing-comment, .public-existing-timing, .public-existing-expected, .public-existing-reference { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.15rem; } .public-existing-update { margin-top: 0.55rem; padding: 0.55rem 0.65rem; border-left: 3px solid #2f6f9e; background: color-mix(in srgb, #2f6f9e 9%, var(--surface)); border-radius: 0 var(--radius) var(--radius) 0; white-space: pre-wrap; } .public-existing-guidance { margin: 0 0 0.75rem; } /* Asset document upload dialog */ .asset-document-form { min-width: 0; } #assetDocumentModal { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; } .asset-document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; } .asset-document-grid > label { display: grid; gap: 0.35rem; min-width: 0; } .asset-document-grid input, .asset-document-grid select, .asset-document-grid textarea { box-sizing: border-box; width: 100%; min-width: 0; } .asset-document-grid textarea { resize: vertical; } .asset-document-wide { grid-column: 1 / -1; } .asset-document-file input[type="file"] { padding: 0.55rem; } .asset-document-help, .asset-document-actions, #assetDocumentStatus { margin: 0; } @media (max-width: 640px) { #assetDocumentModal { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); } .asset-document-grid { grid-template-columns: minmax(0, 1fr); } }