/* *--------------------------------------------------------------- * SimpliSO — Standard Form System ("form paper") *--------------------------------------------------------------- * * Canonical visual baseline for every module form, extracted from * the customer-approved F-IMS22 blueprint. * * SCOPING * Everything is scoped under `.form-page` so the blueprint palette * and DM Sans font apply ONLY to the form area and can never leak * into the site nav/header (which keep their existing theme). * * MARKUP CONTRACT — every standardised form view outputs: * *
*
...page actions (print/clear/save)...
*
...draft state + progress...
*
*
...doc ref / classification (NO logo)...
*

…

…

*
*
*
Heading
*
…fields…
*
* … *
*
…doc ref · classification…
*
*
* * RULE: new form CSS goes HERE, as shared semantic classes. * Never add per-form prefixed classes (no fims28-*, fq23-*, fsr-* …). */ /* ── Fonts / icons are loaded in the layout : * DM Sans → https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600 * Tabler → tabler-icons.min.css (.ti .ti-*) */ /* =============================================================== * 1. SCOPE + DESIGN TOKENS (blueprint palette, form-area only) * =============================================================== */ .form-page { --bg:#f0efeb; --surface:#fff; --surface-2:#f5f5f2; --surface-3:#eeecea; --border:rgba(0,0,0,0.1); --border-med:rgba(0,0,0,0.15); --text:#1a1a18; --text-2:#4a4a46; --text-3:#8a8a86; --orange:#E07B2A; --orange-light:#FDF0E6; --orange-mid:#F5C490; --orange-dark:#a85a1e; --green:#1D9E75; --green-light:#EAF7F2; --green-dark:#0d5c42; --blue:#2B6CB0; --blue-light:#EBF4FF; --red-light:#FEF2F2; --red-dark:#7F1D1D; --navy:#162032; --radius:6px; --radius-lg:10px; --form-max:1300px; /* was 960px in the blueprint, then 1400px, then 1200px */ font-family:'DM Sans', sans-serif; color:var(--text); font-size:13px; line-height:1.5; } .form-page *, .form-page *::before, .form-page *::after { box-sizing:border-box; } /* =============================================================== * 2. TOOLBAR (page-level actions) * =============================================================== */ .form-page .toolbar{max-width:var(--form-max);margin:0 auto 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .form-page .doc-ref{font-size:12px;color:var(--text-3);padding:5px 10px;background:var(--surface);border:0.5px solid var(--border-med);border-radius:999px} .form-page .classification{font-size:10px;padding:4px 10px;border-radius:999px;font-weight:600;background:#FEF3C7;color:#92400E;border:0.5px solid #FDE68A;display:flex;align-items:center;gap:4px} .form-page .toolbar-right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .form-page .btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--radius);font-size:12px;font-weight:500;cursor:pointer;border:none;font-family:inherit;transition:opacity 0.15s;text-decoration:none} .form-page .btn-ghost{background:var(--surface);color:var(--text-2);border:0.5px solid var(--border-med)} .form-page .btn-ghost:hover{background:var(--surface-2)} .form-page .btn-orange{background:var(--orange);color:#fff} .form-page .btn-orange:hover{opacity:0.88} .form-page .btn-green{background:var(--green);color:#fff} .form-page .btn-green:hover{opacity:0.88} /* =============================================================== * 3. STATUS BAR (draft state + progress) * =============================================================== */ .form-page .status-bar{max-width:var(--form-max);margin:0 auto 14px;background:var(--surface);border:0.5px solid var(--border-med);border-radius:var(--radius);padding:8px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px} .form-page .status-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0} .form-page .dot-draft{background:#F59E0B} .form-page .dot-ok{background:var(--green)} .form-page .progress-track{flex:1;min-width:100px;height:4px;background:var(--border);border-radius:99px;overflow:hidden} .form-page .progress-fill{height:4px;background:var(--orange);border-radius:99px;transition:width 0.3s} .form-page .save-status{margin-left:auto;color:var(--text-3);display:flex;align-items:center;gap:5px} /* =============================================================== * 4. FORM PAPER (the document container) * =============================================================== */ .form-page .form-paper{max-width:var(--form-max);margin:0 auto;background:var(--surface);border:0.5px solid var(--border-med);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.07)} /* Header — navy bar. Customer-approved: NO SimpliSO logo here. * Only the document meta (ref / classification / ISO clause) shows. */ .form-page .form-header{background:var(--navy);padding:14px 22px;display:flex;align-items:center;justify-content:flex-end} .form-page .header-meta{text-align:right;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.7} .form-page .header-meta strong{color:rgba(255,255,255,0.85);font-weight:500} /* Title bar */ .form-page .form-title-bar{padding:16px 22px 0;border-bottom:2px solid var(--orange)} .form-page .form-title-bar h1{font-size:20px;font-weight:600;color:var(--text);padding-bottom:14px} .form-page .form-title-bar p{font-size:12px;color:var(--text-3);padding-bottom:14px;line-height:1.6} /* Body */ .form-page .form-body{padding:18px 22px} /* Footer */ .form-page .form-footer{padding:10px 22px;background:var(--surface-2);border-top:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-3)} /* =============================================================== * 5. SECTIONS (chip heading + bordered body) * =============================================================== */ .form-page .form-section{margin-bottom:18px} .form-page .section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-3);background:var(--surface-2);border:0.5px solid rgba(0,0,0,0.07);border-radius:var(--radius) var(--radius) 0 0;padding:7px 12px;display:flex;align-items:center;gap:6px} .form-page .section-title i{font-size:14px} .form-page .section-body{border:0.5px solid rgba(0,0,0,0.07);border-top:none;border-radius:0 0 var(--radius) var(--radius);overflow:hidden} /* =============================================================== * 6. FIELDS (borderless inputs on white, orange focus tint) * =============================================================== * Two reusable grid patterns: * .meta-grid — N equal cells (default 3 cols) * .field-grid — generic 2-col body grid (cards, sections) * Plus single-column stacked fields via .field. */ /* Generic borderless field input — the house style */ .form-page .field-label, .form-page .meta-label, .form-page .review-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-3);padding:8px 12px 2px;display:block} .form-page .field input[type="text"], .form-page .field input[type="date"], .form-page .field input[type="email"], .form-page .field input[type="tel"], .form-page .field input[type="number"], .form-page .field select, .form-page .field textarea, .form-page .meta-input, .form-page .review-input{width:100%;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);padding:4px 12px 10px;outline:none;resize:none;line-height:1.6} .form-page .field select{cursor:pointer;appearance:auto} .form-page .field textarea{min-height:60px} .form-page .field textarea.tall{min-height:80px} .form-page .field input:focus, .form-page .field select:focus, .form-page .field textarea:focus, .form-page .meta-input:focus, .form-page .review-input:focus{background:var(--orange-light)} /* Meta grid (e.g. client details) */ .form-page .meta-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:0.5px solid rgba(0,0,0,0.07)} .form-page .meta-cell{border-right:0.5px solid rgba(0,0,0,0.07)} .form-page .meta-cell:last-child{border-right:none} /* Generic 2-col field grid (section/card bodies) */ .form-page .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0} .form-page .field{border-right:0.5px solid var(--border);border-bottom:0.5px solid var(--border)} .form-page .field-grid .field:nth-child(2n){border-right:none} .form-page .field.full-width{grid-column:1/-1;border-right:none} /* Validation error (server-rendered) */ .form-page .field.has-error input, .form-page .field.has-error select, .form-page .field.has-error textarea{background:var(--red-light)} .form-page .field-error{font-size:11px;color:var(--red-dark);padding:0 12px 8px} /* =============================================================== * 7. INFO BOXES * =============================================================== */ .form-page .instructions{background:var(--blue-light);border-left:3px solid var(--blue);padding:10px 14px;margin:12px;border-radius:0 var(--radius) var(--radius) 0;font-size:12px;color:#1a3f6e;line-height:1.7} .form-page .instructions strong{font-weight:600;display:block;margin-bottom:2px} .form-page .callout{display:flex;gap:10px;padding:10px 14px;border-radius:var(--radius);font-size:12px;line-height:1.7;margin:10px 12px 12px} .form-page .callout.info{background:var(--green-light);border-left:3px solid var(--green);color:var(--green-dark)} .form-page .callout i{font-size:16px;flex-shrink:0;margin-top:1px} /* Summary chips */ .form-page .summary-bar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:0.5px solid var(--border)} .form-page .chip{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;border:0.5px solid var(--border-med);background:var(--surface-2);color:var(--text-2)} .form-page .chip i{font-size:13px} /* =============================================================== * 8. REPEATABLE CARDS (generalised "party card") * =============================================================== * Reusable row pattern for registers (parties, risks, suppliers…). * Markup: .rep-card > .rep-card-head + .rep-card-body(.field-grid) */ .form-page .rep-area{padding:10px 12px;display:flex;flex-direction:column;gap:8px} .form-page .rep-card{border:0.5px solid var(--border-med);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow 0.15s} .form-page .rep-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.08)} .form-page .rep-card-head{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface-2);border-bottom:0.5px solid var(--border)} .form-page .rep-num{width:24px;height:24px;border-radius:999px;background:var(--orange);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .form-page .rep-title-input{flex:1;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--text);outline:none;padding:2px 4px;border-radius:4px} .form-page .rep-title-input::placeholder{color:var(--text-3);font-weight:400} .form-page .rep-title-input:focus{background:var(--orange-light)} .form-page .rep-remove{border:none;background:none;cursor:pointer;color:var(--border-med);font-size:16px;padding:2px;border-radius:4px;display:flex;align-items:center;flex-shrink:0} .form-page .rep-remove:hover{color:var(--red-dark);background:var(--red-light)} .form-page .rep-card-body{display:grid;grid-template-columns:1fr 1fr 200px;gap:0} /* Category/type aligns to the Needs column; Can-they-influence fills the rest of the row. */ .form-page .rep-card-body > .field:nth-child(2){grid-column:2 / -1} .form-page .rep-card-body .field:nth-child(2n){border-right:none} .form-page .rep-card-body .field:last-child, .form-page .rep-card-body .field:nth-last-child(2):not(.full-width){border-bottom:none} /* Three-column field row inside a party card (needs / monitoring / standards) */ .form-page .rep-card-body .rep-triple{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 200px;border-top:0.5px solid var(--border)} .form-page .rep-card-body .rep-triple .field{border-right:0.5px solid var(--border);border-bottom:none} .form-page .rep-card-body .rep-triple .field:last-child{border-right:none} .form-page .rep-card-body .rep-triple textarea{min-height:60px} /* Add row button */ .form-page .add-row-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3);cursor:pointer;padding:10px 12px;border:1.5px dashed var(--border-med);border-radius:var(--radius-lg);background:transparent;font-family:inherit;width:100%;transition:all 0.15s} .form-page .add-row-btn:hover{border-color:var(--orange);color:var(--orange-dark);background:var(--orange-light)} .form-page .add-row-btn i{font-size:16px} /* =============================================================== * 9. TOGGLE / PILL CONTROLS * =============================================================== */ .form-page .toggle-group{display:flex;gap:4px} .form-page .toggle{padding:3px 10px;border-radius:999px;border:1px solid var(--border-med);font-size:11px;font-weight:600;cursor:pointer;background:var(--surface);color:var(--text-3);transition:all 0.12s;user-select:none} .form-page .toggle:hover{border-color:var(--orange);color:var(--orange-dark)} .form-page .toggle.active-internal{background:#E6F1FB;color:#0C447C;border-color:#B5D4F4} .form-page .toggle.active-external{background:var(--orange-light);color:var(--orange-dark);border-color:var(--orange-mid)} /* Standard (ISO) pills */ .form-page .pill-row{padding:6px 12px 10px;display:flex;gap:5px;flex-wrap:wrap} .form-page .std-pill{padding:3px 10px;border-radius:999px;border:1px solid var(--border-med);font-size:11px;font-weight:600;cursor:pointer;background:var(--surface);color:var(--text-3);transition:all 0.12s;user-select:none} .form-page .std-pill.a9001{background:#E6F1FB;color:#0C447C;border-color:#B5D4F4} .form-page .std-pill.a14001{background:#EAF3DE;color:#27500A;border-color:#C0DD97} .form-page .std-pill.a45001{background:#FAECE7;color:#712B13;border-color:#F5C4B3} .form-page .std-pill.a27001{background:#EEEDFE;color:#3C3489;border-color:#CECBF6} /* =============================================================== * 10. REVIEW / SIGNATURE GRIDS * =============================================================== */ .form-page .review-grid{display:grid;grid-template-columns:repeat(3,1fr)} .form-page .review-cell{border-right:0.5px solid var(--border)} .form-page .review-cell:last-child{border-right:none} /* Standard review block — reviewed date | reviewed by | what's changed | next review */ .form-page .review-strip{display:grid;grid-template-columns:150px 1fr 2fr 150px} .form-page .review-strip textarea{min-height:44px} /* --------------------------------------------------------------- * Standard review block — SELF-CONTAINED component. * Same 4-field layout as .form-page .review-strip, but works inside * any register theme (er3 supplier register, etc.) without needing a * .form-page ancestor. Used by B-2 rollout on non-form-page registers. * ------------------------------------------------------------- */ .review-block{border:0.5px solid var(--border);border-radius:var(--radius);margin:14px 12px;overflow:hidden;background:var(--surface)} .review-block-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);padding:9px 12px;background:var(--surface-2);border-bottom:0.5px solid var(--border)} .review-block .review-strip{display:grid;grid-template-columns:150px 1fr 2fr 150px} .review-block .review-strip textarea{min-height:44px} .review-block .review-cell{border-right:0.5px solid var(--border)} .review-block .review-cell:last-child{border-right:none} .review-block .review-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-3);padding:8px 12px 2px;display:block} .review-block .review-input{width:100%;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);padding:4px 12px 10px;outline:none;resize:none;line-height:1.6;box-sizing:border-box} .review-block .review-input:focus{background:var(--orange-light)} @media(max-width:640px){.review-block .review-strip{grid-template-columns:1fr}.review-block .review-cell{border-right:none;border-bottom:0.5px solid var(--border)}.review-block .review-cell:last-child{border-bottom:none}} .form-page .sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:0} .form-page .sig-cell{padding:12px 14px;border-right:0.5px solid var(--border)} .form-page .sig-cell:last-child{border-right:none} .form-page .sig-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-3);margin-bottom:10px} .form-page .sig-line{border:none;border-bottom:0.5px solid var(--border-med);background:transparent;font-family:inherit;font-size:13px;color:var(--text);padding:4px 0;width:100%;outline:none;margin-bottom:6px} .form-page .sig-line:focus{border-bottom-color:var(--orange)} .form-page .sig-sub{font-size:11px;color:var(--text-3)} .form-page .sig-sub input{border:none;border-bottom:0.5px solid var(--border-med);background:transparent;font-family:inherit;font-size:12px;color:var(--text);padding:1px 4px;outline:none} .form-page .sig-sub input:focus{border-bottom-color:var(--orange)} /* =============================================================== * 11. PRINT * =============================================================== */ @media print{ .form-page .toolbar, .form-page .status-bar{display:none} .form-page .form-paper{box-shadow:none;border:1px solid #ccc;max-width:100%} .form-page .add-row-btn, .form-page .rep-remove{display:none} } /* =============================================================== * 12. REGISTER TABLE (inline-editable grid registers) * =============================================================== * Reusable table-register vocabulary (legal, personal data, info * assets, IS risk register…). Sits inside .form-paper. */ /* Filter chips in the status bar */ .form-page .filter-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;border:0.5px solid;cursor:pointer;user-select:none} .form-page .filter-chip i{font-size:12px} .form-page .filter-chip:hover{opacity:0.82} .form-page .filter-chip.fc-all{background:var(--surface-2);color:var(--text-2);border-color:var(--border-med)} .form-page .filter-chip.fc-c{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .filter-chip.fc-a{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .filter-chip.fc-nc{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .filter-chip.active{box-shadow:0 0 0 2px var(--orange-mid)} .form-page .search-input{border:0.5px solid var(--border-med);border-radius:var(--radius);padding:5px 10px;font-size:12px;font-family:inherit;outline:none;width:220px;margin-left:auto} .form-page .search-input:focus{border-color:var(--orange)} /* Top meta strip (Company / Reviewed by / Date / Next review) */ .form-page .metastrip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:0.5px solid rgba(0,0,0,0.09)} .form-page .metastrip .mc{border-right:0.5px solid rgba(0,0,0,0.09)} .form-page .metastrip .mc:last-child{border-right:none} .form-page .metastrip .mlabel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-3);padding:7px 14px 2px;display:block} .form-page .metastrip .minput{width:100%;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);padding:4px 14px 10px;outline:none} .form-page .metastrip .minput:focus{background:var(--orange-light)} /* Navy section header with standard badges */ .form-page .reg-sec-hdr{background:var(--navy);padding:8px 16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--orange);display:flex;align-items:center;justify-content:space-between} .form-page .reg-sec-hdr-left{display:flex;align-items:center;gap:7px} .form-page .reg-sec-hdr i{font-size:14px} .form-page .std-badges{display:flex;gap:4px} .form-page .std-b{font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px} .form-page .std-b.b9001{background:#EBF4FF;color:#0C447C} .form-page .std-b.b14001{background:var(--green-light);color:var(--green-dark)} .form-page .std-b.b45001{background:#FEF3C7;color:#92400E} .form-page .std-b.b27001{background:#F3E8FF;color:#6B21A8} /* The grid table */ .form-page .reg-table{width:100%;border-collapse:collapse; border-right: 1px solid rgba(0, 0, 0, 0.09);} .form-page .reg-table th{padding:7px 10px;background:var(--surface-2);font-size:9px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-3);font-weight:600;border-bottom:0.5px solid rgba(0,0,0,0.09);border-right:0.5px solid rgba(0,0,0,0.09);text-align:left} .form-page .reg-table th:last-child{border-right:none} .form-page .reg-table td{border-bottom:0.5px solid rgba(0,0,0,0.09);border-right:0.5px solid rgba(0,0,0,0.09);vertical-align:top;padding:0} .form-page .reg-table td:last-child{border-right:none} .form-page .reg-table tr:last-child td{border-bottom:none} .form-page .reg-table tr:hover td{background:#fafaf8} .form-page .reg-table tr.hidden{display:none} .form-page .reg-table .fi{display:block;width:100%;border:none;background:transparent;font-family:inherit;font-size:11px;font-weight:700;color:var(--navy);padding:8px 10px;outline:none;text-align:center} .form-page .reg-table .fi:focus{background:var(--orange-light)} .form-page .reg-table .fn{display:block;width:100%;border:none;background:transparent;font-family:inherit;font-size:12px;color:var(--text);padding:8px 10px;outline:none;resize:none;line-height:1.6;} /* Register-row textareas use .fn without a rows attribute; stop reset.css forcing a 10em min-height on them (compact rows sized to content). */ .form-page textarea.fn{min-height:0} .hide-scroll { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .hide-scroll::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } .form-page .reg-table .fn:focus{background:var(--orange-light)} .form-page .reg-table .fn::placeholder{color:#d1d5db} .form-page .reg-table .date-inp{display:block;width:100%;border:none;background:transparent;font-family:inherit;font-size:11px;color:var(--text);padding:8px 8px;outline:none;text-align:center} .form-page .reg-table .date-inp:focus{background:var(--orange-light)} .form-page .status-cell{padding:5px 4px;text-align:center;vertical-align:middle} .form-page .status-sel{border:0.5px solid rgba(0,0,0,0.12);border-radius:999px;font-family:inherit;font-size:10px;font-weight:700;padding:3px 6px;outline:none;cursor:pointer;width:100%;text-align:center} .form-page .status-sel.s-c{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .status-sel.s-a{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .status-sel.s-nc{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} /* Objectives (F-Q11) status variants: On Track / In Progress / Overdue / Completed */ .form-page .status-sel.s-on{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .status-sel.s-ip{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .status-sel.s-ov{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .status-sel.s-co{background:#EBF4FF;color:#0C447C;border-color:#BFDBFE} .form-page .er1-flag{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;color:var(--orange-dark);background:var(--orange-light);border-radius:3px;padding:1px 5px;margin:0 10px 6px} .form-page .reg-add-btn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);cursor:pointer;padding:9px 16px;border:none;background:var(--surface-2);font-family:inherit;width:100%;border-top:0.5px solid rgba(0,0,0,0.09)} .form-page .reg-add-btn:hover{color:var(--orange-dark);background:var(--orange-light)} .form-page .rm-btn{border:none;background:none;cursor:pointer;color:rgba(0,0,0,0.12);font-size:13px;padding:4px;border-radius:3px;display:block;margin:3px auto} .form-page .rm-btn:hover{color:var(--red-dark);background:var(--red-light)} .form-page .reg-table tr:hover .rm-btn{color:rgba(0,0,0,0.3)} /* Classification variants (info assets, personal data registers). * Confidential = red, Business Use = amber, Public = green. */ .form-page .class-sel{border:0.5px solid rgba(0,0,0,0.12);border-radius:999px;font-family:inherit;font-size:10px;font-weight:700;padding:3px 6px;outline:none;cursor:pointer;width:100%;text-align:center} .form-page .class-sel.cl-co{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .class-sel.cl-bu{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .class-sel.cl-pu{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .filter-chip.fc-co{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .filter-chip.fc-bu{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .filter-chip.fc-pu{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} /* Classification key legend */ .form-page .key-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 16px;background:var(--surface-2);border-bottom:0.5px solid rgba(0,0,0,0.09);font-size:11px} .form-page .key-label{font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;font-size:10px} .form-page .key-pill{padding:2px 9px;border-radius:999px;font-weight:600;font-size:11px} .form-page .key-pill.kp-co{background:var(--red-light);color:var(--red-dark)} .form-page .key-pill.kp-bu{background:#FEF3C7;color:#92400E} .form-page .key-pill.kp-pu{background:var(--green-light);color:var(--green-dark)} /* Scope-gated notice (register hidden when standard not in scope) */ .form-page .scope-notice{max-width:var(--form-max);margin:0 auto;background:var(--surface);border:0.5px solid var(--border-med);border-radius:var(--radius-lg);padding:28px 24px;text-align:center;color:var(--text-2);font-size:13px;line-height:1.7} .form-page .scope-notice i{font-size:28px;color:var(--orange);display:block;margin-bottom:8px} /* =============================================================== * 14. RoPA / LAWFUL BASIS (personal data register) * =============================================================== */ /* Lawful-basis key legend pills */ .form-page .basis-key{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 16px;background:var(--surface-2);border-bottom:0.5px solid rgba(0,0,0,0.09);font-size:11px;color:var(--text-2)} .form-page .bk{display:inline-block;min-width:16px;text-align:center;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;margin-right:2px} .form-page .bk-a{background:#EBF4FF;color:#0C447C} .form-page .bk-b{background:var(--green-light);color:var(--green-dark)} .form-page .bk-c{background:#FEF3C7;color:#92400E} .form-page .bk-d{background:#F3E8FF;color:#6B21A8} .form-page .bk-e{background:#E0F2FE;color:#075985} .form-page .bk-f{background:var(--surface-3);color:var(--text-2)} .form-page .bk-sc{background:var(--red-light);color:var(--red-dark)} /* Per-row lawful-basis selects (stack inside the cell) */ .form-page .lb-cell{padding:5px 6px} .form-page .lb-sel{display:block;width:100%;border:0.5px solid rgba(0,0,0,0.12);border-radius:4px;font-family:inherit;font-size:10px;font-weight:600;padding:4px 6px;outline:none;cursor:pointer;margin-bottom:4px} .form-page .lb-sel.bk-a{background:#EBF4FF;color:#0C447C} .form-page .lb-sel.bk-b{background:var(--green-light);color:var(--green-dark)} .form-page .lb-sel.bk-c{background:#FEF3C7;color:#92400E} .form-page .lb-sel.bk-d{background:#F3E8FF;color:#6B21A8} .form-page .lb-sel.bk-e{background:#E0F2FE;color:#075985} .form-page .lb-sel.bk-f{background:var(--surface-3);color:var(--text-2)} .form-page .lb-sel.bk-sc{background:var(--red-light);color:var(--red-dark)} .form-page .lb-add{border:none;background:none;color:var(--text-3);font-size:10px;font-weight:600;cursor:pointer;padding:2px} .form-page .lb-add:hover{color:var(--orange-dark)} /* Special-category toggle + tag (highlight per dev notes) */ .form-page .spec-toggle{border:0.5px solid var(--border-med);border-radius:999px;background:var(--surface);color:var(--text-3);font-family:inherit;font-size:10px;font-weight:700;padding:3px 9px;cursor:pointer} .form-page .spec-toggle.on{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .spec-tag{display:inline-flex;align-items:center;gap:3px;margin-top:4px;font-size:9px;font-weight:700;color:var(--red-dark);background:var(--red-light);border-radius:3px;padding:1px 5px} .form-page tr.is-special td{background:#fff7f7} .form-page .cat-name{font-weight:600;font-size:12px;color:var(--navy);outline:none;min-width:60px;padding:8px 10px} .form-page .cat-name:focus{background:var(--orange-light)} /* =============================================================== * 15. RISK SCORING (IS risk register, opportunities & risks) * =============================================================== */ /* Tabs */ .form-page .form-tabs{max-width:var(--form-max);margin:0 auto 0;display:flex;gap:4px} .form-page .form-tab{display:flex;align-items:center;gap:6px;padding:9px 16px;font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer;border:0.5px solid var(--border-med);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;background:var(--surface-2)} .form-page .form-tab.active{background:var(--surface);color:var(--navy)} .form-page .form-tab i{font-size:15px} .form-page .form-panel{display:none} .form-page .form-panel.active{display:block} /* CIA toggle group */ .form-page .cia-grp{display:flex;gap:2px;justify-content:center} .form-page .cia-btn{width:20px;height:20px;border:0.5px solid var(--border-med);border-radius:4px;background:var(--surface);color:var(--text-3);font-size:10px;font-weight:700;cursor:pointer;padding:0} .form-page .cia-btn.on{background:var(--navy);color:#fff;border-color:var(--navy)} /* Risk scoring selects */ .form-page .risk-cell{padding:4px} .form-page .risk-sel{width:100%;border:0.5px solid rgba(0,0,0,.12);border-radius:4px;font-family:inherit;font-size:10px;padding:4px;outline:none;cursor:pointer;background:var(--surface)} .form-page .risk-sel:focus{border-color:var(--orange)} /* Rating badges (matrix output) */ .form-page .rating-cell{text-align:center;vertical-align:middle;padding:5px} .form-page .rbadge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700} .form-page .rbadge.rb-tol{background:var(--green-light);color:var(--green-dark)} .form-page .rbadge.rb-mod{background:#FEF3C7;color:#92400E} .form-page .rbadge.rb-sub{background:var(--red-light);color:var(--red-dark)} .form-page .rbadge.rb-none{background:var(--surface-3);color:var(--text-3)} /* Treatment select */ .form-page .treat-sel{width:100%;border:0.5px solid rgba(0,0,0,.12);border-radius:999px;font-family:inherit;font-size:10px;font-weight:700;padding:3px 6px;outline:none;cursor:pointer;text-align:center} .form-page .treat-sel.t-accept{background:var(--surface-3);color:var(--text-2)} .form-page .treat-sel.t-reduce{background:#FEF3C7;color:#92400E} .form-page .treat-sel.t-transfer{background:#EBF4FF;color:#0C447C} .form-page .treat-sel.t-avoid{background:var(--red-light);color:var(--red-dark)} /* Matrix key legend */ .form-page .matrix-key{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:8px 16px;background:var(--surface-2);border-bottom:0.5px solid rgba(0,0,0,.09);font-size:11px;color:var(--text-2)} .form-page .rk{display:inline-flex;align-items:center;gap:4px} .form-page .rk-dot{width:9px;height:9px;border-radius:999px;display:inline-block} .form-page .rk-dot.rk-tol{background:#1D9E75} .form-page .rk-dot.rk-mod{background:#F59E0B} .form-page .rk-dot.rk-sub{background:#DC2626} /* Status pill + finalised banner + save bar */ .form-page .status-pill{font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em} .form-page .status-pill.draft{background:#FEF3C7;color:#92400E} .form-page .status-pill.finalised{background:var(--green-light);color:var(--green-dark)} .form-page .finalised-banner{max-width:var(--form-max);margin:0 auto 12px;display:flex;align-items:center;gap:8px;background:var(--green-light);color:var(--green-dark);border:0.5px solid #86EFAC;border-radius:var(--radius);padding:8px 14px;font-size:12px;font-weight:600} .form-page .savebar{max-width:var(--form-max);margin:12px auto 0;display:flex;align-items:center;gap:10px} .form-page .save-msg{font-size:12px;color:var(--text-3)} .form-page .save-msg.ok{color:var(--green)} .form-page .save-msg.err{color:var(--red-dark)} /* =============================================================== * 16. SWOT / PESTLE / RISK MATRIX (opportunities & risks register) * =============================================================== */ /* SWOT — four coloured quadrants */ .form-page .swot-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0} .form-page .swot-card{border:0.5px solid var(--border-med);border-radius:var(--radius-lg);overflow:hidden} .form-page .swot-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface-2);border-bottom:0.5px solid var(--border)} .form-page .swot-letter{width:24px;height:24px;border-radius:6px;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center} .form-page .swot-label{font-weight:600;font-size:13px;color:var(--navy)} .form-page .swot-items{padding:8px 12px;display:flex;flex-direction:column;gap:6px} .form-page .swot-item{display:flex;align-items:center;gap:8px} .form-page .swot-dot{width:7px;height:7px;border-radius:999px;flex-shrink:0} .form-page .swot-item input{flex:1;border:none;border-bottom:0.5px solid var(--border);background:transparent;font-family:inherit;font-size:12px;color:var(--text);padding:3px 2px;outline:none} .form-page .swot-item input:focus{border-bottom-color:var(--orange);background:var(--orange-light)} .form-page .swot-remove,.form-page .pestle-item-remove{border:none;background:none;color:var(--border-med);cursor:pointer;font-size:15px;padding:0 4px} .form-page .swot-remove:hover,.form-page .pestle-item-remove:hover{color:var(--red-dark)} .form-page .swot-add{border:none;background:none;color:var(--orange-dark);font-size:11px;font-weight:600;cursor:pointer;padding:6px 12px;text-align:left} /* PESTLE — six category cards */ .form-page .pestle-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:4px 0} .form-page .pestle-card{border:0.5px solid var(--border-med);border-radius:var(--radius-lg);overflow:hidden} .form-page .pestle-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface-2);border-bottom:0.5px solid var(--border)} .form-page .pestle-letter{width:24px;height:24px;border-radius:6px;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .form-page .pestle-label{font-weight:600;font-size:12px;color:var(--navy)} .form-page .pestle-desc{font-size:10px;color:var(--text-3)} .form-page .pestle-items{padding:8px 12px;display:flex;flex-direction:column;gap:6px} .form-page .pestle-item{display:flex;align-items:center;gap:6px} .form-page .pestle-item input{flex:1;border:none;border-bottom:0.5px solid var(--border);background:transparent;font-family:inherit;font-size:12px;padding:3px 2px;outline:none} .form-page .pestle-item input:focus{border-bottom-color:var(--orange);background:var(--orange-light)} .form-page .pestle-type{font-size:9px;font-weight:700;padding:2px 7px;border-radius:999px;cursor:pointer;user-select:none;flex-shrink:0} .form-page .pestle-type.pt-r{background:var(--red-light);color:var(--red-dark)} .form-page .pestle-type.pt-o{background:var(--green-light);color:var(--green-dark)} .form-page .pestle-type.pt-b{background:#FEF3C7;color:#92400E} /* Clickable rating badge (cycles Tolerable/Moderate/Substantial) */ .form-page .rating-badge{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;padding:3px 8px;border-radius:var(--radius);font-size:10px;font-weight:700;cursor:pointer;min-width:62px} .form-page .rating-badge .rating-code{font-size:8px;font-weight:600;opacity:.8} .form-page .rating-badge.rt{background:var(--green-light);color:var(--green-dark)} .form-page .rating-badge.rm{background:#FEF3C7;color:#92400E} .form-page .rating-badge.rs{background:var(--red-light);color:var(--red-dark)} .form-page .risk-desc-input{width:100%;border:none;background:transparent;font-family:inherit;font-size:12px;color:var(--text);padding:6px 8px;outline:none} .form-page .risk-desc-input:focus{background:var(--orange-light)} /* Risk matrix key table + summary chips */ .form-page .risk-matrix-table{border-collapse:collapse;font-size:10px} .form-page .risk-matrix-table td,.form-page .risk-matrix-table th{border:0.5px solid var(--border);padding:5px 8px;text-align:center} .form-page .risk-matrix-table .rmt-axis{background:var(--surface-2);color:var(--text-3);font-weight:600;font-size:9px;text-transform:uppercase} .form-page .risk-matrix-table .rmt-t{background:var(--green-light);color:var(--green-dark);font-weight:600} .form-page .risk-matrix-table .rmt-m{background:#FEF3C7;color:#92400E;font-weight:600} .form-page .risk-matrix-table .rmt-s{background:var(--red-light);color:var(--red-dark);font-weight:600} .form-page .risk-rs-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;border:0.5px solid var(--border-med);background:var(--surface-2)} .form-page .risk-rs-chip.rs-t{color:var(--green-dark)} .form-page .risk-rs-chip.rs-m{color:#92400E} .form-page .risk-rs-chip.rs-s{color:var(--red-dark)} .form-page .risk-rs-chip.rs-total{color:var(--text-2)} /* =============================================================== * 17. STATEMENT OF APPLICABILITY (inclusion + reason chips) * =============================================================== */ /* Navy group-header row spanning the table */ .form-page .reg-table tr.group-row td{background:var(--navy);color:var(--orange);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:7px 16px} /* Included / Not-applicable toggle */ .form-page .inc-btn{border:0.5px solid var(--border-med);border-radius:999px;font-family:inherit;font-size:10px;font-weight:700;padding:3px 10px;cursor:pointer} .form-page .inc-btn.inc-included{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .inc-btn.inc-na{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} /* Reason chips L / C / B / S */ .form-page .reason-chips{display:flex;gap:3px;justify-content:center} .form-page .rchip{width:18px;height:18px;border:0.5px solid var(--border-med);border-radius:4px;background:var(--surface);color:var(--text-3);font-size:9px;font-weight:700;cursor:pointer;padding:0} .form-page .rchip.rc-on{background:var(--navy);color:#fff;border-color:var(--navy)} .form-page .ctrl-no{text-align:center;font-weight:700;font-size:11px;color:var(--navy);vertical-align:middle} .form-page .ctrl-name{font-size:12px;color:var(--text);padding:8px 10px;vertical-align:middle} .form-page .scope-row{padding:8px 16px;border-bottom:0.5px solid rgba(0,0,0,.09)} .form-page .scope-row textarea{width:100%;border:0.5px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:inherit;font-size:12px;color:var(--text);padding:6px 8px;outline:none;resize:none;min-height:44px} .form-page .scope-row textarea:focus{border-color:var(--orange)} /* Inclusion-reason key pills */ .form-page .key-pill.kp-l{background:#EBF4FF;color:#0C447C} .form-page .key-pill.kp-c{background:#F3E8FF;color:#6B21A8} .form-page .key-pill.kp-bz{background:#FEF3C7;color:#92400E} .form-page .key-pill.kp-s{background:var(--green-light);color:var(--green-dark)} /* =============================================================== * 18. EQUIPMENT / LOGINS (in-use toggle, check-due, in-cell selects) * =============================================================== */ /* In-use Yes/No toggle */ .form-page .iu-btn{border:0.5px solid var(--border-med);border-radius:999px;font-family:inherit;font-size:10px;font-weight:700;padding:3px 12px;cursor:pointer} .form-page .iu-btn.iu-yes{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .iu-btn.iu-no{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} /* In-cell select (type / risk) — compact */ .form-page .cell-sel{width:100%;border:0.5px solid rgba(0,0,0,.12);border-radius:4px;font-family:inherit;font-size:11px;padding:4px;outline:none;cursor:pointer;background:var(--surface)} .form-page .cell-sel:focus{border-color:var(--orange)} /* Check-due date colouring (amber within 35 days, red overdue) */ .form-page .reg-table .date-inp.due-soon{background:#FEF3C7;color:#92400E;font-weight:600} .form-page .reg-table .date-inp.overdue{background:var(--red-light);color:var(--red-dark);font-weight:600} /* Confidential warning banner */ .form-page .conf-warn{display:flex;align-items:center;gap:8px;margin:0 16px 4px;padding:8px 12px;background:var(--red-light);border:0.5px solid #FECACA;border-radius:var(--radius);font-size:12px;color:var(--red-dark)} /* Risk filter-chip variants */ .form-page .filter-chip.fc-h{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .filter-chip.fc-m{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .filter-chip.fc-l{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .filter-chip.fc-due{background:#FEF3C7;color:#92400E;border-color:#FDE68A} /* =============================================================== * 19. CHECKLIST (monitoring / inspection checks) * =============================================================== */ /* OK / Issue / N-A status select */ .form-page .check-sel{width:100%;border:0.5px solid rgba(0,0,0,.12);border-radius:999px;font-family:inherit;font-size:11px;font-weight:700;padding:3px 6px;outline:none;cursor:pointer;text-align:center} .form-page .check-sel.ok{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .check-sel.issue{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .check-sel.na{background:var(--surface-3);color:var(--text-2)} /* Numbered checklist item cell (title + guidance sub-text) */ .form-page .reg-table td.item-cell{padding:8px 10px;} .form-page .item-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;margin-bottom:4px} .form-page .item-title{font-size:12px;font-weight:600;color:var(--navy);outline:none} .form-page .item-title:focus,.form-page .item-sub:focus{background:var(--orange-light)} .form-page .item-sub{font-size:11px;color:var(--text-3);outline:none;line-height:1.5;margin-top:2px} /* =============================================================== * 20. MONTHLY GRID (premises checklist) + ER1 badge * =============================================================== */ .form-page .reg-table .month-cell{text-align:center;padding:3px} .form-page .init-inp{width:100%;border:none;background:transparent;font-family:inherit;font-size:11px;font-weight:700;text-align:center;color:var(--text-3);padding:6px 2px;outline:none;text-transform:uppercase} .form-page .init-inp::placeholder{color:#d1d5db} .form-page .init-inp.done{background:var(--green-light);color:var(--green-dark);border-radius:4px} .form-page .init-inp:focus{background:var(--orange-light);color:var(--text)} /* Month status chips in the status bar */ .form-page .month-chip{display:inline-block;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;margin-right:2px} .form-page .month-chip.fq26-chip-done,.form-page .month-chip.done{background:var(--green-light);color:var(--green-dark)} .form-page .month-chip.fq26-chip-pend,.form-page .month-chip.pend{background:var(--surface-3);color:var(--text-3)} /* ER1 raise badge on action rows */ .form-page .er1-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;color:var(--orange-dark);background:var(--orange-light);border:0.5px solid var(--orange-mid);border-radius:4px;padding:2px 6px;cursor:pointer;margin-right:4px} .form-page .er1-badge.raised{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC;cursor:default} /* Full-width notes textarea */ .form-page .notes-ta{width:calc(100% - 32px);margin:4px 16px 8px;border:0.5px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:inherit;font-size:12px;color:var(--text);padding:8px 10px;outline:none;resize:none;min-height:60px} .form-page .notes-ta:focus{border-color:var(--orange)} .form-page .notes-label{font-size:11px;font-weight:600;color:var(--text-3);padding:8px 16px 0} /* =============================================================== * 21. YES/NO QUESTIONNAIRE (home working, inspection checklists) * =============================================================== */ .form-page .yn-col-hdr{display:flex;align-items:center;justify-content:flex-end;gap:0;padding:6px 16px;background:var(--surface-2);border-bottom:0.5px solid var(--border);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)} .form-page .yn-col-hdr .yn-col-q{margin-right:auto} .form-page .yn-col-hdr .yn-col-b{width:48px;text-align:center} .form-page .check-item{border-bottom:0.5px solid rgba(0,0,0,.06)} .form-page .check-row{display:flex;align-items:center;gap:12px;padding:9px 16px} .form-page .check-q{flex:1;font-size:12px;color:var(--text);line-height:1.5} .form-page .check-q small{display:block;font-size:11px;color:var(--text-3);margin-top:2px} .form-page .yn-group{display:flex;gap:4px;flex-shrink:0} .form-page .yn-btn{width:44px;border:0.5px solid var(--border-med);border-radius:var(--radius);background:var(--surface);color:var(--text-3);font-size:11px;font-weight:600;padding:4px 0;cursor:pointer} .form-page .yn-btn.yn-yes{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .yn-btn.yn-no{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .yn-btn.yn-na{background:var(--surface-3);color:var(--text-2)} .form-page .check-notes{display:none;padding:0 16px 9px 16px} .form-page .check-notes.show{display:block} .form-page .check-notes textarea{width:100%;border:0.5px solid #FECACA;border-radius:var(--radius);background:var(--red-light);font-family:inherit;font-size:12px;color:var(--text);padding:6px 8px;outline:none;resize:none;min-height:38px} .form-page .action-block{display:none;margin:10px 16px;padding:10px 12px;background:var(--red-light);border-left:3px solid var(--red-dark);border-radius:0 var(--radius) var(--radius) 0} .form-page .action-block.show{display:block} .form-page .action-block-label{font-size:11px;font-weight:700;color:var(--red-dark);margin-bottom:6px;display:flex;align-items:center;gap:5px} .form-page .action-block textarea{width:100%;border:0.5px solid #FECACA;border-radius:var(--radius);background:var(--surface);font-family:inherit;font-size:12px;padding:6px 8px;outline:none;resize:none;min-height:50px} .form-page .declaration{margin:8px 16px;padding:10px 12px;background:var(--surface-2);border-radius:var(--radius);font-size:11px;color:var(--text-2);line-height:1.7} /* =============================================================== * 22. ACTIONS REGISTER (ER1: cycling status/significance + analysis) * =============================================================== */ /* Clickable status badge (Open / In progress / Closed) */ .form-page .status-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap} .form-page .status-badge.s-open{background:#FEF3C7;color:#92400E} .form-page .status-badge.s-prog{background:#EBF4FF;color:#0C447C} .form-page .status-badge.s-closed{background:var(--green-light);color:var(--green-dark)} /* Clickable significance badge (Low / Medium / Major) */ .form-page .sig-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer} .form-page .sig-badge.sig-l{background:var(--surface-3);color:var(--text-2)} .form-page .sig-badge.sig-m{background:#FEF3C7;color:#92400E} .form-page .sig-badge.sig-h{background:var(--red-light);color:var(--red-dark)} /* Source pill */ .form-page .src-pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;background:#EBF4FF;color:#0C447C;white-space:nowrap} /* Analysis tab cards */ .form-page .stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px} .form-page .stat-card{background:var(--surface);border:0.5px solid var(--border-med);border-radius:var(--radius-lg);padding:14px;text-align:center} .form-page .stat-card .num{font-size:24px;font-weight:700;color:var(--navy)} .form-page .stat-card .lbl{font-size:11px;color:var(--text-3);margin-top:2px} .form-page .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 14px} .form-page .cat-card{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border-radius:var(--radius);padding:7px 12px;font-size:11px;color:var(--text-2)} .form-page .cat-card .cat-num{font-weight:700;color:var(--navy)} /* =============================================================== * 23. FEEDBACK SCORING (ER5 / F-Q12 customer satisfaction) * =============================================================== */ /* 1–5 score buttons (call form) */ .form-page .score-btns{display:flex;gap:5px} .form-page .score-btn{width:34px;height:34px;border:0.5px solid var(--border-med);border-radius:var(--radius);background:var(--surface);color:var(--text-2);font-size:13px;font-weight:700;cursor:pointer} .form-page .score-btn.sel-1,.form-page .score-btn.sel-2{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .score-btn.sel-3{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .score-btn.sel-4,.form-page .score-btn.sel-5{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} /* Score pills (register table) */ .form-page .score-pill{display:inline-block;width:22px;text-align:center;border-radius:4px;font-size:11px;font-weight:700;padding:2px 0} .form-page .score-pill.s0{color:var(--text-3)} .form-page .score-pill.s1,.form-page .score-pill.s2{background:var(--red-light);color:var(--red-dark)} .form-page .score-pill.s3{background:#FEF3C7;color:#92400E} .form-page .score-pill.s4,.form-page .score-pill.s5{background:var(--green-light);color:var(--green-dark)} /* Use-again badge */ .form-page .ua-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px} .form-page .ua-badge.ua-yes{background:var(--green-light);color:var(--green-dark)} .form-page .ua-badge.ua-no{background:var(--red-light);color:var(--red-dark)} /* Stat value cells (big numbers) */ .form-page .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:0.5px solid rgba(0,0,0,.09)} .form-page .stat-strip .sc{padding:12px;text-align:center;border-right:0.5px solid rgba(0,0,0,.09)} .form-page .stat-strip .sc:last-child{border-right:none} .form-page .stat-strip .sval{font-size:22px;font-weight:700;color:var(--navy)} .form-page .stat-strip .sval.good{color:var(--green-dark)} .form-page .stat-strip .sval.warn{color:#92400E} .form-page .stat-strip .sval.danger{color:var(--red-dark)} .form-page .stat-strip .slbl{font-size:11px;color:var(--text-3);margin-top:2px} /* Score bars (analysis) */ .form-page .score-bar-row{display:flex;align-items:center;gap:12px;padding:5px 16px;font-size:12px} .form-page .sb-label{width:220px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .form-page .sb-track{flex:1;height:8px;background:var(--surface-3);border-radius:99px;overflow:hidden} .form-page .sb-fill{height:8px;border-radius:99px} .form-page .sb-avg{width:36px;text-align:right;font-weight:700;color:var(--navy)} /* Score summary band + section heading with hint */ .form-page .sec-heading{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--surface-2);border-bottom:0.5px solid var(--border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)} .form-page .sec-heading .hint{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-3)} .form-page .score-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:0.5px solid rgba(0,0,0,.06)} .form-page .q-num{font-size:10px;font-weight:700;color:var(--orange)} .form-page .q-text{font-size:13px;color:var(--text)} /* =============================================================== * 24. COMPETENCY MATRIX (ER2 staff training & competency) * =============================================================== * Wide, horizontally-scrolling grid: navy grouped column headers, * compact cells, click-to-cycle training toggles and 0–4 rating * selects. Extends .reg-table; expiry-date colouring reuses the * canonical .reg-table .date-inp.overdue / .due-soon rules. */ .form-page .matrix-wrap{overflow-x:auto;width:100%;min-width:0} .form-page .matrix-table{border-collapse:collapse;white-space:nowrap;font-size:11px;width:auto} .form-page .matrix-table th{padding:5px 7px;background:var(--navy);color:rgba(255,255,255,0.7);font-size:9px;text-transform:uppercase;letter-spacing:0.04em;font-weight:600;border-right:0.5px solid rgba(255,255,255,0.1);border-bottom:none;text-align:center} .form-page .matrix-table th:last-child{border-right:none} .form-page .matrix-table th.grp{background:#0d1b2a;color:var(--orange);border-right:1.5px solid rgba(255,255,255,0.2)} .form-page .matrix-table th.left{text-align:left} .form-page .matrix-table td{padding:0;border-bottom:0.5px solid rgba(0,0,0,0.09);border-right:0.5px solid rgba(0,0,0,0.09);vertical-align:middle} .form-page .matrix-table td:last-child{border-right:none} .form-page .matrix-table tr:last-child td{border-bottom:none} .form-page .matrix-table tr:hover td{background:#fafaf8} .form-page .matrix-table tr.hidden{display:none} /* Leaver rows: hidden by default, dimmed + red name cells when shown */ .form-page .matrix-table tr.is-leaver{display:none} .form-page .matrix-table tr.is-leaver.show-leavers{display:table-row} .form-page .matrix-table tr.is-leaver td{opacity:0.45} .form-page .matrix-table tr.is-leaver .mx-name-td, .form-page .matrix-table tr.is-leaver .mx-role-td{background:var(--red-light)} .form-page .matrix-table tr.is-leaver .leaver-btn, .form-page .matrix-table tr.is-leaver .rm-btn{opacity:1} /* Name / role columns — light "frozen" feel on the left edge */ .form-page .matrix-table .mx-name-td{background:var(--surface-2);border-right:0.5px solid rgba(0,0,0,0.12)} .form-page .matrix-table .mx-role-td{background:var(--surface-2);border-right:1px solid rgba(0,0,0,0.15)} .form-page .mx-name{display:block;width:140px;border:none;background:transparent;font-family:inherit;font-size:11px;font-weight:600;color:var(--text);padding:7px 9px;outline:none} .form-page .mx-role{display:block;width:130px;border:none;background:transparent;font-family:inherit;font-size:10px;color:var(--text-3);padding:7px 9px;outline:none} .form-page .mx-name:focus,.form-page .mx-role:focus{background:var(--orange-light)} .form-page .mx-name[readonly],.form-page .mx-role[readonly]{cursor:default} /* Cert / text cells + compact date inputs (colour via .date-inp.overdue/.due-soon) */ .form-page .matrix-table td.mx-cell{min-width:80px;vertical-align:top} .form-page .mx-cert{display:block;width:100%;border:none;background:transparent;font-family:inherit;font-size:10px;color:var(--text);padding:5px 6px;outline:none} .form-page .mx-cert:focus{background:var(--orange-light)} .form-page .mx-cert[readonly]{color:var(--text-2);cursor:default} .form-page .matrix-table .date-inp{padding:4px 5px;font-size:10px} /* Training toggle cell — click to cycle T / C / N-A */ .form-page .matrix-table td.tcell{min-width:34px;padding:4px;text-align:center;vertical-align:middle} .form-page .tcell.editable{cursor:pointer} .form-page .tcell.editable:hover{background:var(--bg)} .form-page .tb{display:inline-block;width:22px;line-height:18px;text-align:center;font-size:10px;font-weight:700;border-radius:3px} .form-page .tb.tb-c{background:var(--green-light);color:var(--green-dark)} .form-page .tb.tb-t{background:#FFFBEB;color:#78350F} .form-page .tb.tb-na{background:var(--surface-2);color:#9ca3af;font-size:9px;font-weight:500} .form-page .tb.tb-blank{color:#d1d5db;font-weight:400} /* Active / Leaver toggle */ .form-page .leaver-btn{display:block;margin:3px auto;border:0.5px solid;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;text-align:center} .form-page .leaver-btn.lb-active{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .leaver-btn.lb-leaver{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .mgmt-btn{display:block;margin:3px auto;border:0.5px solid;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;text-align:center} .form-page .mgmt-btn.mb-mgmt{background:#eaf0fb;color:#1b4f9c;border-color:#b7cbec} .form-page .mgmt-btn.mb-staff{background:#f1efe8;color:#5f5e5a;border-color:#d3d1c7} /* ER2: qualification cert columns hidden — certificates now live in the Document Store. Inputs remain in the DOM so existing data round-trips untouched until migrated. */ .form-page .matrix-table .ql-col{display:none} .form-page .mx-certs-cell{white-space:nowrap} .form-page .mx-certs-link2{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#1b2740;text-decoration:none} .form-page .mx-certs-link2:hover{text-decoration:underline} .form-page .mx-certs-link2 .ce-n{color:#5f6b7a;font-weight:600} .form-page .mx-certs-link2 .ce-chip{font-size:10px;font-weight:700;border-radius:999px;padding:1px 8px} .form-page .ce-chip.ce-over{background:#fcebeb;color:#a32d2d} .form-page .ce-chip.ce-soon{background:#fdf1dc;color:#854f0b} .form-page .ce-chip.ce-ok{background:#eaf3de;color:#3b6d11} .form-page .ce-chip.ce-none{background:#eef1f5;color:#5f6b7a} .form-page .mx-certs-empty{font-size:10px;color:#98a2b3;font-style:italic} /* ER2: angle the group headers so the competency columns fit on one page. Labels wrap to two lines when long so they stay inside their own 92px column at 60deg (no overlap into the next column) and sit centred. */ .form-page .matrix-table thead th.grp-rot{height:150px;vertical-align:middle;padding:0;white-space:normal;overflow:visible;background:#1b2740} .form-page .matrix-table thead th.grp-rot .th-rot{display:inline-block;max-width:82px;transform:rotate(-60deg);transform-origin:center center;white-space:normal;font-size:10.5px;font-weight:600;line-height:1.08;text-align:center} /* ER2 stacked cells — value over date in a single column (halves the width) */ .form-page .matrix-table td.e2-stack{padding:6px 6px;width:92px;vertical-align:middle;text-align:center} .form-page .matrix-table td.e2-stack > input,.form-page .matrix-table td.e2-stack > .tb{display:block;width:100%;margin:1px 0;box-sizing:border-box;text-align:center} .form-page .matrix-table td.e2-stack > input.date-inp{font-size:9px;padding:1px 2px} .form-page .matrix-table td.e2-stack > input.mx-cert{font-size:10px;padding:2px 3px} /* Hidden fields inside a stacked cell (e.g. the removed Annual Review notes) must stay hidden — beat the display:block above. */ .form-page .matrix-table td.e2-stack > input.ql-col{display:none} /* Actions column: the "date left" field only matters for leavers — hide it for active staff so the column is just the remove (×) control. */ .form-page .matrix-table .er2-drow:not(.is-leaver) input[data-dateleft]{display:none} /* Leaver / date-left column header — same 60° angle + width as the rest, but an orange background with navy text so it stands apart. */ .form-page .matrix-table thead th.e2-actions-h{background:var(--orange);width:92px} .form-page .matrix-table thead th.e2-actions-h .th-rot{color:#1b2740} /* Full-width horizontal scroll + frozen Name column */ .form-page .matrix-wrap{overflow-x:auto} .form-page .matrix-table th.e2-stick,.form-page .matrix-table td.mx-name-td{position:sticky;left:0;z-index:3} .form-page .matrix-table th.e2-stick{background:#1b2740} .form-page .matrix-table td.mx-name-td{background:#fff;border-right:1px solid #cdd5e0} .form-page .matrix-table tr.is-leaver td.mx-name-td{background:#faf5f5} /* Top scrollbar mirrors the bottom one */ .form-page .matrix-topscroll{overflow-x:auto;overflow-y:hidden} .form-page .matrix-topscroll > div{height:1px} /* ER2: editable competency-column labels */ .form-page .mx-comp-edit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;padding:8px 10px;background:#f7f9fc;border:0.5px solid #e6e9ef;border-radius:8px} .form-page .mx-comp-chip{display:inline-flex;align-items:center;background:#fff;border:0.5px solid #cdd5e0;border-radius:6px;overflow:hidden} .form-page .mx-comp-inp{border:none;font-size:11px;padding:4px 6px;width:120px;font-family:inherit;background:transparent} .form-page .mx-comp-inp:focus{outline:none;background:#eaf0fb} .form-page .mx-comp-del{border:none;background:none;color:#a32d2d;cursor:pointer;font-size:14px;line-height:1;padding:0 6px} .form-page .mx-comp-del:hover{background:#fcebeb} .form-page .mx-comp-add{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#1b4f9c;background:#eaf0fb;border:0.5px solid #b7cbec;border-radius:6px;padding:4px 10px;cursor:pointer;font-family:inherit} .form-page .mx-comp-add:hover{background:#dbe6f8} /* ER2: Management / Staff group tiers + editable group names */ .form-page .matrix-table tr.er2-tier td{background:#e9edf3;padding:0;border-top:2px solid #cdd5e0;border-bottom:1px solid #cdd5e0} .form-page .er2-tier-wrap{position:sticky;left:0;display:inline-flex;align-items:center;gap:8px;padding:7px 14px} .form-page .er2-tier-wrap i{font-size:15px;color:#5f6b7a} .form-page .er2-tier-input{background:#fff;border:0.5px solid #cdd5e0;border-radius:6px;color:#1b2740;font-size:14px;font-weight:600;padding:3px 8px;font-family:inherit;width:160px} .form-page .er2-tier-input:focus{outline:none;border-color:#1b4f9c} .form-page .er2-tier-name{color:#1b2740;font-size:14px;font-weight:600} .form-page .er2-tier-count{font-size:11px;color:#8a94a6} /* Drag handle + dragging ghost */ .form-page .er2-grip{cursor:grab;color:#b0b8c4;font-size:12px;letter-spacing:-2px;user-select:none;margin-right:1px} .form-page .er2-grip:active{cursor:grabbing} .form-page tr.er2-drag-ghost{opacity:0.4;background:#eaf0fb} /* ER2: use the full available width so the register isn't boxed in */ .form-page.er2-page{--form-max:100%} /* ER1: use the full available width so the wide register isn't boxed in */ .form-page.er1-page{--form-max:100%} /* ER1: cells auto-grow to their text, so never show a textarea scrollbar */ .form-page.er1-page .reg-table .fn{overflow:hidden} /* ER1: document name shown under the source reference pill */ .form-page.er1-page .src-name{display:block;font-size:9px;color:var(--text-3);margin-top:3px;line-height:1.3} /* ER2: centre-align the frozen Name column (name + status badges) */ .form-page .matrix-table td.mx-name-td{text-align:center} .form-page .matrix-table td.mx-name-td .mx-name{text-align:center} /* ER2: Role + Certificates hug their content so no dead gap; slack goes to the competency columns, which fill it with their inputs. */ .form-page .matrix-table th.e2-role-h,.form-page .matrix-table td.mx-role-td{width:130px;max-width:130px;text-align:center} .form-page .matrix-table td.mx-role-td .mx-role{width:100%;text-overflow:ellipsis;text-align:center} .form-page .matrix-table th.e2-certs-h,.form-page .matrix-table td.mx-certs-cell{width:150px;white-space:nowrap;text-align:center;padding:6px 10px} /* ER2: taller rows, everything centred, equal competency columns, centred table */ /* width:1px + table-layout:fixed forces columns to honour their set widths exactly (the table shrinks to the sum of column widths, so no slack is redistributed by label length — every competency column stays uniform). */ .form-page .matrix-table{width:1px;margin:0 auto;table-layout:fixed} .form-page .matrix-table th.e2-stick,.form-page .matrix-table td.mx-name-td{width:140px} .form-page .matrix-table td{text-align:center} .form-page .matrix-table td.mx-name-td,.form-page .matrix-table td.mx-role-td{padding:7px 8px} .form-page .matrix-table thead th.grp-rot{width:92px;text-align:center;vertical-align:middle} .form-page .matrix-table thead th.left{text-align:center} /* 0–4 competency rating select (colour by level) */ .form-page .rate-sel{display:block;width:100%;border:none;background:transparent;font-family:inherit;font-size:12px;font-weight:600;padding:6px 4px;outline:none;cursor:pointer;text-align:center} .form-page .rate-sel:focus{background:var(--orange-light)} .form-page .rate-sel[disabled]{cursor:default;background:var(--surface-2);color:var(--text-3)} .form-page .rate-sel.r0{color:#DC2626} .form-page .rate-sel.r1{color:#D97706} .form-page .rate-sel.r2{color:#1e3a8a} .form-page .rate-sel.r3{color:var(--green-dark)} .form-page .rate-sel.r4{color:var(--navy);font-weight:700} /* Rating-key legend swatches (in .key-bar) */ .form-page .rk-num{display:inline-block;width:16px;text-align:center;font-weight:700;margin-right:2px} .form-page .rk-num.r0{color:#DC2626} .form-page .rk-num.r1{color:#D97706} .form-page .rk-num.r2{color:#1e3a8a} .form-page .rk-num.r3{color:var(--green-dark)} .form-page .rk-num.r4{color:var(--navy)} /* Competency-rating table fills its container (few columns, unlike the * wide qualifications matrix which stays auto-width and scrolls). The * rating columns absorb the slack so the table spans the full width. */ .form-page .comp-table{width:100%} .form-page .comp-table .mx-name,.form-page .comp-table .mx-role{width:100%} /* Activity-name inputs bar (competency tab) */ .form-page .mx-acts{padding:8px 16px;background:var(--surface-2);border-bottom:0.5px solid rgba(0,0,0,0.09);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .form-page .mx-act-inp{border:0.5px solid rgba(0,0,0,0.12);border-radius:4px;padding:4px 8px;font-family:inherit;font-size:11px;outline:none;width:150px;background:var(--surface)} .form-page .mx-act-inp:focus{border-color:var(--orange)} .form-page .mx-act-inp[readonly]{background:var(--surface-2);color:var(--text-2);cursor:default} /* =============================================================== * 26. INCIDENT REPORT (F-IMS28: single-record incident form) * =============================================================== * Reuses .field/.field-grid/.field-label/.yn-*/.callout/.sig-grid. * Adds: report-header strip, severity selector + badge, large CIA * toggles, the UK GDPR 72-hour ICO countdown clock. */ /* Amber warning callout variant (ICO 72-hour notice) */ .form-page .callout.warn{background:#FEF3C7;border-left:3px solid var(--orange);color:#92400E} /* Report-header strip (reference pill + severity + review + ICO clock) */ .form-page .inc-rep-hdr{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 16px;background:var(--surface-2);border-bottom:0.5px solid var(--border);font-size:11px} .form-page .inc-rep-hdr .rh-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)} .form-page .inc-rep-hdr input[type="date"]{border:0.5px solid var(--border-med);border-radius:var(--radius);font-family:inherit;font-size:11px;padding:3px 6px;outline:none} .form-page .ref-pill{display:inline-block;background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;letter-spacing:.03em} /* Severity badge + segmented selector */ .form-page .sev-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:10px;font-weight:700} .form-page .sev-sel{display:flex;gap:6px;flex-wrap:wrap} .form-page .sev-opt{border:0.5px solid var(--border-med);border-radius:var(--radius);background:var(--surface);color:var(--text-2);font-size:11px;font-weight:700;padding:5px 16px;cursor:pointer} .form-page .sev-badge.sev-low,.form-page .sev-opt.sev-low{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .sev-badge.sev-medium,.form-page .sev-opt.sev-medium{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .sev-badge.sev-high,.form-page .sev-opt.sev-high{background:#FFEDD5;color:#9A3412;border-color:#FED7AA} .form-page .sev-badge.sev-critical,.form-page .sev-opt.sev-critical{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} /* Large CIA pillar toggles */ .form-page .inc-cia-btns{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0} .form-page .inc-cia-btn{border:0.5px solid var(--border-med);border-radius:var(--radius);background:var(--surface);color:var(--text-2);font-size:11px;font-weight:600;padding:6px 14px;cursor:pointer} .form-page .inc-cia-btn.cia-c{background:#EBF4FF;color:#0C447C;border-color:#BFDBFE} .form-page .inc-cia-btn.cia-i{background:#FEF3C7;color:#92400E;border-color:#FDE68A} .form-page .inc-cia-btn.cia-a{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} /* ICO 72-hour countdown clock */ .form-page .ico-clock{margin-left:auto;display:flex;align-items:center} .form-page .ico-countdown{font-size:11px;font-weight:600;color:#92400E;background:#FEF3C7;border:0.5px solid #FDE68A;border-radius:999px;padding:3px 10px} .form-page .ico-countdown.ico-expired{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} /* Status pill on the register list */ .form-page .inc-status.open{background:#FEF3C7;color:#92400E} .form-page .inc-status.closed{background:var(--green-light);color:var(--green-dark)} /* =============================================================== * 27. CHANGE REVIEW (F-Q23: impact checklist + approval decision) * =============================================================== * Risk level reuses .sev-sel/.sev-opt; status badge reuses .rbadge; * ref pill + report-header reuse §26. */ /* Impact checklist — tick-all-that-apply grid */ .form-page .chk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px;padding:4px 12px 12px} .form-page .chk-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text)} .form-page .chk-item input{width:14px;height:14px;accent-color:var(--orange);cursor:pointer} /* Approval decision strip */ .form-page .decision-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:0.5px solid rgba(0,0,0,.07)} .form-page .decision-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)} .form-page .decision-btn{border:0.5px solid var(--border-med);border-radius:var(--radius);background:var(--surface);color:var(--text-2);font-size:11px;font-weight:600;padding:6px 14px;cursor:pointer} .form-page .decision-btn.sel.d-approve{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .decision-btn.sel.d-reject{background:var(--red-light);color:var(--red-dark);border-color:#FECACA} .form-page .decision-btn.sel.d-pending{background:#FEF3C7;color:#92400E;border-color:#FDE68A} /* =============================================================== * 28. FILE UPLOAD (drop zone + uploaded file list) * =============================================================== */ .form-page .upload-zone{margin:10px 12px;border:1.5px dashed var(--border-med);border-radius:var(--radius-lg);padding:24px;text-align:center;cursor:pointer;color:var(--text-3);transition:border-color .15s,background .15s} .form-page .upload-zone:hover,.form-page .upload-zone.drag{border-color:var(--orange);background:var(--orange-light)} .form-page .upload-zone i{font-size:26px;color:var(--text-3)} .form-page .file-list{padding:0 12px;display:flex;flex-direction:column;gap:6px} .form-page .file-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border:0.5px solid var(--border);border-radius:var(--radius);font-size:12px;background:var(--surface-2)} .form-page .file-item i{font-size:15px;color:var(--text-3)} /* =============================================================== * 29. TICK CHECKLIST (F-Q4/F-Q6/F-Q20 staff induction / review / leaving) * =============================================================== * Numbered single-tick checklist with a .progress-track bar above it. * Each row: number, toggle button, label + guidance + optional ER2 tag. * Sits inside a .form-paper section; pairs with .sig-grid + .callout. */ .form-page .tick-list{display:flex;flex-direction:column;border-bottom:0.5px solid var(--border)} .form-page .tick-item{display:flex;align-items:flex-start;gap:10px;padding:9px 14px;border-bottom:0.5px solid rgba(0,0,0,0.06)} .form-page .tick-item:last-child{border-bottom:none} .form-page .tick-num{width:20px;height:20px;border-radius:999px;background:var(--surface-3);color:var(--text-3);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .form-page .tick-btn{width:22px;height:22px;border-radius:6px;border:1px solid var(--border-med);background:var(--surface);color:transparent;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.12s} .form-page .tick-btn i{font-size:14px} .form-page .tick-btn.checked{background:var(--green);border-color:var(--green);color:#fff} .form-page .tick-btn[disabled]{cursor:default;opacity:0.7} .form-page .tick-text{flex:1;min-width:0} .form-page .tick-label{font-size:12px;color:var(--text);line-height:1.5;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .form-page .tick-sub{font-size:11px;color:var(--text-3);margin-top:2px;line-height:1.5} .form-page .tick-tag{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;color:var(--orange-dark);background:var(--orange-light);border:0.5px solid var(--orange-mid);border-radius:3px;padding:1px 5px} /* Progress bar wrapper (uses canonical .progress-track / .progress-fill) */ .form-page .progress-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:0.5px solid var(--border)} .form-page .progress-row > i{font-size:15px;color:var(--text-3)} /* Completion banner (hidden until all items ticked) */ .form-page .complete-banner{display:none;align-items:center;gap:8px;margin:10px 12px;padding:8px 14px;background:var(--green-light);color:var(--green-dark);border:0.5px solid #86EFAC;border-radius:var(--radius);font-size:12px;font-weight:600} .form-page .complete-banner.show{display:flex} .form-page .complete-banner i{font-size:16px} /* Review sub-form body inside a .rep-card */ .form-page .rev-head-title{flex:1;font-size:13px;font-weight:600;color:var(--navy)} /* =============================================================== * 30. MANAGEMENT REVIEW (F-Q3: single-record review minutes) * =============================================================== * Reuses .toolbar/.status-bar/.form-paper/.form-header/.form-title-bar/ * .form-body/.sig-grid/.add-row-btn/.instructions. Adds the bespoke * two-column "item for review | comments" layout, navy section * headers, and the standard-coloured objective tables. */ /* Company banner + 2-col header (date / attendees) */ .form-page .mr-cobanner{background:var(--surface-2);border-bottom:0.5px solid var(--border);padding:10px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px} .form-page .mr-colabel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)} .form-page .mr-hrow{display:grid;grid-template-columns:1fr 1fr;border-bottom:0.5px solid var(--border)} .form-page .mr-hcell{border-right:0.5px solid var(--border)} .form-page .mr-hcell:last-child{border-right:none} .form-page .mr-hlabel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:8px 14px 2px;display:block} .form-page .mr-hinput{width:100%;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);padding:4px 14px 10px;outline:none} .form-page .mr-hinput:focus{background:var(--orange-light)} /* Previous-actions banner */ .form-page .mr-prev-banner{background:var(--orange-light);border-top:2px solid var(--orange);border-bottom:0.5px solid var(--border);padding:10px 14px 4px} .form-page .mr-prev-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--orange-dark);margin-bottom:4px} /* Two-column heading + Q&A rows */ .form-page .mr-chdr{display:grid;grid-template-columns:38% 62%;background:var(--navy)} .form-page .mr-chdr span{padding:7px 16px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5)} .form-page .mr-shdr{display:flex;align-items:center;gap:8px;background:var(--navy);padding:8px 16px;font-size:12px;font-weight:600;color:#fff;border-top:0.5px solid rgba(255,255,255,.1)} .form-page .mr-shdr i{font-size:14px;color:var(--orange)} .form-page .mr-shdr.env{background:#1a4a1a} .form-page .mr-shdr.hs{background:#4a1a1a} .form-page .mr-shdr.is{background:#1a1a4a} .form-page .mr-shdr .std-note{font-size:10px;font-weight:400;opacity:.6;margin-left:4px} .form-page .mr-qarow{display:grid;grid-template-columns:38% 62%;border-top:0.5px solid var(--border)} .form-page .mr-qcell{padding:10px 12px;background:var(--surface-2);border-right:0.5px solid var(--border)} .form-page .mr-qnum{font-size:10px;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px} .form-page .mr-qtitle{font-size:13px;font-weight:600;color:var(--text);line-height:1.45;margin-bottom:6px} .form-page .mr-qprompts{font-size:11px;color:var(--text-3);line-height:1.65} .form-page .mr-qrefs{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px} .form-page .mr-ref{font-size:10px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--orange-light);color:var(--orange-dark);border:0.5px solid var(--orange-mid)} .form-page .mr-acell{padding:0} .form-page .mr-ta{display:block;width:100%;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);padding:12px 16px;outline:none;resize:none;line-height:1.65;min-height:80px;overflow:hidden} .form-page .mr-ta:focus{background:var(--orange-light)} .form-page .mr-ta::placeholder{color:var(--text-3)} .form-page .mr-ta[readonly]{cursor:default} /* Summary actions list */ .form-page .mr-sumrow{padding:12px 14px;background:var(--surface-2);border-top:1.5px solid var(--border)} .form-page .mr-sumlabel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-bottom:8px} .form-page .mr-alist{display:flex;flex-direction:column;gap:6px} .form-page .mr-arow{display:flex;gap:8px;align-items:flex-start} .form-page .mr-ata{flex:1;border:0.5px solid var(--border-med);border-radius:var(--radius);padding:7px 10px;font-family:inherit;font-size:12px;color:var(--text);resize:none;min-height:36px;outline:none;line-height:1.5;background:var(--surface);overflow:hidden} .form-page .mr-ata:focus{border-color:var(--orange);background:var(--orange-light)} .form-page .mr-ainput{border:0.5px solid var(--border-med);border-radius:var(--radius);padding:7px 10px;font-family:inherit;font-size:12px;color:var(--text);outline:none;background:var(--surface)} .form-page .mr-ainput:focus{border-color:var(--orange)} .form-page .mr-own,.form-page .mr-due{width:130px;flex:none} .form-page .mr-rmbtn{border:none;background:none;cursor:pointer;color:var(--border-med);font-size:16px;padding:4px;border-radius:4px;flex-shrink:0;margin-top:2px} .form-page .mr-rmbtn:hover{color:var(--red-dark);background:var(--red-light)} /* Next review row */ .form-page .mr-nxrow{padding:10px 14px;background:var(--surface-2);border-top:0.5px solid var(--border);font-size:13px;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .form-page .mr-nxlabel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-bottom:4px} .form-page .mr-nxinput{border:none;border-bottom:0.5px solid var(--border-med);background:transparent;font-family:inherit;font-size:13px;color:var(--text);padding:2px 4px;outline:none} .form-page .mr-nxinput:focus{border-bottom-color:var(--orange)} /* Objectives section + standard-coloured headers */ .form-page .mr-objhdr{background:var(--navy);color:#fff;padding:10px 22px;font-size:13px;font-weight:600;border-top:2px solid var(--orange);display:flex;align-items:center;gap:8px;overflow:hidden} .form-page .mr-objhdr i{font-size:16px;color:var(--orange)} .form-page .mr-stdhdr{padding:8px 22px;font-size:11px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px} .form-page .mr-stag{font-size:10px;padding:2px 8px;border-radius:999px;font-weight:700;border:0.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff} .form-page .mr-q9001{background:#0c447c} .form-page .mr-q14001{background:#1a5c1a} .form-page .mr-q45001{background:#7f1d1d} .form-page .mr-q27001{background:#3c3489} /* Objectives table */ .form-page .mr-not{width:100%;border-collapse:collapse;table-layout:fixed} .form-page .mr-not th{padding:8px 12px;background:var(--surface-2);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:600;border-bottom:0.5px solid var(--border);border-right:0.5px solid var(--border);text-align:left} .form-page .mr-not th:last-child{border-right:none} .form-page .mr-not td{border-bottom:0.5px solid var(--border);border-right:0.5px solid var(--border);vertical-align:top;padding:0} .form-page .mr-not td:last-child{border-right:none} .form-page .mr-not tr:last-child td{border-bottom:none} .form-page .mr-not tr:hover td{background:#fafaf8} .form-page .mr-tcell{display:block;width:100%;border:none;background:transparent;font-family:inherit;font-size:12px;color:var(--text);padding:10px 12px;outline:none;resize:none;line-height:1.65;min-height:52px;overflow:hidden;word-wrap:break-word} .form-page .mr-tcell:focus{background:var(--orange-light)} .form-page .mr-tcell::placeholder{color:var(--text-3)} .form-page .mr-ssel{display:block;width:100%;border:none;background:transparent;font-family:inherit;font-size:11px;font-weight:600;color:var(--text-2);padding:10px 12px;outline:none;cursor:pointer} .form-page .mr-ssel:focus{background:var(--orange-light)} .form-page .mr-orm{border:none;background:none;cursor:pointer;color:rgba(0,0,0,.15);font-size:14px;padding:6px;display:block;margin:6px auto;border-radius:4px} .form-page .mr-orm:hover{color:var(--red-dark);background:var(--red-light)} /* Toast */ .form-page .mr-toast{display:none;align-items:center;gap:6px;position:fixed;bottom:20px;right:20px;background:var(--green);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.2)} @media print{ .form-page .mr-rmbtn,.form-page .mr-orm{display:none} .form-page .mr-ta,.form-page .mr-tcell{min-height:auto} } /* =============================================================== * 31. DOCUMENT REGISTER (F-IMS20: document control register) * =============================================================== * Sits inside .form-paper. Three-way classification (Customer Use = * green, Business Use = blue, Confidential = red) plus an overdue * review panel and auto-synced "live date" badges. */ .form-page .dr-titlebar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:2px solid var(--orange)} .form-page .dr-titlebar h1{font-size:18px;font-weight:700;color:var(--text)} .form-page .dr-ref{font-size:11px;color:var(--text-3);margin-top:2px} .form-page .dr-statusbar{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--surface);border-bottom:0.5px solid var(--border);flex-wrap:wrap} .form-page .dr-chip{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--border-med);background:var(--surface);color:var(--text-2)} .form-page .dr-chip.active{border-color:var(--navy);background:var(--navy);color:#fff} .form-page .dr-overdue-warn{display:none;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#DC2626;cursor:pointer;padding:4px 10px;border-radius:var(--radius);background:#FEE2E2} .form-page .dr-overdue-panel{display:none;margin:12px 20px;border:1px solid #FECACA;border-radius:var(--radius-lg);overflow:hidden} .form-page .dr-overdue-hdr{background:var(--red-light);padding:10px 16px;display:flex;align-items:center;justify-content:space-between} .form-page .dr-overdue-hdr span{font-size:13px;font-weight:700;color:#DC2626} .form-page .dr-table{width:100%;border-collapse:collapse;font-size:12px} .form-page .dr-table th{background:var(--navy);color:#fff;padding:9px 10px;font-size:11px;font-weight:600;text-align:left;white-space:nowrap} .form-page .dr-table td{padding:7px 8px;border-bottom:0.5px solid rgba(0,0,0,.07);vertical-align:middle;background:var(--surface)} .form-page .dr-table tr.hidden{display:none} .form-page .dr-table input.fi,.form-page .dr-table input.fn,.form-page .dr-table input.fd, .form-page .dr-table input.ver-inp,.form-page .dr-table input.date-inp{border:none;background:transparent;outline:none;font-size:12px;font-family:inherit;color:var(--text)} .form-page .dr-table input.fi{width:70px} .form-page .dr-table input.fn{width:100%;display:block} .form-page .dr-table input.fd{width:100%;display:block;font-size:11px;color:var(--text-3)} .form-page .dr-table input.ver-inp{width:36px;text-align:center} .form-page .dr-table input.date-inp{width:110px} .form-page .dr-table input.date-inp.overdue{color:#DC2626;font-weight:700} .form-page .dr-table input.date-inp.due-soon{color:#D97706;font-weight:600} .form-page .dr-table input:focus{background:var(--orange-light)} .form-page .dr-live-date{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#1E40AF;background:#DBEAFE;padding:2px 7px;border-radius:4px;white-space:nowrap} .form-page .dr-live-date.overdue{background:#FEE2E2;color:#DC2626} .form-page .dr-live-date.due-soon{background:#FEF3C7;color:#D97706} .form-page .dr-live-date i{font-size:10px} /* Next review date: red once the review is overdue (measured from the last review, or from the issue date where the doc has never been reviewed), amber when it falls due within 60 days. */ .form-page .dr-next-date.overdue{color:#DC2626;font-weight:700} .form-page .dr-next-date.due-soon{color:#D97706;font-weight:600} .form-page .dr-next-date.overdue i{font-size:10px;margin-left:2px} .form-page .dr-table select.class-sel{border:none;font-size:11px;font-weight:600;padding:3px 6px;border-radius:4px;cursor:pointer} .form-page .dr-table select.cl-cu{background:#D1FAE5;color:#065F46} .form-page .dr-table select.cl-bu{background:#DBEAFE;color:#1E40AF} .form-page .dr-table select.cl-co{background:#FEE2E2;color:#991B1B} .form-page .dr-table .rm-btn{background:none;border:1px solid var(--border-med);cursor:pointer;color:var(--text-3);padding:2px 6px;border-radius:4px;line-height:1;font-size:13px} .form-page .dr-table .rm-btn:hover{color:#DC2626;background:#FEE2E2;border-color:#FECACA} .form-page .dr-cls-key{display:flex;gap:16px;padding:10px 20px;font-size:11px;color:var(--text-3);flex-wrap:wrap} .form-page .dr-cls-key span{display:flex;align-items:center;gap:5px} .form-page .dr-sigstrip{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-top:2px solid var(--navy);margin-top:20px} .form-page .dr-sigcell{padding:14px 20px;background:var(--surface)} .form-page .dr-siglabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--navy);margin-bottom:8px} .form-page .dr-sigline{width:100%;border:none;border-bottom:1.5px solid var(--navy);background:transparent;font-size:14px;padding:4px 0;margin-bottom:8px;font-family:inherit;color:var(--text)} .form-page .dr-sigsub{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:6px;margin-bottom:4px} .form-page .dr-sigsub input{border:none;border-bottom:1px solid var(--border-med);background:transparent;font-size:12px;width:180px;font-family:inherit;color:var(--text)} .form-page .dr-ftr{padding:8px 20px;font-size:10px;color:var(--text-3);display:flex;justify-content:space-between;border-top:0.5px solid var(--border);margin-top:12px} /* =============================================================== * 32. READINESS REPORT (pre-audit readiness summary + Stage 1) * =============================================================== * RAG percentage summary cards (one per standard) + clause tables * reuse .reg-table. Findings tracker reuses .field-grid + .reg-table. */ .form-page .rd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:14px 16px} .form-page .rd-card{border:0.5px solid var(--border-med);border-left-width:4px;border-radius:var(--radius-lg);padding:14px 16px;background:var(--surface)} .form-page .rd-card.rd-green{border-left-color:var(--green)} .form-page .rd-card.rd-amber{border-left-color:#F59E0B} .form-page .rd-card.rd-red{border-left-color:#DC2626} .form-page .rd-score{font-size:28px;font-weight:700;line-height:1} .form-page .rd-card.rd-green .rd-score{color:var(--green-dark)} .form-page .rd-card.rd-amber .rd-score{color:#92400E} .form-page .rd-card.rd-red .rd-score{color:var(--red-dark)} .form-page .rd-label{font-size:13px;font-weight:600;color:var(--text);margin:4px 0 6px} .form-page .rd-breakdown{font-size:11px;color:var(--text-3);line-height:1.6} /* =============================================================== * 33. POLICY DOCUMENT (P-1/P-2/P-3/P-20 single-policy editor) * =============================================================== * A4-style editable policy "paper" (narrower than --form-max) with * borderless paragraphs, bullet list, approval table + sign box. */ .form-page .pol-paper{max-width:760px;margin:0 auto;background:var(--surface);border:0.5px solid var(--border-med);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.07)} .form-page .pol-doc{padding:40px 48px} .form-page .pol-doc-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px;padding-bottom:20px;border-bottom:2px solid var(--navy)} .form-page .pol-co-input{font-size:20px;font-weight:700;color:var(--navy);border:none;background:transparent;outline:none;font-family:inherit;width:300px;letter-spacing:-.02em} .form-page .pol-co-input:focus{background:var(--orange-light);padding:2px 6px;border-radius:4px} .form-page .pol-co-input[readonly]{cursor:default} .form-page .pol-doc-badges{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .form-page .pol-ref-pill{font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;border:0.5px solid} .form-page .pol-public-pill{background:var(--green-light);color:var(--green-dark);border-color:#86EFAC} .form-page .pol-title{font-size:26px;font-weight:700;color:var(--navy);margin-bottom:20px;letter-spacing:-.02em} .form-page .pol-para{width:100%;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);line-height:1.5;outline:none;resize:none;overflow:hidden;display:block;margin-bottom:6px;min-height:0} .form-page .pol-para:focus{background:var(--orange-light);padding:4px 8px;border-radius:4px;margin-left:-8px;width:calc(100% + 8px)} .form-page .pol-para[readonly]{cursor:default} .form-page .pol-bullet-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:4px} .form-page .pol-bullet-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:6px;-webkit-print-color-adjust:exact;print-color-adjust:exact} .form-page .pol-bullet-ta{flex:1;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);line-height:1.45;outline:none;resize:none;overflow:hidden;padding:1px 0;min-height:0} .form-page .pol-bullet-ta:focus{background:var(--orange-light);padding:2px 6px;border-radius:4px} .form-page .pol-bullet-ta[readonly]{cursor:default} .form-page .pol-add-bullet{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);cursor:pointer;background:none;border:none;font-family:inherit;padding:4px 0 8px 16px} .form-page .pol-add-bullet:hover{color:var(--orange)} .form-page .pol-add-bullet i{font-size:14px} .form-page .pol-approval{width:100%;border-collapse:collapse;margin-top:28px;border:0.5px solid var(--border-med)} .form-page .pol-approval td{padding:1px 12px;border:0.5px solid var(--border-med);font-size:12px;vertical-align:middle} .form-page .pol-alabel{font-weight:400;color:var(--text-3);font-size:9px;text-transform:none;letter-spacing:normal;white-space:nowrap;width:130px} .form-page .pol-approval input{border:none;background:transparent;font-family:inherit;font-size:11px;color:var(--text);outline:none;width:100%} .form-page .pol-approval input:focus{background:var(--orange-light);padding:2px 4px;border-radius:3px} .form-page .pol-approval input[readonly]{cursor:default;color:var(--text-2)} .form-page .pol-sig-box{min-height:40px;border:0.5px solid var(--border-med);border-radius:4px;background:var(--surface-2);display:flex;align-items:center;padding:6px 10px;font-size:11px;color:var(--text-3);cursor:pointer} .form-page .pol-sig-box.signed{background:transparent;border:none;padding:0;color:var(--green-dark);font-weight:600;font-size:11px;cursor:default} .form-page .pol-footer{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:12px;border-top:0.5px solid var(--border);font-size:10px;color:var(--text-3)} .form-page .pol-footer strong{color:var(--text-2)} .form-page .pol-save-bar{max-width:760px;margin:14px auto 0;background:var(--surface);border:0.5px solid var(--border-med);border-radius:var(--radius-lg);padding:12px 20px;display:flex;align-items:center;justify-content:space-between} @media print{ /* Only the policy document prints -- hide the app chrome and edit controls. */ .left-column,#sidebar,.m_group,.respon_header,.right-column .header{display:none!important} /* The app shell vertically centres and constrains its content for the screen. Left in place for print that pushed the policy down the page, squeezed it into a narrow column and left a dead band above it. Flatten the whole chain. */ html,body{margin:0!important;padding:0!important;background:#fff!important;height:auto!important;min-height:0!important} .wrapper{display:block!important;height:auto!important;min-height:0!important} /* NOTE the descendant selectors. The DOM is .right-column > div > .two, so the old '.right-column > .two' child selector never matched - .two kept its display:flex + align-items:center and VERTICALLY CENTRED the whole document, which is what pushed the policy down the page. */ .right-column, .right-column>div, .right-column .two, .right-column .dash{ display:block!important;width:100%!important;max-width:none!important; height:auto!important;min-height:0!important; align-items:normal!important;justify-content:normal!important; margin:0!important;padding:0!important } .form-page{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important} .form-page .pol-save-bar{display:none!important} .form-page .pol-add-bullet,.form-page .pol-resign{display:none!important} .form-page .pol-paper{box-shadow:none;border:none;border-radius:0;width:100%!important;max-width:none!important;margin:0!important;page:polport} /* The sign-off block sits at the FOOT of the page, not under the last paragraph: a column that fills the printable height, with .pol-approval pushed down by margin-top:auto. The printable height is the A4 page box minus the @page margins below (297mm - 2 x 14mm), stated outright rather than as 100vh, which in print is a guess at the page box. */ .form-page .pol-doc{padding:0!important;display:flex!important;flex-direction:column!important;min-height:269mm!important;box-sizing:border-box!important} .form-page .pol-doc-hdr{margin-bottom:16px!important;padding-bottom:12px!important} .form-page .pol-title{margin-bottom:14px!important} .form-page .pol-para,.form-page .pol-bullet-ta{background:transparent!important;padding:0!important;margin-left:0!important;width:100%!important;min-height:0} .form-page .pol-para{line-height:1.5!important;margin-bottom:9px!important} .form-page .pol-bullet-ta{line-height:1.45!important} .form-page .pol-bullet-row{margin-bottom:6px!important} .form-page .pol-bullet-dot{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important} .form-page .pol-approval{margin-top:auto!important;page-break-inside:avoid!important;break-inside:avoid!important} .form-page .pol-approval input{background:transparent!important} .form-page .pol-approval td{padding:0 12px!important} .form-page .pol-approval input{-webkit-appearance:none!important;appearance:none!important;height:auto!important;padding:0!important;line-height:1.25!important} .form-page .pol-footer{margin-top:18px!important} @page polport{size:A4 portrait;margin:1.4cm} } /* =============================================================== * 34. OPERATIONAL PROCEDURES (op-* index list + procedure editor) * =============================================================== * Relocated from app.css, scoped under .form-page. Self-contained * op-* namespace; colours already match the blueprint palette. */ /* index.php */ /* Operational Procedures: cap list + procedure form at 1300px, centred. */ .form-page .op-header, .form-page .op-group, .form-page .op-paper { max-width: 1300px; margin-left: auto; margin-right: auto; } .form-page .op-header { background: #fff; border: 0.5px solid rgba(0,0,0,.15); border-radius: 10px; padding: 18px 22px 14px; margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .form-page .op-header-title { font-size: 17px; font-weight: 700; color: #162032; margin: 0 0 3px; } .form-page .op-header-sub { font-size: 12px; color: #7a7a76; } .form-page .op-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .form-page .op-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .04em; } .form-page .op-badge-9001 { background: #E6F1FB; color: #0C447C; border: 0.5px solid #B5D4F4; } .form-page .op-badge-14001 { background: #EAF3DE; color: #27500A; border: 0.5px solid #C0DD97; } .form-page .op-badge-45001 { background: #FAECE7; color: #712B13; border: 0.5px solid #F5C4B3; } .form-page .op-badge-27001 { background: #EEEDFE; color: #3C3489; border: 0.5px solid #CECBF6; } .form-page .op-group { margin-bottom: 20px; } .form-page .op-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #7a7a76; padding: 0 4px 8px; display: flex; align-items: center; gap: 8px; } .form-page .op-group-label::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,.1); } .form-page .op-card { background: #fff; border: 0.5px solid rgba(0,0,0,.15); border-radius: 8px; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-decoration: none; color: inherit; transition: box-shadow .15s,border-color .15s; } .form-page .op-card:hover { border-color: #E07B2A; box-shadow: 0 2px 12px rgba(224,123,42,.13); text-decoration: none; } .form-page .op-ref { font-size: 11px; font-weight: 700; background: #E07B2A; color: #fff; padding: 3px 9px; border-radius: 4px; white-space: nowrap; letter-spacing: .03em; min-width: 68px; text-align: center; } .form-page .op-info { flex: 1; min-width: 0; } .form-page .op-title { font-size: 13px; font-weight: 600; color: #162032; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-page .op-desc { font-size: 11px; color: #7a7a76; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-page .op-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .form-page .op-std { display: flex; gap: 4px; } .form-page .op-chip { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: .04em; } .form-page .op-chip-9001 { background: #E6F1FB; color: #0C447C; border: 0.5px solid #B5D4F4; } .form-page .op-chip-14001 { background: #EAF3DE; color: #27500A; border: 0.5px solid #C0DD97; } .form-page .op-chip-45001 { background: #FAECE7; color: #712B13; border: 0.5px solid #F5C4B3; } .form-page .op-chip-27001 { background: #EEEDFE; color: #3C3489; border: 0.5px solid #CECBF6; } .form-page .op-status { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 0.5px solid; } .form-page .op-status-draft { background: #f5f5f2; color: #4a4a46; border-color: rgba(0,0,0,.15); } .form-page .op-status-finalised { background: #EAF7F2; color: #0d5c42; border-color: #86EFAC; } .form-page .op-chevron { color: #c5c5c0; font-size: 18px; } /* procedure.php */ .form-page .op-savebar { position: sticky; bottom: 0; z-index: 50; background: #fff; border-top: 0.5px solid rgba(0,0,0,.13); padding: 10px 18px; display: flex; align-items: center; gap: 10px; box-shadow: 0 -2px 12px rgba(0,0,0,.07); } .form-page .op-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; transition: background .15s,opacity .15s; } .form-page .op-btn:disabled { opacity: .45; cursor: default; } .form-page .op-btn-primary { background: #E07B2A; color: #fff; } .form-page .op-btn-primary:hover:not(:disabled) { background: #c96b22; } .form-page .op-btn-outline { background: #fff; color: #162032; border: 0.5px solid rgba(0,0,0,.2); } .form-page .op-btn-outline:hover:not(:disabled) { background: #f5f5f2; } .form-page .op-btn-finalise { background: #162032; color: #fff; } .form-page .op-btn-finalise:hover:not(:disabled) { background: #0f1824; } .form-page .op-btn-danger { background: #FEF2F2; color: #991B1B; border: 0.5px solid #FECACA; } .form-page .op-btn-danger:hover:not(:disabled) { background: #FEE2E2; } .form-page .op-save-msg { font-size: 12px; color: #7a7a76; margin-left: auto; } .form-page .op-save-msg.ok { color: #0d5c42; } .form-page .op-save-msg.err { color: #991B1B; } .form-page .op-hband { background: #162032; border-radius: 10px 10px 0 0; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; } .form-page .op-hband-left { display: flex; align-items: center; gap: 14px; } .form-page .op-ref-badge { font-size: 13px; font-weight: 700; background: #E07B2A; color: #fff; padding: 5px 13px; border-radius: 5px; letter-spacing: .04em; } .form-page .op-hband-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 2px; } .form-page .op-hband-std { font-size: 11px; color: rgba(255,255,255,.55); } .form-page .op-status-pill { font-size: 10px; font-weight: 700; padding: 4px 11px; border-radius: 999px; letter-spacing: .04em; } .form-page .op-status-pill.draft { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); } .form-page .op-status-pill.finalised { background: #86EFAC; color: #0d5c42; } .form-page .op-paper { background: #fff; border: 0.5px solid rgba(0,0,0,.15); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; margin-bottom: 20px; } .form-page .op-section { border-bottom: 0.5px solid rgba(0,0,0,.09); } .form-page .op-section:last-child { border-bottom: none; } .form-page .op-section-hdr { background: #f5f5f2; padding: 9px 18px; display: flex; align-items: center; gap: 8px; border-bottom: 0.5px solid rgba(0,0,0,.09); } .form-page .op-section-hdr .material-icons { font-size: 16px; color: #7a7a76; } .form-page .op-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7a7a76; } .form-page .op-section-body { padding: 16px 18px; } .form-page .op-grid { display: grid; gap: 0; border-top: 0.5px solid rgba(0,0,0,.09); border-left: 0.5px solid rgba(0,0,0,.09); } .form-page .op-grid-2 { grid-template-columns: 1fr 1fr; } .form-page .op-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .form-page .op-gc { border-right: 0.5px solid rgba(0,0,0,.09); border-bottom: 0.5px solid rgba(0,0,0,.09); } .form-page .op-glabel { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #7a7a76; padding: 6px 12px 2px; display: block; } .form-page .op-ginput { width: 100%; border: none; background: transparent; font-family: inherit; font-size: 13px; color: #1a1a18; padding: 4px 12px 10px; outline: none; box-sizing: border-box; } .form-page .op-ginput:focus { background: #FDF0E6; } .form-page .op-ginput[readonly] { color: #7a7a76; cursor: default; } .form-page .op-rte { width: 100%; border: none; font-family: inherit; font-size: 13px; color: #1a1a18; padding: 10px 12px; outline: none; box-sizing: border-box; resize: vertical; min-height: 80px; background: transparent; } .form-page .op-rte:focus { background: #FDF0E6; } .form-page .op-rte[readonly] { color: #7a7a76; cursor: default; } .form-page .op-bullet-list { list-style: none; margin: 0; padding: 0; } .form-page .op-bullet-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid rgba(0,0,0,.06); } .form-page .op-bullet-item:last-child { border-bottom: none; } .form-page .op-bullet-dot { width: 22px; height: 22px; background: #E07B2A; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 10px; font-weight: 700; color: #fff; } .form-page .op-bullet-inp { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 13px; color: #1a1a18; outline: none; padding: 2px 0; line-height: 1.5; } .form-page .op-bullet-inp:focus { background: #FDF0E6; border-radius: 4px; padding: 2px 6px; margin: -2px -6px; } .form-page .op-bullet-inp[readonly] { color: #4a4a46; cursor: default; } .form-page .op-bullet-del { background: none; border: none; cursor: pointer; color: #c5c5c0; padding: 2px; border-radius: 4px; display: flex; align-items: center; flex-shrink: 0; } .form-page .op-bullet-del:hover { color: #991B1B; background: #FEF2F2; } .form-page .op-bullet-del .material-icons { font-size: 16px; } .form-page .op-add-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #E07B2A; background: none; border: none; cursor: pointer; padding: 6px 0; font-family: inherit; } .form-page .op-add-btn .material-icons { font-size: 15px; } .form-page .op-add-btn:hover { color: #c96b22; } .form-page .op-step-list { list-style: none; margin: 0; padding: 0; counter-reset: steps; } .form-page .op-step-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid rgba(0,0,0,.06); counter-increment: steps; } .form-page .op-step-item:last-child { border-bottom: none; } .form-page .op-step-num { width: 24px; height: 24px; background: #162032; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 10px; font-weight: 700; color: #fff; } .form-page .op-step-inp { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 13px; color: #1a1a18; outline: none; padding: 2px 0; line-height: 1.5; } .form-page .op-step-inp:focus { background: #FDF0E6; border-radius: 4px; padding: 2px 6px; margin: -2px -6px; } .form-page .op-step-inp[readonly] { color: #4a4a46; cursor: default; } .form-page .op-check-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid rgba(0,0,0,.06); } .form-page .op-check-item:last-child { border-bottom: none; } .form-page .op-check-icon { width: 20px; height: 20px; border: 1.5px solid #7a7a76; border-radius: 4px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; } .form-page .op-check-icon .material-icons { font-size: 14px; color: #7a7a76; } .form-page .op-amend-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .form-page .op-amend-tbl th { padding: 6px 10px; background: #f5f5f2; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: #7a7a76; font-weight: 600; border: 0.5px solid rgba(0,0,0,.09); text-align: left; } .form-page .op-amend-tbl td { padding: 0; border: 0.5px solid rgba(0,0,0,.09); } .form-page .op-amend-inp { width: 100%; border: none; background: transparent; font-family: inherit; font-size: 12px; color: #1a1a18; padding: 6px 10px; outline: none; box-sizing: border-box; } .form-page .op-amend-inp:focus { background: #FDF0E6; } .form-page .op-amend-inp[readonly] { color: #7a7a76; cursor: default; } .form-page .op-amend-add { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #E07B2A; background: none; border: none; cursor: pointer; padding: 8px 0; font-family: inherit; } .form-page .op-amend-add .material-icons { font-size: 15px; } .form-page .op-sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 0.5px solid rgba(0,0,0,.09); border-left: 0.5px solid rgba(0,0,0,.09); } .form-page .op-sig-cell { border-right: 0.5px solid rgba(0,0,0,.09); border-bottom: 0.5px solid rgba(0,0,0,.09); padding: 14px 18px; } .form-page .op-sig-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #7a7a76; margin-bottom: 6px; } .form-page .op-sig-name { font-size: 13px; font-weight: 600; color: #162032; margin-bottom: 4px; } .form-page .op-sig-date-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7a7a76; } .form-page .op-sig-inp { border: 0.5px solid rgba(0,0,0,.15); border-radius: 5px; padding: 4px 8px; font-family: inherit; font-size: 12px; color: #1a1a18; outline: none; background: #fff; } .form-page .op-sig-inp:focus { border-color: #E07B2A; } .form-page .op-sig-inp[readonly] { background: #f5f5f2; color: #7a7a76; cursor: default; } .form-page .op-linked-note { font-size: 11px; color: #7a7a76; background: #f5f5f2; border-radius: 6px; padding: 8px 12px; display: flex; align-items: flex-start; gap: 6px; } .form-page .op-linked-note .material-icons { font-size: 14px; color: #E07B2A; flex-shrink: 0; margin-top: 1px; } .form-page .op-finalised-banner { background: #EAF7F2; border: 0.5px solid #86EFAC; border-radius: 8px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; color: #0d5c42; font-weight: 600; } .form-page .op-finalised-banner .material-icons { font-size: 17px; } /* =============================================================== * 25. RESPONSIVE * =============================================================== */ @media (max-width:720px){ .form-page .meta-grid, .form-page .review-grid, .form-page .metastrip{grid-template-columns:1fr} .form-page .field-grid, .form-page .rep-card-body, .form-page .rep-triple, .form-page .review-strip, .form-page .sig-grid, .form-page .swot-grid, .form-page .pestle-grid{grid-template-columns:1fr} .form-page .field{border-right:none} } /* ============================================================ F-HS4 — COSHH REGISTER (module: hands) Reuses the canonical register contract; this block adds only the COSHH-specific vocabulary: hazard filter chips, row number, bold name cell, intro note, and the SDS Document Store clip. ============================================================ */ .form-page .reg-table .rownum{text-align:center;color:var(--text-3,#9ca3af);font-size:11px;padding:8px 4px;font-weight:600;vertical-align:middle} .form-page .reg-table .fn-bold{font-weight:600} .form-page .intro-note{padding:10px 18px;background:#f5f5f2;border-bottom:0.5px solid rgba(0,0,0,.09);font-size:11px;color:var(--text-3,#7a7a76);line-height:1.6} .form-page .intro-note i{color:#E07B2A} /* Hazard filter chips (match on hazard text) */ .form-page .status-bar .filter-chip.fc-flam{background:#FEF2F2;color:#7F1D1D;border-color:#FECACA} .form-page .status-bar .filter-chip.fc-health{background:#FFF7ED;color:#9A3412;border-color:#FED7AA} .form-page .status-bar .filter-chip.fc-corr{background:#EFF6FF;color:#1E40AF;border-color:#BFDBFE} .form-page .status-bar .filter-chip.fc-flam.active{background:#7F1D1D;color:#fff;border-color:#7F1D1D} .form-page .status-bar .filter-chip.fc-health.active{background:#9A3412;color:#fff;border-color:#9A3412} .form-page .status-bar .filter-chip.fc-corr.active{background:#1E40AF;color:#fff;border-color:#1E40AF} /* "Information located" inline open-link affordance */ .form-page .reg-table td .info-cell{display:inline-block;width:calc(100% - 22px);vertical-align:middle} .form-page .reg-table td .info-open{display:none;align-items:center;justify-content:center;width:20px;height:20px;color:#0C447C;vertical-align:middle;text-decoration:none} .form-page .reg-table td .info-open:hover{color:#E07B2A} .form-page .reg-table td .spaced_50 {width: 50%; max-width: 50%;outline: crimson solid 1px;} /* SDS — Document Store clip (paperclip badge + upload) */ .form-page .sds-cell{text-align:center;white-space:nowrap;vertical-align:middle;padding:4px} .form-page .sds-clip{display:inline-flex;align-items:center;gap:2px;text-decoration:none;color:#9ca3af;font-size:13px;padding:2px 4px;border-radius:4px} .form-page .sds-clip .count{font-size:10px;font-weight:700} .form-page .sds-clip.has{color:#0C447C} .form-page .sds-clip:hover{background:#EBF4FF;color:#0C447C} .form-page .sds-clip.busy{opacity:.5;pointer-events:none} .form-page .sds-upload{border:none;background:none;cursor:pointer;color:#9ca3af;font-size:13px;padding:2px 4px;border-radius:4px} .form-page .sds-upload:hover{background:#FDF0E6;color:#E07B2A} /* ===== F-IMS20 Document Register — themed + grouped ===== */ .form-page .dr-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 16px;border-bottom:.5px solid var(--border)} .form-page .dr-controlled{margin-left:auto;font-size:12px;color:var(--text-3)} .form-page .dr-controlled b{color:var(--text-2)} .form-page .dr-group{margin:0 16px} .form-page .dr-ghdr{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:8px 12px;border-radius:6px 6px 0 0;margin-top:16px} .form-page .dr-ghdr .dr-stag{font-size:10px;font-weight:700;background:#fff;border-radius:4px;padding:2px 7px} .form-page .dr-g-all{background:#E6F1FB;color:#0C447C} .form-page .dr-g-14001{background:#EAF7F2;color:#0d5c42} .form-page .dr-g-45001{background:#FEF2F2;color:#b91c1c} .form-page .dr-g-27001{background:#EDE9FE;color:#6D28D9} .form-page .dr-table th{background:var(--navy,#162032);color:#fff;border-right-color:rgba(255,255,255,.08)} .form-page .dr-next{font-size:10px;color:#9ca3af;margin-top:2px} /* Let the top-bar org logo grow beyond the 41px .logo cap */ .right-column .header div > div.b1 .logo{height:auto;align-items:center} .right-column .header div > div.b1 .logo a{height:auto} /* F-Q11 objective ER1 raise link */ .form-page .obj-er1{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:#a85a1e;background:#FDF0E6;border:.5px solid #f0c8a8;border-radius:999px;padding:2px 8px;text-decoration:none;white-space:nowrap;flex-shrink:0} .form-page .obj-er1:hover{background:#f0c8a8} .form-page .obj-er1 i{font-size:11px} /* F-Q11 objective progress bar (dedicated, full-width) */ .form-page .obj-prog-track{width:100%;height:7px;background:#ececec;border-radius:99px;overflow:hidden} /* Cap all bespoke form/register 'paper' containers at the standard 1300px, centred (these had no max-width and spanned full width). */ .er11-paper,.ip-paper,.fq31l-paper,.fq31-paper,.iac-paper,.fq2-paper,.dcrf-paper,.dcr-paper,.fq1-paper,.fq1l-paper,.er4-paper,.er5-paper,.er1-paper,.er15-paper,.fq25-paper,.ropa-paper,.fq26-paper,.fims-paper,.er3-paper,.iar-paper,.fq27-paper,.er10-paper,.soa-paper{max-width:1300px;margin-left:auto;margin-right:auto} /* =============================================================== * PRINT: editable registers as static text * =============================================================== * Register cells use