/* overflow was `hidden` purely to clip child tables to the rounded corners. Paired with main's default min-width:auto that made a wide table push the whole shell sideways instead of scrolling: between the 760px mobile breakpoint and about 1000px the sidebar plus an unshrinkable main was wider than the viewport, so the page itself scrolled and the header and nav slid away with it. `auto` clips the same corners and lets the wide child scroll inside its own block. */ section.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; overflow: auto; } .block-header { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; display: flex; justify-content: space-between; align-items: center; } .empty-note { padding: 24px 20px; color: var(--ink-faint); font-size: var(--fs-title); } .job-row { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; cursor: pointer; } .job-row:last-child { border-bottom: none; } .job-row:hover { background: var(--bg); } .job-no { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink); font-weight: 600; } .job-meta { flex: 1; min-width: 0; } /* NEITHER OF THESE COULD BE READ AT 390px, and both overflowed their own box rather than being cut off - the screen sweep of 30.08.2026 reported 9 clipped elements on Jobs and 4 on Under Calibration, every one of them a customer name or an instrument list running past its container. They are treated differently on purpose. The customer NAME wraps, because "M/s CHINTAMANI METAL UDYOG PVT. LTD" truncated to "M/s CHINTAMANI META…" is two customers away from being wrong, and a second line costs nothing. The instrument list is a SUMMARY - it already reads "Pressure Gauge, Caliper, Temperature Controll" - so it ends in an ellipsis, which at least says that it was cut. */ .job-cust { font-size: var(--fs-title); font-weight: 500; overflow-wrap: anywhere; } .job-sub { font-size: var(--fs-body); color: var(--ink-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A certificate number and a ULR are identifiers: they must not be shortened. .job-no sits in a flex row and wraps safely. td.mono DELIBERATELY EXCLUDED, and this is a mistake worth recording. It was in this rule for twenty minutes on 30.08.2026 and made things worse: `table.data-table td.mono` is `width: 1%; white-space: nowrap`, the shrink-to-fit idiom, and `overflow-wrap: anywhere` changes the MIN-CONTENT width to one character. The column then collapsed while nowrap kept the text full length, so Certificates began clipping at 1600px and 1280px where it previously only clipped at 390px. The sweep caught it on the next run. The narrow case is handled below, where there is genuinely no room. */ .job-no { overflow-wrap: anywhere; } @media (max-width: 760px) { /* At 390px a five-column table cannot give an identifier a whole line, so here - and only here - it wraps. Nothing is shortened; the characters move to a second line rather than past the edge of their cell. */ table.data-table td.mono { white-space: normal; overflow-wrap: anywhere; } /* THE TABLE SCROLLS, THE PAGE DOES NOT. Measured at 390px on 02.09.2026: NABL Scope pushed the document to 832px and the Certificate Desk to 413px, so the whole page slid sideways and the navigation went with it. Wrapping cannot fix it - a scope row has nine columns and there is no width at which they all fit - so the table is given its own scroll box instead of being allowed to widen the body. display:block is what makes the element scrollable; the rows inside still lay out as a table, so nothing is restacked and no column is hidden. Every character remains reachable, which is why this is not the same as truncating. Scoped to #main and to this breakpoint: the desktop measurement showed no overflow on any screen, and a rule that changed desktop would be fixing something that was not broken. */ #main table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } .stage-thread { display: flex; align-items: center; gap: 3px; flex-shrink: 0; } .stage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .stage-dot.done { background: var(--brand); } .stage-dot.current { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-tint); } .badge { font-size: var(--fs-label); font-weight: 600; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .badge.draft { background: #EEF0F2; color: var(--ink-soft); } .badge.pending_review, .badge.pending_approval { background: var(--amber-tint); color: var(--amber); } .badge.accepted, .badge.scheduled, .badge.in_progress { background: var(--brand-tint); color: var(--brand); } .badge.certified, .badge.dispatched { background: var(--success-tint); color: var(--success); } .badge.rejected, .badge.cancelled { background: var(--danger-tint); color: var(--danger); } /* WHICH FACILITY A SCOPE ROW BELONGS TO. Prominent on purpose: rows that are identical in measurand and range differ only by this and by the method, and a faint suffix after the range is what they had before - not enough when the range beside it reads the same. Two hues rather than one tinted and one plain, so the eye separates them without reading the word. */ .fac-badge { display: inline-block; font-size: var(--fs-label); font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; border: 1px solid transparent; } .fac-badge.lab { background: var(--brand-tint); color: var(--brand); border-color: rgba(23,84,110,0.20); } .fac-badge.site { background: var(--violet-tint); color: var(--violet); border-color: rgba(110,90,168,0.22); } .back-link { font-size: var(--fs-body); color: var(--brand); cursor: pointer; margin-bottom: 16px; display: inline-block; } .detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .detail-header .job-no { font-size: var(--fs-head); } .action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; padding: 20px; } .kv-grid .k { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; } .kv-grid .v { font-size: var(--fs-title); font-weight: 500; } /* The worklist carried class="grid", for which no CSS was ever written - so the browser laid it out as an unstyled table and the cells collided (instrument name overrunning Serial, Range running into Points). It uses the app's real table class now, with widths that stop long instrument names from crushing the narrow numeric columns. */ table.wl-table { table-layout: fixed; } table.wl-table th, table.wl-table td { padding: 9px 10px; vertical-align: middle; word-break: break-word; } table.wl-table th:nth-child(1), table.wl-table td:nth-child(1) { width: 52px; white-space: nowrap; } table.wl-table th:nth-child(2), table.wl-table td:nth-child(2) { width: 26%; } table.wl-table th:nth-child(3), table.wl-table td:nth-child(3) { width: 90px; } table.wl-table th:nth-child(4), table.wl-table td:nth-child(4) { width: 120px; } table.wl-table th:nth-child(5), table.wl-table td:nth-child(5) { width: 74px; text-align: center; white-space: nowrap; } table.wl-table th:nth-child(6), table.wl-table td:nth-child(6) { width: 130px; } table.wl-table th:nth-child(7), table.wl-table td:nth-child(7) { width: 130px; } table.wl-table th:nth-child(8), table.wl-table td:nth-child(8) { width: 150px; } table.wl-table select { max-width: 100%; } /* ---- Excel-oriented observation grid ---- 15 columns of readings in a plain table meant the point you were typing against scrolled out of sight to the left and the header scrolled off the top. Freezing both, and making a cell look and behave like a spreadsheet cell, is what the bench asked for. */ .xl-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; } table.xl-grid { border-collapse: separate; border-spacing: 0; font-size: var(--fs-body); width: max-content; min-width: 100%; } table.xl-grid th, table.xl-grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; background: #fff; } /* ONE HEAD ROW AGAIN, 23.09.2026: "head row 2 also remove". The two-row offset that lived here went with it - a single row sticks at top:0, which is what the rule below has always said. Kept as a note because the fault it fixed is not obvious: every head cell sticking to top:0 is correct until the head has a second row, and then the second sits on the first. */ table.xl-grid thead th { position: sticky; top: 0; z-index: 3; background: #F4F7F9; color: var(--ink-soft); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 7px 8px; text-align: center; white-space: nowrap; } /* the three identity columns stay put while the observations scroll */ table.xl-grid th.xl-freeze, table.xl-grid td.xl-freeze { position: sticky; z-index: 2; background: #FBFCFD; } table.xl-grid thead th.xl-freeze { z-index: 4; background: #EEF3F6; } table.xl-grid .xl-c1 { left: 0; width: 150px; min-width: 150px; } /* WIDER SINCE THE HEAD CARRIES PICKERS. 23.09.2026: "and units overlapping it" - a select and a unit box side by side in 110px is two controls in one control's room. Nothing sticks to the left of this column, so widening it moves no other offset. */ table.xl-grid .xl-c2 { left: 150px; width: 196px; min-width: 196px; box-shadow: 1px 0 0 var(--line); } table.xl-grid td.xl-freeze { padding: 6px 8px; font-size: var(--fs-body); } table.xl-grid td.xl-obs { width: 74px; min-width: 74px; } table.xl-grid td.xl-obs input { width: 100%; height: 30px; border: 0; outline: 0; margin: 0; padding: 0 7px; font-size: var(--fs-body); font-variant-numeric: tabular-nums; text-align: right; background: transparent; border-radius: 0; box-shadow: none; } table.xl-grid td.xl-obs input:focus { box-shadow: inset 0 0 0 2px var(--brand); background: #fff; } table.xl-grid td.xl-obs.xl-filled { background: #FCFDFE; } /* Average and standard deviation are the answer, so they stay in view at the right edge while the ten observation columns scroll under them. */ table.xl-grid td.xl-calc, table.xl-grid th.xl-calc { width: 92px; min-width: 92px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; background: #FBFCFD; color: var(--ink-soft); position: sticky; z-index: 2; } table.xl-grid th.xl-calc { z-index: 4; background: #EEF3F6; } table.xl-grid .xl-r2 { right: 92px; box-shadow: -1px 0 0 var(--line); } table.xl-grid .xl-r1 { right: 0; } table.xl-grid tr:hover td { background: #F7FAFB; } table.xl-grid tr:hover td.xl-obs input:focus { background: #fff; } /* The SRF grid: same spreadsheet shell as the observation sheet, but its own column widths. Sl., Type and Instrument Name stay put while the remaining ten columns scroll, so you always know which instrument a field belongs to - 13 columns will not fit any screen. */ /* Discipline queues. An item on hold stays where it is, flagged - it has not gone away, it simply is not work anyone can pick up today. */ .dq-card { margin-bottom: 14px; } .dq-locked { opacity: 0.72; } .dq-ro { font-size: var(--fs-label); color: var(--amber); font-weight: 400; } .dq-counts { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); } .dq-count { flex: 1; min-width: 96px; background: var(--card, #fff); padding: 9px 12px; } .dq-n { display: block; font-family: var(--mono); font-size: var(--fs-head); font-variant-numeric: tabular-nums; } .dq-k { display: block; font-size: var(--fs-label); color: var(--ink-faint); margin-top: 1px; } .dq-amber .dq-n { color: var(--amber); } .dq-items { } .dq-item { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); cursor: pointer; } .dq-item:last-child { border-bottom: 0; } .dq-item:hover { background: var(--brand-tint, rgba(23,84,110,.06)); } .dq-onhold { background: rgba(198,124,20,0.06); } .dq-job { min-width: 150px; font-size: var(--fs-body); } .dq-inst { flex: 1; min-width: 120px; } .dq-state { min-width: 130px; color: var(--ink-soft); } .dq-sub { font-size: var(--fs-label); color: var(--ink-faint); } .dq-hold { font-size: var(--fs-label); color: var(--amber); text-align: right; } /* The hold action is its own control, not the whole row. Clicking an instrument means "open the work"; placing a hold is a deliberate act. */ .dq-holdbtn { font-size: var(--fs-label); color: var(--ink-faint); border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px; white-space: nowrap; } .dq-holdbtn:hover { color: var(--amber); border-color: var(--amber); } .hold-rec { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; } .hold-open { border-left: 3px solid var(--amber); } .hold-head { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-body); } .hold-age { margin-left: auto; font-size: var(--fs-label); color: var(--ink-faint); } .hold-line { font-size: var(--fs-body); color: var(--ink-soft); margin-top: 4px; line-height: 1.5; } .hold-warn { font-size: var(--fs-body); color: var(--amber); margin-top: 5px; } .hold-lookback { margin-top: 8px; padding: 10px 12px; border-radius: 6px; background: rgba(179,38,30,0.05); border: 1px solid rgba(179,38,30,0.2); font-size: var(--fs-body); } .srf-sec { font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); } .srf-radios { display: flex; gap: 20px; flex-wrap: wrap; } .srf-radios label { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; font-size: var(--fs-body); margin: 0; } .srf-sub { font-size: var(--fs-label); color: var(--ink-faint); margin-top: 2px; } .srf-warn { font-size: var(--fs-label); color: var(--amber); margin-top: 2px; } .srf-grid tbody tr { cursor: pointer; } .srf-editor { padding: 18px 22px 8px; overflow-y: auto; } .srf-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 22px; } /* The instrument-specific details editor is a list of label/value rows, so it takes the whole grid width rather than sitting in one column. */ .srf-span-2 { grid-column: 1 / -1; } /* One certificate per instrument, so the job screen lists them. Each row names the instrument as well as the number: on a five-instrument request five certificate numbers alone tell nobody which is which. */ .cert-list { display: flex; flex-direction: column; gap: 6px; } .cert-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; flex-wrap: wrap; } .cert-row .cert-what { flex: 1 1 220px; min-width: 0; } .cert-row .cert-what .sub { font-size: var(--fs-body); color: var(--ink-faint); } .cert-row .cert-ulr { flex: 0 1 auto; font-size: var(--fs-body); color: var(--ink-faint); } .srf-field label { display: block; margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; color: var(--ink-soft); } .srf-field input, .srf-field select { width: 100%; margin: 0; } .srf-hint { font-size: var(--fs-label); color: var(--ink-faint); margin-top: 4px; line-height: 1.45; } .srf-grid tbody tr:hover { background: var(--brand-tint, rgba(23,84,110,.06)); } .srf-wrap { max-height: 58vh; } table.srf-grid { min-width: 1500px; } table.srf-grid th, table.srf-grid td { padding: 5px 7px; vertical-align: middle; } table.srf-grid td input, table.srf-grid td select { width: 100%; margin: 0; padding: 5px 7px; font-size: var(--fs-body); border-radius: 4px; } table.srf-grid td input:focus, table.srf-grid td select:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--brand); } table.srf-grid .srf-fix { position: sticky; z-index: 2; background: #FBFCFD; } table.srf-grid thead .srf-fix { z-index: 4; background: #EEF3F6; } table.srf-grid .srf-c1 { left: 0; width: 44px; min-width: 44px; text-align: center; } table.srf-grid .srf-c2 { left: 44px; width: 108px; min-width: 108px; } table.srf-grid .srf-c3 { left: 152px; width: 190px; min-width: 190px; box-shadow: 1px 0 0 var(--line); } .xl-hint { font-size: var(--fs-label); color: var(--ink-faint); padding: 6px 2px 0; } table.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); } /* Gurudeep, 17.08.2026: "best fit column width, reduce the white space as much as possible." Two changes do nearly all of it. The padding was 20px each side, so a nine-column table spent 360px on padding alone - and because the table is width:100%, that shortfall came out of the columns holding actual prose, which then wrapped while the short code columns sat a third empty. And `width:1%` with nowrap is the browser's own best-fit idiom in an auto-layout table: the column shrinks to its content and the slack goes to the columns that need it. */ table.data-table th { text-align: left; white-space: nowrap; padding: 7px 10px; font-size: var(--fs-label); /* Gurudeep, 18.08.2026: small type rather than capitals. Uppercase costs about 12% more width for the same words, which is what made 'ISSUE DATE' break across two lines, and it reads slower. */ letter-spacing: 0.02em; color: var(--ink-faint); border-bottom: 1px solid var(--line); } table.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } /* short, fixed-shape values: numbers, codes, dates, serials */ /* `width: 1%` with `white-space: nowrap` is the shrink-to-fit idiom, and it was not shrinking to fit: measured on the Certificates table at 1600px, the certificate-number cell was a 20px box holding 128px of text, which spilled across the next column. 1% of 1298px is 13px, and the browser took it literally rather than raising it to the content's width. min-width: max-content is what makes the idiom hold - the same cell then measures 138px around 138px of text, overflow zero. Measured before and after with the screen harness rather than reasoned about; two earlier attempts at this fix were wrong. */ table.data-table td.mono, table.data-table td.fit, table.data-table th.fit { width: 1%; white-space: nowrap; min-width: max-content; } table.data-table tr:last-child td { border-bottom: none; } .instrument-block { border-bottom: 1px solid var(--line); padding: 18px 20px; } .instrument-block:last-child { border-bottom: none; } .instrument-name { font-weight: 600; font-size: var(--fs-title); margin-bottom: 10px; } .point-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: var(--fs-body); border-top: 1px dashed var(--line); } .point-row:first-of-type { border-top: none; } .point-label { flex: 1; } .point-stat { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink-soft); } /* ---- the master's own readings ---- Gurudeep, 23.09.2026: "UUC and master observation should be interchangeable". The row is drawn like the "as read" row beside it - the same table, one step quieter than the item's - because it is a second set of readings on the same points and not a second table. .xl-raw carries no rule of its own either; both rely on .xl-obs for the cell. This adds only what tells the two apart. */ tr.xl-stdrow td { background: color-mix(in srgb, var(--brand) 4%, transparent); } tr.xl-stdrow .xl-c2 { font-style: italic; } /* ---- the observations group heading ---- Gurudeep, 23.09.2026: "all observation should come under 1 coloum 1 to 10". One heading spanning the numbered repeat columns, so ten columns read as one quantity rather than ten. */ th.xl-obsgroup { text-align: center; letter-spacing: .06em; border-bottom: 1px solid var(--line); } /* ---- the two column pickers, in the head ---- Gurudeep, 23.09.2026: "i asked you do it in observation block itself", then "no seperate selection block". The heading IS the control, so there is nothing above the table to keep in step with it. Borderless, so a head full of form furniture still reads as a heading. */ /* SIDE BY SIDE, NOT STACKED. A picker over a unit box made the head row twice its height, and a sticky head is offset by a height that has to be known. */ /* A ROW, LAID OUT, not two percentages hoping to fit. The select takes the room that is left and the unit box is given a fixed, small one - a unit is three characters and a column name is twenty. */ th.xl-headpick { padding: 2px 4px; } /* The flex lives on a DIV inside the cell. A with display:flex leaves the table's column model and takes the grid's alignment with it. */ th.xl-headpick .xl-pickwrap { display: flex; align-items: center; gap: 4px; } th.xl-headpick select, th.xl-headpick input { border: 0; background: transparent; font: inherit; color: inherit; padding: 0 2px; border-radius: 0; height: 24px; min-width: 0; } th.xl-headpick select { flex: 1 1 auto; cursor: pointer; font-weight: 600; } /* THE UNIT IS A DROPDOWN TOO, and it is the narrow one. It was a text box until 23.09.2026 - "unit dropdown not working in observation sheet" - so the width rule that gave 52px to an now has to name the control by its class, or the unit select would take half the cell from the column name. */ th.xl-headpick select.obs-uuc-unit, th.xl-headpick select.obs-ref-unit, th.xl-headpick input { flex: 0 0 64px; width: 64px; font-weight: 400; opacity: .75; font-size: var(--fs-label); text-align: right; } th.xl-headpick select:focus-visible, th.xl-headpick input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }