/* *--------------------------------------------------------------- * 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:1200px; /* was 960px in the blueprint, then 1400px */ 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;gap:0} .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} /* 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} .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} .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;min-height:48px} .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 .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} /* 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} .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.8;outline:none;resize:none;overflow:hidden;display:block;margin-bottom:14px} .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:7px} .form-page .pol-bullet-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:9px} .form-page .pol-bullet-ta{flex:1;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);line-height:1.7;outline:none;resize:none;overflow:hidden;padding:1px 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:10px 14px;border:0.5px solid var(--border-med);font-size:12px;vertical-align:middle} .form-page .pol-alabel{font-weight:600;color:var(--text-3);font-size:11px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;width:130px} .form-page .pol-approval input{border:none;background:transparent;font-family:inherit;font-size:12px;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:44px;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:var(--green-light);color:var(--green-dark);font-weight:600;font-size:12px;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{ .form-page .pol-save-bar{display:none!important} .form-page .pol-paper{box-shadow:none;border:none;border-radius:0} .form-page .pol-para,.form-page .pol-bullet-ta{background:transparent!important;padding:0!important;margin-left:0!important;width:100%!important} .form-page .pol-approval input{background:transparent!important} } /* =============================================================== * 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 */ .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: #EAF7F2; color: #0d5c42; border: 0.5px solid #86EFAC; } .form-page .op-badge-27001 { background: #EEF2FF; color: #3730A3; border: 0.5px solid #A5B4FC; } .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: #EAF7F2; color: #0d5c42; border: 0.5px solid #86EFAC; } .form-page .op-chip-27001 { background: #EEF2FF; color: #3730A3; border: 0.5px solid #A5B4FC; } .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 .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} /* 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}