.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 25, 32, 0.5); display: flex; align-items: center; justify-content: center; z-index: 50; } /* Dialogs were one fixed 420px x 85vh box regardless of what was in them, so anything with more than a handful of fields had to be scrolled - on a form the operator fills in every day. Sizes now follow content: .modal short forms, unchanged in feel but taller .modal.wide two-column forms and grids .modal.full the point/parameter editors, which are tables */ /* Gurudeep, 17.08.2026: every dialog opens larger, for visibility. 460px was a phone-sized column on a 1600px screen and put half of most forms below the fold. */ .modal { background: var(--surface); border-radius: 12px; padding: 22px 26px; width: min(880px, 94vw); max-width: 94vw; max-height: 94vh; overflow-y: auto; } .modal.roomy { width: min(1040px, 95vw); } /* Same padded layout as .roomy, wider: for a modal whose content is a table rather than a form column. */ .modal.roomier { width: min(1280px, 96vw); } /* Gurudeep, 17.08.2026: "all the clicks in personnel should open a large screen where sliding is not needed." These dialogs are plain padded modals, not the .full/.wide flex layout, so they get width and height without losing their padding. */ .modal.sheet { width: min(1400px, 96vw); max-height: 96vh; padding: 18px 22px; } .modal.sheet .data-table { font-size: var(--fs-body); } /* Training, authorisation and monitoring stacked ran 1190px in a 940px box. Side by side they fit, so the dialog opens whole. */ .pd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .pd-cols > div { min-width: 0; } .pd-cols .d-block-label:first-child { margin-top: 0 !important; } @media (max-width: 1100px) { .pd-cols { grid-template-columns: 1fr; } } .modal h3 { margin: 0 0 4px 0; font-size: var(--fs-title); } .modal .sub { font-size: var(--fs-body); color: var(--ink-faint); margin-bottom: 18px; } /* THE ACTIONS STAY IN VIEW. .modal scrolls at 94vh, and the ET parameter block took this dialog to 1384px inside a 722px box - Cancel sat at y=1346, below the fold, reachable only by finding an inner scrollbar. Gurudeep: "cancel and save changes botton both not working". They worked; they could not be seen. Sticky costs nothing on a short form and fixes every long one. */ .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; position: sticky; bottom: -22px; background: var(--surface); padding: 12px 0 4px; margin-bottom: -4px; border-top: 1px solid var(--line); z-index: 2; } .field-row { display: flex; gap: 10px; } .field-row > div { flex: 1; } .checkbox-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: var(--fs-body); } .checkbox-row input { width: auto; } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: white; padding: 10px 18px; border-radius: 8px; font-size: var(--fs-body); z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .toast.error { background: var(--danger); } .reading-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; } .reading-grid input { padding: 7px 9px; font-size: var(--fs-body); } .reading-grid .rlabel { grid-column: span 2; font-size: var(--fs-label); color: var(--ink-faint); margin-top: 6px; } /* The small-screen shell used to be here - a horizontal strip of nav items that could not work, because the items are not children of the sidebar. It is now a drawer, in css/shell.css, which loads last. */ /* Full-screen uncertainty viewer - a budget with 11 components and 9 points does not fit a screen, so both the component column and the point header stay pinned while the rest scrolls. */ .modal.wide { width: min(1320px, 96vw); padding: 0; max-height: 94vh; display: flex; flex-direction: column; } .modal.full { width: 98vw; padding: 0; max-height: 97vh; display: flex; flex-direction: column; } /* Six input columns. The app-wide 20px cell padding plus each input's intrinsic minimum width pushed the table past the modal and produced a horizontal scrollbar; min-width:0 lets them shrink to their column. */ .mu-grid { table-layout: fixed; width: 100%; } /* table.data-table td is (0,1,2) and was outranking a bare .mu-grid td, so the tighter padding silently did nothing. */ table.mu-grid th, table.mu-grid td { padding: 1px 8px; } /* The app-wide input padding gave a 62px row, so an 18-point parameter needed scrolling in a modal that had room for all of it. */ .mu-grid input, .mu-grid select { width: 100%; min-width: 0; box-sizing: border-box; padding: 4px 8px; font-size: var(--fs-body); } .mu-grid tbody tr td { border-bottom: 1px solid var(--line); } .modal.full > .mw-head { padding: 16px 22px 10px; border-bottom: 1px solid var(--line); } .modal.full > .mw-body { padding: 14px 22px; overflow-y: auto; flex: 1; } .modal.full > .mw-foot { padding: 10px 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); } .modal.wide > .mw-head { padding: 18px 24px 12px; border-bottom: 1px solid var(--line); } .modal.wide > .mw-body { padding: 16px 24px; overflow-y: auto; flex: 1; } .modal.wide > .mw-foot { padding: 12px 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); } .mw-cols { display: grid; grid-template-columns: 330px 1fr; gap: 22px; align-items: start; } .mw-cols .field-row { flex-wrap: wrap; } @media (max-width: 1000px) { .mw-cols { grid-template-columns: 1fr; } .modal.wide, .modal.full { width: 97vw; } .modal, .modal.roomy, .modal.roomier { width: 95vw; } } .ub-src { font-size: var(--fs-label); line-height: 1.35; margin-top: 3px; min-height: 14px; } .uncv-full { position: fixed; inset: 0; z-index: 9000; background: var(--bg, #fff); display: flex; flex-direction: column; } .uncv-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 20px; background: var(--brand); color: #fff; flex-wrap: wrap; } .uncv-bar .ghost { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); color: #fff; } .uncv-tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .uncv-tab { background: transparent; border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; padding: 8px 16px; cursor: pointer; font-size: var(--fs-body); color: var(--ink); } .uncv-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 500; } .uncv-body { flex: 1; overflow: auto; padding: 0 20px 20px; } .uncv-scroll { overflow: auto; max-height: calc(100vh - 210px); border: 1px solid var(--line); border-radius: 0 8px 8px 8px; } .uncv-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-body); } .uncv-table th, .uncv-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .uncv-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg, #fff); border-bottom: 2px solid var(--line); font-weight: 600; } .uncv-sticky-l { position: sticky; left: 0; z-index: 1; background: var(--bg, #fff); white-space: normal; min-width: 300px; max-width: 420px; } .uncv-table thead th.uncv-sticky-l { z-index: 3; } .uncv-n { text-align: right; } .uncv-sum td { background: rgba(0,0,0,0.03); font-weight: 500; } .uncv-final td { border-top: 2px solid var(--line); font-size: var(--fs-body); font-weight: 600; } .uncv-notes { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: var(--fs-body); color: var(--ink-faint); } /* ---------------------------------------------------------------- F-08 masters The tick-list that replaced three dropdowns. Gurudeep, 25.08.2026: the engineer states what was used; the method register only offers. Laid out as rows rather than a grid because the number varies from one to five and a fixed grid would leave holes on the short methods - which is the shape the three dropdowns had, and the reason they were wrong. */ /* ====================================================================== THE MASTER LIST MOVED INTO THE DATASHEET'S TABLE, 23.09.2026. These rules styled a stack of