/* app/dcr/dcr.css — extracted VERBATIM from solene_dcr_prototype_v24.html. The prototype is the spec; do not restyle during the split. */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #1a1a1a; --navy-dark: #000000; --amber: #637947; --amber-soft: #fef3c7; --amber-strong: #92400e; --bg: #fafafa; --border: #e5e5e5; --text: #1a1a1a; --muted: #525252; --green: #16a34a; --green-dark: #15803d; --red: #dc2626; --red-dark: #991b1b; --blue: #2563eb; --blue-dark: #1d4ed8; --purple: #7c3aed; --purple-soft: #ede9fe; --purple-dark: #5b21b6; --readonly-bg: #f7f7f7; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: var(--text); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } /* === HEADER === */ .header { background: var(--navy); color: #fff; padding: 12px 24px; display: flex; align-items: center; gap: 18px; flex-shrink: 0; position: relative; } .brand { display: flex; align-items: center; gap: 18px; } .brand img { height: 34px; width: auto; display: block; padding-right: 18px; border-right: 1px solid rgba(255,255,255,0.25); } .brand .name { font-weight: 500; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; } .header .pill { padding: 4px 10px; background: rgba(255,255,255,0.1); border-radius: 12px; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; } .header .project-select { padding: 5px 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: #fff; font-size: 12px; font-family: inherit; cursor: pointer; } .header .project-select option { color: #1a1a1a; } .header .who { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 10px; } .header .who-label { font-size: 11px; } .header .who-name { color: #fff; font-weight: 500; } .who-pill { background: rgba(255,255,255,0.1); padding: 3px 9px; border-radius: 10px; font-size: 10px; font-weight: 600; color: #fff; letter-spacing: 0.04em; } .who-pill.role-admin { background: rgba(220, 38, 38, 0.85); } .who-pill.role-editor { background: rgba(37, 99, 235, 0.85); } .who-pill.role-ca { background: rgba(124, 58, 237, 0.85); } .who-pill.role-approver { background: rgba(22, 163, 74, 0.85); } .who-pill.role-readonly { background: rgba(107, 114, 128, 0.85); } /* Sign out, styled as on the dashboard and the Directory (6 Sep). */ .header .logout { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); padding: 5px 12px; border-radius: 6px; font-size: 11px; font-family: inherit; cursor: pointer; } .header .logout:hover { background: rgba(255,255,255,0.1); } /* Bell */ .notif-bell { position: relative; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: background 0.15s; } .notif-bell:hover { background: rgba(255,255,255,0.1); } .notif-bell .notif-icon { font-size: 18px; } .notif-bell .notif-count { position: absolute; top: -2px; right: -2px; background: var(--red); color: #fff; border-radius: 10px; min-width: 18px; height: 18px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } .notif-drawer { position: absolute; top: 56px; right: 24px; width: 400px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); z-index: 50; display: none; max-height: 70vh; overflow-y: auto; } .notif-drawer.open { display: block; } .notif-drawer-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; } .notif-drawer-head h3 { font-size: 14px; color: var(--navy); flex: 1; } .notif-drawer-head .mark-all { font-size: 11px; color: var(--blue); cursor: pointer; background: none; border: 0; font-family: inherit; } .notif-item { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background 0.15s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; } .notif-item:hover { background: #f9fafb; } .notif-item.unread { background: #eff6ff; } .notif-item .nicon { width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .notif-item .nicon.review { background: var(--amber); } .notif-item .nicon.zafer { background: var(--amber-strong); } .notif-item .nicon.signed { background: var(--green); } .notif-item .nicon.reject { background: var(--red); } .notif-item .ncontent { font-size: 12px; color: var(--text); line-height: 1.45; } .notif-item .ncontent strong { color: var(--navy); } .notif-item .ncontent .when { color: var(--muted); font-size: 11px; display: block; margin-top: 3px; } body.role-readonly .notif-bell { display: none; } /* === TABS === */ .tabs { background: var(--navy-dark); padding: 0 24px; display: flex; gap: 2px; flex-shrink: 0; } .tab { padding: 10px 18px; color: rgba(255,255,255,0.55); cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: 1px; border: none; background: transparent; font-family: inherit; transition: color 0.15s, background 0.15s; border-radius: 6px 6px 0 0; display: inline-flex; align-items: center; gap: 8px; } .tab:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); } .tab.active { color: var(--navy); background: var(--bg); } .tab .badge { padding: 1px 7px; background: var(--amber); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 600; } .panel { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; } .panel.active { display: flex; } .panel-header { background: #fff; border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .panel-header h1 { font-size: 16px; font-weight: 600; color: var(--navy); letter-spacing: 1px; } .panel-header .sub { color: var(--muted); font-size: 12px; } .panel-header .right { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* === BUTTONS === */ .btn { padding: 8px 14px; min-height: 32px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: inherit; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { background: #f3f4f6; border-color: #9ca3af; } .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); } .btn-primary:hover { background: #334155; } .btn-accent { background: var(--amber); color: #fff; border-color: var(--amber); } .btn-accent:hover { background: #4e5d38; } .btn-danger { background: var(--red); color: #fff; border-color: var(--red); } .btn-danger:hover { background: var(--red-dark); } .btn-success { background: var(--green); color: #fff; border-color: var(--green); } .btn-success:hover { background: var(--green-dark); } .btn-sm { padding: 4px 8px; min-height: 26px; font-size: 11px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* === TOOLBAR === */ .toolbar { padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; flex-shrink: 0; } .toolbar input[type=search], .toolbar select { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; background: #fff; } .toolbar input[type=search] { width: 280px; } .toolbar label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; } .filter-pill { padding: 6px 12px; background: var(--amber-soft); color: var(--amber-strong); border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 500; } .filter-pill.active { background: var(--amber); color: #fff; border-color: var(--amber); } /* === REGISTER TABLE — sticky horiz scrollbar always in viewport === */ .table-scroll { flex: 1; overflow: auto; min-height: 0; padding: 0 24px; background: var(--bg); } table.register { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; font-size: 13px; } table.register thead { position: sticky; top: 0; z-index: 20; } table.register thead th { position: sticky; top: 0; background: #f9fafb; border-bottom: 2px solid #d1d5db; border-right: 1px solid var(--border); padding: 8px 10px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; user-select: none; } table.register thead th.sticky-col { position: sticky; left: 0; z-index: 30; background: #f3f4f6; box-shadow: 2px 0 0 0 #d1d5db; } table.register tbody td { padding: 6px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; } table.register tbody td.sticky-col { position: sticky; left: 0; z-index: 10; background: #f9fafb; box-shadow: 2px 0 0 0 #d1d5db; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } table.register tbody td.readonly { background: var(--readonly-bg); color: var(--muted); } table.register tbody tr:hover td { background: #f9fafb; } table.register tbody tr:hover td.readonly { background: #f0f0f0; } /* v17: totals row — pinned to the bottom of the scroll area */ table.register tfoot td { position: sticky; bottom: 0; background: #f3f4f6; border-top: 2px solid #d1d5db; border-right: 1px solid var(--border); padding: 8px 10px; font-weight: 700; font-size: 12px; z-index: 15; } table.register tfoot td.sticky-col { left: 0; z-index: 25; background: #e5e7eb; box-shadow: 2px 0 0 0 #d1d5db; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; } /* Resizable column handles — apply to header + body cells */ table.register thead th { position: sticky; } table.register thead th .col-resize { position: absolute; top: 0; right: -10px; bottom: 0; width: 20px; cursor: col-resize; z-index: 1000; background: transparent; touch-action: none; } table.register thead th .col-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 2px; background: #cbd5e1; border-radius: 0; } table.register thead th .col-resize:hover { background: rgba(37, 99, 235, 0.15); } table.register thead th .col-resize:hover::after { background: var(--blue); width: 3px; } table.register thead th .col-resize.active { background: rgba(37, 99, 235, 0.3); } /* Row state colours — v18: calm 4-6% tints + coloured accent bar on the sticky column (extends the Zafer pattern). Status identity lives in the chip; the row only whispers it. Withdrawn text bumped to #6b7280 for AA contrast. */ tr.row-tbc td { background: #fff; } tr.row-tbc td.sticky-col { background: #f9fafb; } tr.row-pending-cost-review td { background: #fbfaff !important; } tr.row-pending-cost-review td.sticky-col { background: #f3f0fe !important; box-shadow: inset 4px 0 0 0 var(--purple), 2px 0 0 0 #d1d5db !important; } tr.row-pending-cost-review:hover td { background: #f3f0fe !important; } tr.row-pending-review td { background: #fefdf0 !important; } tr.row-pending-review td.sticky-col { background: #fdf8dc !important; box-shadow: inset 4px 0 0 0 var(--amber), 2px 0 0 0 #d1d5db !important; } tr.row-pending-review:hover td { background: #fdf8dc !important; } tr.row-approved td { background: #f4fdf7 !important; } tr.row-approved td.sticky-col { background: #e3fbea !important; box-shadow: inset 4px 0 0 0 var(--green), 2px 0 0 0 #d1d5db !important; } tr.row-approved:hover td { background: #e3fbea !important; } tr.row-approved-comments td { background: #f4f9ff !important; } tr.row-approved-comments td.sticky-col { background: #e4f0fe !important; box-shadow: inset 4px 0 0 0 var(--blue), 2px 0 0 0 #d1d5db !important; } tr.row-approved-comments:hover td { background: #e4f0fe !important; } tr.row-rejected td { background: #fff6f6 !important; } tr.row-rejected td.sticky-col { background: #fde8e8 !important; box-shadow: inset 4px 0 0 0 var(--red), 2px 0 0 0 #d1d5db !important; } tr.row-rejected:hover td { background: #fde8e8 !important; } tr.row-withdrawn td { background: #f7f7f7 !important; color: #6b7280 !important; font-style: italic; } tr.row-withdrawn td.sticky-col { background: #ececec !important; box-shadow: inset 4px 0 0 0 #9ca3af, 2px 0 0 0 #d1d5db !important; } tr.row-revision td { background: #f4fdfe !important; } tr.row-revision td.sticky-col { background: #e2f9fc !important; box-shadow: inset 4px 0 0 0 #06b6d4, 2px 0 0 0 #d1d5db !important; } tr.row-revision:hover td { background: #e2f9fc !important; } tr.row-zafer td { background: #fffaf1 !important; } tr.row-zafer td.sticky-col { background: #fdf0d9 !important; box-shadow: inset 4px 0 0 0 var(--amber), 2px 0 0 0 #d1d5db !important; } tr.row-zafer:hover td { background: #fdf0d9 !important; } tr.zafer-required td.sticky-col { box-shadow: inset 4px 0 0 0 var(--amber), 2px 0 0 0 #d1d5db !important; } /* v16: finalised / withdrawn rows are fully read-only in the register */ tr.row-locked td .cell-textarea, tr.row-locked td .cell-date, tr.row-locked td .cell-num, tr.row-locked td .cell-select, tr.row-locked td .cell-pill-select, tr.row-locked td .consultant-select, tr.row-locked td .drawing-attach-btn { pointer-events: none; opacity: 0.6; } /* Status chip — non-interactive label used in form, plus as fallback in register */ .status-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .status-chip[data-status="TBC"] { background: #fff; color: var(--muted); border-color: #e5e5e5; } .status-chip[data-status="Pending Cost Review"] { background: var(--purple-soft); color: var(--purple-dark); border-color: #ddd6fe; } .status-chip[data-status="Submission Required"] { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; } .status-chip[data-status="Pending Review"] { background: var(--amber-soft); color: var(--amber-strong); border-color: #fde68a; } .status-chip[data-status="Approval Required"] { background: #ffedd5; color: var(--amber-strong); border-color: var(--amber); font-weight: 700; } .status-chip[data-status="Approved"] { background: #dcfce7; color: var(--green-dark); border-color: #86efac; } .status-chip[data-status="Approved w/ Comments"] { background: #dbeafe; color: var(--blue-dark); border-color: #93c5fd; } .status-chip[data-status="Rejected"] { background: #fee2e2; color: var(--red-dark); border-color: #fca5a5; } .status-chip[data-status="Withdrawn"] { background: #f3f4f6; color: var(--muted); border-color: var(--border); font-style: italic; } .status-chip[data-status="Revision Required"] { background: #ecfeff; color: #155e75; border-color: #a5f3fc; } /* Consultant badge (Discipline Affected) */ .consultant-badge { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .consultant-select { padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 11px; font-family: inherit; font-weight: 500; cursor: pointer; } /* Title cell — bolded like the Samples Register's title column */ .title-cell { font-weight: 600; color: var(--navy); } .title-cell .rev-pill-inline { display: inline-flex; padding: 1px 6px; background: #f3f4f6; color: var(--muted); border-radius: 8px; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 6px; vertical-align: middle; } /* Cell editors */ .cell-textarea { display: block; width: 100%; min-height: 28px; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 13px; color: #1f2937; padding: 4px 8px; border-radius: 4px; resize: none; overflow: hidden; white-space: pre-wrap; word-break: break-word; line-height: 1.4; box-sizing: border-box; } .cell-textarea:hover { border-color: #d1d5db; background: #fff; } .cell-textarea:focus { border-color: var(--amber); background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(99,121,71,0.15); } .cell-text { display: inline-block; padding: 4px 6px; border-radius: 4px; min-width: 40px; } .cell-date { padding: 4px 6px; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 13px; border-radius: 4px; width: 110px; } .cell-date:hover { border-color: #d1d5db; background: #fff; } .cell-date:focus { border-color: var(--amber); background: #fff; outline: none; } .cell-num { padding: 4px 6px; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 13px; border-radius: 4px; width: 110px; text-align: right; font-variant-numeric: tabular-nums; } .cell-num:hover { border-color: #d1d5db; background: #fff; } .cell-num:focus { border-color: var(--amber); background: #fff; outline: none; } .cell-num.over-threshold { color: var(--amber-strong); font-weight: 700; } .cell-num[readonly], .cell-num[disabled] { background: var(--readonly-bg); color: var(--muted); cursor: not-allowed; pointer-events: none; } .cell-select { padding: 4px 8px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; font-size: 12px; font-family: inherit; cursor: pointer; } /* === v19: pill select system (rebuilt) — one shared geometry; dot colour via the --dot custom property. Register pills: dot left + chevron right. Form spans: dot only, no chevron. Replaces the v6/v8/v10 !important layering. === */ .cell-pill-select { appearance: none; -webkit-appearance: none; padding: 3px 22px; border: 1px solid var(--border); border-radius: 999px; background-color: #fafafa; color: var(--text); font-size: 11px; font-family: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; text-align: center; text-align-last: center; --dot: #cbd5e1; background-image: radial-gradient(circle 4px at 12px center, var(--dot) 100%, transparent 100%), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, no-repeat; background-position: left 4px center, right 8px center; background-size: 16px 16px, 10px 6px; } /* Severity dots — Planning + HIRAC */ .cell-pill-select[data-field="planningImplications"][data-value="Low"], .cell-pill-select[data-field="hiracImpact"][data-value="Low"] { --dot: var(--green); } .cell-pill-select[data-field="planningImplications"][data-value="Medium"], .cell-pill-select[data-field="hiracImpact"][data-value="Medium"] { --dot: var(--amber); } .cell-pill-select[data-field="planningImplications"][data-value="High"], .cell-pill-select[data-field="hiracImpact"][data-value="High"] { --dot: #fb923c; } .cell-pill-select[data-field="planningImplications"][data-value="Very High"], .cell-pill-select[data-field="hiracImpact"][data-value="Very High"] { --dot: var(--red); } /* Cost Impact */ .cell-pill-select[data-field="costImpact"][data-value="Neutral"] { --dot: var(--blue); } .cell-pill-select[data-field="costImpact"][data-value="Increase"] { --dot: var(--red); } .cell-pill-select[data-field="costImpact"][data-value="Decrease"] { --dot: var(--green); } /* Yes/No semantics — CoS + Safety: Yes is an issue (red). Drawings: Yes is good (green). */ .cell-pill-select[data-field="cosImplications"][data-value="yes"], .cell-pill-select[data-field="safetyImpact"][data-value="yes"] { --dot: var(--red); } .cell-pill-select[data-field="cosImplications"][data-value="no"], .cell-pill-select[data-field="safetyImpact"][data-value="no"] { --dot: var(--green); } .cell-pill-select[data-field="drawingsAttached"][data-value="yes"] { --dot: var(--green); } .cell-pill-select[data-field="drawingsAttached"][data-value="no"] { --dot: var(--red); } /* Form variants are non-interactive spans: dot only, no chevron */ .form-doc-meta .val .cell-pill-select, .form-meta-group .val .cell-pill-select, .form-title-block .cell-pill-select { min-width: 110px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 22px; cursor: default; box-sizing: border-box; background-image: radial-gradient(circle 4px at 11px center, var(--dot) 100%, transparent 100%); background-position: left 0 center; background-size: 16px 16px; } /* Drawing attach button (sits beside the Yes pill when Yes) */ .drawing-cell-wrap { display: flex; gap: 4px; align-items: center; } .drawing-attach-btn { padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 10px; color: var(--blue-dark); display: inline-flex; align-items: center; gap: 3px; } .drawing-attach-btn:hover { background: #eff6ff; border-color: var(--blue); } .drawing-attach-btn.has-file { background: #dcfce7 !important; color: var(--green-dark) !important; border-color: var(--green) !important; font-weight: 600; } .drawing-attach-btn.has-file:hover { background: #bbf7d0 !important; } /* Approvals cell — small approver pills (Samples Register pattern) */ .approvals-cell { display: inline-flex; gap: 4px; align-items: center; padding: 2px 4px; border-radius: 4px; } .approver { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: #f3f4f6; color: var(--muted); border: 1px solid var(--border); } .approver.approved { background: var(--green); color: #fff; border-color: var(--green-dark); } .approver.approved-comments { background: var(--blue); color: #fff; border-color: var(--blue-dark); } .approver.rejected { background: var(--red); color: #fff; border-color: var(--red-dark); } .approver.pending { background: #fff; color: var(--muted); border-style: dashed; } .approver.zafer.pending { background: var(--amber-soft); color: var(--amber-strong); border-color: var(--amber); border-style: dashed; } /* Zafer chip in status cell */ .zafer-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: var(--amber-soft); color: var(--amber-strong); border: 1px solid #fde68a; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; vertical-align: middle; } .rev-pill { display: inline-flex; padding: 2px 8px; background: #fff; color: var(--navy); border: 1px solid var(--border); border-radius: 8px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Empty state */ .empty-state { padding: 60px 24px; text-align: center; color: var(--muted); } .empty-state h2 { font-size: 18px; color: var(--text); margin-bottom: 8px; font-weight: 500; } /* === FORM TAB === */ .form-tab { display: grid; grid-template-columns: 340px 1fr; flex: 1; min-height: 0; background: #f3f4f6; overflow: hidden; } .form-list-pane { background: #fff; border-right: 1px solid var(--border); overflow-y: auto; } .form-list-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; position: sticky; top: 0; background: #fff; z-index: 5; } .form-list-head h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .form-list-head .filter-tabs { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; margin-left: auto; } .form-list-head .filter-tabs button { padding: 4px 9px; border: 0; background: #fff; cursor: pointer; font-size: 11px; font-family: inherit; color: var(--muted); } .form-list-head .filter-tabs button.active { background: var(--navy); color: #fff; } .form-list-item { padding: 10px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; } .form-list-item:hover { background: #f9fafb; } .form-list-item.active { background: #eff6ff; border-left: 3px solid var(--blue); padding-left: 13px; } .form-list-item .fl-num { font-weight: 700; font-size: 13px; color: var(--navy); font-variant-numeric: tabular-nums; } .form-list-item .fl-title { font-size: 13px; font-weight: 500; color: var(--navy); margin-bottom: 2px; } .form-list-item .fl-discipline { font-size: 11px; color: var(--muted); } .form-list-item .fl-status { font-size: 10px; padding: 1px 7px; border-radius: 8px; font-weight: 600; white-space: nowrap; } .form-list-item .fl-status.review { background: var(--amber-soft); color: var(--amber-strong); border: 1px solid #fde68a; } .form-list-item .fl-status.signed { background: #d1fae5; color: var(--green-dark); } .form-list-item .fl-status.rejected { background: #fee2e2; color: var(--red-dark); } .form-list-item .fl-status.pending { background: #f3f4f6; color: var(--muted); } .form-list-item .fl-status.zafer { background: var(--amber-soft); color: var(--amber-strong); border: 1px solid var(--amber); } .form-list-item .fl-status.costreview { background: var(--purple-soft); color: var(--purple-dark); border: 1px solid #ddd6fe; } .form-page { padding: 24px 24px 40px; overflow-y: auto; } .form-doc { background: #fff; border: 1px solid var(--border); border-radius: 8px; max-width: 920px; margin: 0 auto; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .form-doc-banner { background: linear-gradient(90deg, #fef3c7, #fde68a); color: var(--amber-strong); padding: 10px 24px; font-size: 12px; display: flex; align-items: center; gap: 10px; border-radius: 8px 8px 0 0; } .form-doc-banner.signed { background: linear-gradient(90deg, #ecfdf5, #d1fae5); color: var(--green-dark); } .form-doc-banner.rejected { background: linear-gradient(90deg, #fef2f2, #fee2e2); color: var(--red-dark); } .form-doc-banner.zafer { background: linear-gradient(90deg, #ffedd5, #fed7aa); color: var(--amber-strong); } .form-doc-banner.costreview { background: linear-gradient(90deg, var(--purple-soft), #ddd6fe); color: var(--purple-dark); } .form-doc-banner strong { font-weight: 600; } .form-doc-banner .spacer { flex: 1; } .form-doc-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 20px 28px 14px; border-bottom: 2px solid var(--navy); } .form-doc-head h2 { font-size: 22px; color: var(--navy); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; } .form-doc-head .form-sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; } .form-doc-head .meta-right { text-align: right; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .form-doc-head .meta-right .row { display: inline-flex; align-items: center; gap: 8px; } .form-doc-head .meta-right .dcr-no { font-size: 14px; color: var(--navy); font-weight: 700; font-family: ui-monospace, monospace; } .form-doc-body { padding: 14px 28px 20px; } .form-doc-meta { display: grid; grid-template-columns: 140px 1fr 140px 1fr; gap: 8px 14px; font-size: 12px; padding: 14px 16px; background: #fafafa; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 18px; } .form-doc-meta .lbl { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; font-weight: 600; padding-top: 2px; } .form-doc-meta .val { color: var(--text); font-weight: 500; } .form-doc-title-line { font-size: 16px; font-weight: 700; color: var(--navy); padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .form-section { margin-bottom: 18px; } .form-section h3 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 600; } .form-section p { font-size: 13px; line-height: 1.6; color: #1f2937; } .form-longtext { font-size: 13px; line-height: 1.6; padding: 12px 14px; background: #fafafa; border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; word-break: break-word; min-height: 60px; } /* Form attachments */ .form-attachments { padding: 12px 14px; background: #f9fafb; border: 1px solid var(--border); border-radius: 6px; } .form-attach-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 8px 0; align-items: center; border-bottom: 1px solid #f3f4f6; } .form-attach-item:last-child { border-bottom: 0; } .form-attach-icon { width: 32px; height: 32px; border-radius: 6px; background: #fee2e2; color: #991b1b; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .form-attach-name { font-size: 13px; font-weight: 500; color: var(--navy); display: block; } .form-attach-meta { font-size: 11px; color: var(--muted); } .form-attach-actions { display: flex; gap: 4px; } .form-attach-actions button { padding: 4px 10px; font-size: 11px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; } .form-attachments-empty { color: var(--muted); font-style: italic; font-size: 12px; padding: 8px 0; } /* Approvals strip inside Form */ .form-approvals-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .form-approver-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; } .form-approver-card.signed { border-color: var(--green); border-left: 3px solid var(--green); } .form-approver-card.signed_with_comments { border-color: var(--blue); border-left: 3px solid var(--blue); } .form-approver-card.rejected { border-color: var(--red); border-left: 3px solid var(--red); } .form-approver-card.pending { border-style: dashed; } .form-approver-card.below-threshold { background: #f9fafb; opacity: 0.65; border-style: dotted; } .form-approver-card.zafer { border-left-width: 3px; border-left-color: var(--amber); } .form-approver-card .ac-role { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; display: flex; align-items: center; gap: 4px; } .form-approver-card .ac-channel { display: inline-block; padding: 0 5px; font-size: 10px; background: #e0e7ff; color: var(--blue-dark); border-radius: 6px; font-weight: 700; } .form-approver-card .ac-channel.docusign { background: #fde68a; color: var(--amber-strong); } .form-approver-card .ac-name { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 3px; } .form-approver-card .ac-status { font-size: 11px; } .form-approver-card .ac-comments { font-size: 12px; color: #1f2937; padding: 6px 8px; background: #fafbfc; border-radius: 4px; border-left: 2px solid var(--blue); margin-top: 6px; font-style: italic; } .form-approver-card.rejected .ac-comments { border-left-color: var(--red); background: #fef2f2; } /* Sign-off action zone */ .form-action-zone { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #93c5fd; border-radius: 8px; padding: 16px 20px; margin-top: 14px; } .form-action-zone h3 { font-size: 13px; color: var(--blue-dark); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .form-action-zone .your-role { padding: 2px 9px; background: var(--blue); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 700; } .form-action-zone textarea { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 13px; min-height: 60px; margin-bottom: 12px; resize: vertical; } .form-action-zone .action-buttons { display: flex; gap: 8px; } .form-action-zone .action-buttons button { padding: 8px 16px; font-size: 13px; font-weight: 500; } .form-action-zone.blocked { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #fca5a5; } .form-action-zone.blocked h3 { color: var(--red-dark); } .form-action-zone.blocked .blockers { font-size: 13px; color: #7f1d1d; line-height: 1.55; padding-left: 20px; margin-bottom: 12px; } .form-action-zone.docusign { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: var(--amber); } .form-action-zone.docusign h3 { color: var(--amber-strong); } .form-doc-footer { padding: 12px 28px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); background: #fafafa; border-radius: 0 0 8px 8px; } .form-doc-footer .actions { margin-left: auto; display: flex; gap: 8px; } .print-banner { background: linear-gradient(135deg,#d1fae5,#a7f3d0); border: 1px solid var(--green); border-left: 4px solid var(--green-dark); border-radius: 8px; padding: 12px 16px; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #065f46; } .print-banner.rejected { background: linear-gradient(135deg,#fef2f2,#fee2e2); border-color: var(--red); border-left-color: var(--red-dark); color: #991b1b; } .print-banner strong { color: inherit; } .print-banner .spacer { flex: 1; } .print-banner code { background: #fff; padding: 2px 7px; border-radius: 4px; font-size: 11px; color: var(--navy); border: 1px solid #6ee7b7; font-family: ui-monospace, monospace; } /* === UPLOAD MODAL === */ /* STACKING, corrected 22 Aug. The DCR meeting overlay is z-index 340; this was 100 and .toast was 200, so BOTH rendered underneath it. The signature ceremony opened invisibly behind the walk, and the "Could not sign" toast — the only thing reporting a refused signature — could not be seen either, which reads as a dead button. Order is now: meeting overlay 340 < ceremony 360 < toast 380. The thing that reports an outcome must sit above the thing that caused it. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); display: none; align-items: center; justify-content: center; z-index: 360; backdrop-filter: blur(2px); } .modal-backdrop.open { display: flex; } .modal { background: #fff; border-radius: 12px; max-width: 580px; width: 92%; max-height: 80vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .modal-head { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .modal-head h2 { font-size: 16px; color: var(--navy); } .modal-head .close { margin-left: auto; cursor: pointer; padding: 4px 10px; border-radius: 4px; color: var(--muted); } .modal-head .close:hover { background: #f3f4f6; } .modal-body { padding: 18px 24px; } .drop-zone { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 32px 20px; text-align: center; transition: all 0.15s; cursor: pointer; } .drop-zone:hover, .drop-zone.dragover { border-color: var(--amber); background: #fffbeb; } .drop-zone .drop-icon { font-size: 32px; color: var(--muted); margin-bottom: 8px; } .drop-zone .drop-title { font-weight: 600; color: var(--navy); margin-bottom: 4px; } .drop-zone .drop-sub { color: var(--muted); font-size: 12px; } .attach-list { margin-top: 18px; } .modal-foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } /* === SETTINGS === */ .tab-content { padding: 24px; background: #f3f4f6; flex: 1; overflow-y: auto; } .settings-grid { display: grid; gap: 16px; max-width: 980px; } .settings-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .settings-card-head { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 12px; background: #fafafa; } .settings-card-head h2 { font-size: 13px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; } .settings-card-head .sub { font-size: 12px; color: var(--muted); } .settings-card-body { padding: 16px 18px; } .form-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; } .form-row label { font-size: 12px; color: var(--muted); width: 220px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; } .form-row input, .form-row select { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; min-width: 220px; } .form-row .row-meta { font-size: 11px; color: var(--muted); } .permission-banner { background: linear-gradient(90deg,#ecfdf5,#d1fae5); border: 1px solid #6ee7b7; border-left: 4px solid var(--green); padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #065f46; } .permission-banner.readonly { background: linear-gradient(90deg,#fef2f2,#fee2e2); border-color: #fca5a5; border-left-color: var(--red-dark); color: #7f1d1d; } .permission-banner strong { font-weight: 600; } /* An empty banner rendered as a bare green strip at the top of Settings (6 Sep): padding and gradient with nothing inside. */ .permission-banner:empty { display: none; } /* Approver list (Settings) */ table.approvers-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; } table.approvers-table th { background: #f9fafb; padding: 8px 10px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--border); } table.approvers-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } table.approvers-table input, table.approvers-table select { padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; font-family: inherit; width: 100%; } .channel-pill { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .channel-pill.in-app { background: #e0e7ff; color: var(--blue-dark); } .channel-pill.docusign { background: #fde68a; color: var(--amber-strong); } .toggle { position: relative; display: inline-block; width: 42px; height: 24px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #d1d5db; transition: 0.2s; border-radius: 24px; } .toggle .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; transition: 0.2s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .toggle input:checked + .slider { background: var(--green); } .toggle input:checked + .slider:before { transform: translateX(18px); } /* Segmented control (parallel / staggered) */ .segmented { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; } .segmented button { padding: 6px 14px; border: 0; background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; color: var(--muted); } .segmented button.active { background: var(--navy); color: #fff; } /* === CONSULTANTS === */ table.simple { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--border); font-size: 13px; border-radius: 8px; overflow: hidden; } table.simple thead th { background: #f9fafb; padding: 10px 14px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 2px solid #d1d5db; position: relative; } table.simple thead th .col-resize { position: absolute; top: 0; right: -10px; bottom: 0; width: 20px; cursor: col-resize; z-index: 10; background: transparent; touch-action: none; } table.simple thead th .col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 9px; width: 2px; background: #cbd5e1; border-radius: 1px; } table.simple thead th .col-resize:hover { background: rgba(37, 99, 235, 0.15); } table.simple tbody td { padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } table.simple tbody tr:last-child td { border-bottom: 0; } table.simple tbody tr:hover td { background: #f9fafb; } table.simple input, table.simple select { padding: 4px 8px; border: 1px solid transparent; background: transparent; font-size: 13px; font-family: inherit; border-radius: 4px; width: 100%; } table.simple input:hover, table.simple select:hover { border-color: #d1d5db; background: #fff; } table.simple input:focus, table.simple select:focus { border-color: var(--amber); background: #fff; outline: none; } .project-chip { display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0; background: #f3f4f6; color: var(--muted); border-radius: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; } .project-chip.solene { background: #dbeafe; color: var(--blue-dark); } .project-chip.fabbrica { background: #fce7f3; color: #9d174d; } .project-chip.brunswick { background: #d1fae5; color: var(--green-dark); } /* === AUDIT === */ .audit-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; background: #fff; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; } .audit-view-toggle { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; } .audit-view-toggle button { padding: 6px 12px; border: 0; background: #fff; color: var(--muted); font-size: 12px; font-family: inherit; cursor: pointer; } .audit-view-toggle button.active { background: var(--navy); color: #fff; } .audit-filters input, .audit-filters select { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; } .audit-timeline { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 0; } .audit-day { padding: 12px 20px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px dashed var(--border); margin-bottom: 4px; background: #fafafa; } .audit-entry { display: grid; grid-template-columns: 90px 36px 1fr; gap: 12px; padding: 10px 20px; border-bottom: 1px solid #f3f4f6; align-items: start; } .audit-entry:last-child { border-bottom: 0; } .audit-entry .au-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 4px; } .audit-entry .au-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .audit-entry .au-icon.create { background: var(--green); } .audit-entry .au-icon.status { background: var(--amber); } .audit-entry .au-icon.approval { background: var(--blue); } .audit-entry .au-icon.price { background: var(--purple); } .audit-entry .au-icon.email { background: #0ea5e9; } .audit-entry .au-icon.settings { background: var(--muted); } .audit-entry .au-icon.system { background: #94a3b8; } .audit-entry .au-body { font-size: 13px; line-height: 1.5; color: var(--text); } .audit-entry .au-body strong { color: var(--navy); } .audit-entry .au-body .dcr-id { font-family: ui-monospace, monospace; color: var(--blue-dark); font-weight: 600; } .audit-entry .au-body .user { color: var(--navy); font-weight: 600; } .audit-entry .au-body .field { font-family: ui-monospace, monospace; background: #f3f4f6; padding: 1px 6px; border-radius: 3px; font-size: 11px; } .audit-entry .au-body .old { color: var(--red-dark); text-decoration: line-through; } .audit-entry .au-body .new { color: var(--green-dark); font-weight: 500; } /* === HELP === */ .help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; max-width: 1100px; align-items: start; } .help-role-card { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 8px; padding: 18px; } .help-role-card.admin { border-left-color: #dc2626; } .help-role-card.editor { border-left-color: #2563eb; } .help-role-card.ca { border-left-color: #7c3aed; } .help-role-card.role-approver { border-left-color: #16a34a; } .help-role-card.readonly { border-left-color: #6b7280; } .help-role-card .role-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .help-role-card .role-pill { padding: 3px 9px; color: #fff; border-radius: 10px; font-size: 10px; font-weight: 700; } .help-role-card.admin .role-pill { background: #dc2626; } .help-role-card.editor .role-pill { background: #2563eb; } .help-role-card.ca .role-pill { background: #7c3aed; } .help-role-card.role-approver .role-pill { background: #16a34a; } .help-role-card.readonly .role-pill { background: #6b7280; } .help-role-card .role-sub { font-size: 11px; color: var(--muted); } .help-role-card h3 { font-size: 13px; color: var(--navy); margin-bottom: 6px; margin-top: 10px; font-weight: 600; } .help-role-card ul { font-size: 13px; color: #1f2937; line-height: 1.55; padding-left: 18px; } .help-role-card ul.cant { color: var(--muted); } .help-role-card ul.cant li::marker { color: var(--muted); } .help-section { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 18px 24px; max-width: 1100px; margin-bottom: 16px; } .help-section h3 { font-size: 13px; color: var(--navy); font-weight: 600; margin-bottom: 6px; } .help-section p { font-size: 13px; color: #374151; line-height: 1.55; margin-bottom: 12px; } /* === ROLE-BASED LOCKING === */ body.role-readonly .toolbar #add-dcr-btn, body.role-readonly table.register tbody td .cell-textarea, body.role-readonly table.register tbody td .cell-date, body.role-readonly table.register tbody td .cell-num, body.role-readonly table.register tbody td .cell-select, body.role-readonly table.register tbody td .cell-pill-select, body.role-readonly table.register tbody td .drawing-attach-btn, body.role-readonly table.register tbody td .consultant-select { pointer-events: none; opacity: 0.55; } body.role-readonly table.simple input, body.role-readonly table.simple select { pointer-events: none; opacity: 0.55; } body.role-readonly .form-action-zone { display: none !important; } body.role-approver .toolbar #add-dcr-btn, body.role-approver table.register tbody td .cell-textarea, body.role-approver table.register tbody td .cell-date, body.role-approver table.register tbody td .cell-num, body.role-approver table.register tbody td .cell-select, body.role-approver table.register tbody td .cell-pill-select, body.role-approver table.register tbody td .drawing-attach-btn, body.role-approver table.register tbody td .consultant-select { pointer-events: none; opacity: 0.55; } /* Editor cannot edit Variation Cost */ body.role-editor table.register tbody td .cell-num.variation-cost { pointer-events: none; opacity: 0.55; background: var(--readonly-bg); } body.role-editor #settings-panel .row-control, body.role-editor #settings-panel input, body.role-editor #settings-panel select, body.role-editor #settings-panel .toggle, body.role-editor #settings-panel .segmented { pointer-events: none; opacity: 0.55; } body.role-ca #settings-panel .row-control, body.role-ca #settings-panel input, body.role-ca #settings-panel select, body.role-ca #settings-panel .toggle, body.role-ca #settings-panel .segmented { pointer-events: none; opacity: 0.55; } /* === TOAST === */ .toast { position: fixed; bottom: 50px; right: 20px; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 10px 24px rgba(0,0,0,0.2); z-index: 380; max-width: 360px; display: none; } .toast.show { display: block; animation: toastIn 0.2s; } @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .toast strong { color: #fff; } /* === PRINT === */ @media print { body { overflow: visible; height: auto; } .header, .tabs, .panel-header, .form-list-pane, .form-doc-footer, .form-action-zone, .form-doc-banner, .print-banner, .modal-backdrop, .notif-drawer, .toast { display: none !important; } .panel:not(#dcr-form-panel) { display: none !important; } .panel { overflow: visible; min-height: 0; } .form-tab { grid-template-columns: 1fr !important; background: #fff !important; overflow: visible; } .form-page { padding: 0 !important; overflow: visible; } .form-doc { box-shadow: none !important; border: 0 !important; max-width: none !important; } .form-doc-head { padding: 14mm 14mm 6mm !important; } .form-doc-body { padding: 6mm 14mm 14mm !important; } @page { size: A4 portrait; margin: 0; } } /* === v6: A11y focus rings === */ :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; } button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .approver:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } /* === v6: Bigger approval pills (a11y touch target) === */ .approver { width: 26px; height: 26px; font-size: 11px; } .approvals-cell { gap: 5px; } /* === v6: Title column — prominent === */ .title-cell { font-weight: 600; color: var(--navy); font-size: 14px; } /* === v6: DCR-### sticky-col format (was bare '001') === */ table.register tbody td.sticky-col { text-align: left; padding: 6px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } table.register tbody td.sticky-col .rev-pill { display: inline-block; margin-left: 6px; font-size: 10px; padding: 1px 5px; vertical-align: middle; } /* === v6: Combined Cost Impact cell — pill + $ sub-line === */ .cost-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .cost-cell .cost-amount { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; } .cost-cell .cost-amount.muted { color: var(--muted); font-weight: 400; font-style: italic; } .cost-cell .cost-amount.over-thr { color: var(--amber-strong); } .cost-cell .cost-attach { margin-top: 2px; } /* === v6: Combined Raised By cell — company + discipline sub-line === */ .raised-by-cell { display: flex; flex-direction: column; gap: 2px; } .raised-by-cell .rb-company { font-size: 13px; color: var(--text); font-weight: 500; } .raised-by-cell .rb-discipline { font-size: 11px; color: var(--muted); } .raised-by-cell .rb-discipline .consultant-badge { padding: 1px 7px; font-size: 10px; } /* === v6: Welcome banner === */ .welcome-banner { background: linear-gradient(90deg, #1a1a1a, #334155); color: #fff; padding: 14px 24px; display: flex; align-items: center; gap: 16px; border-bottom: 2px solid var(--amber); flex-shrink: 0; } .welcome-banner .wb-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--amber); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; } .welcome-banner .wb-body { flex: 1; } .welcome-banner .wb-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; } .welcome-banner .wb-text { font-size: 12px; color: rgba(255,255,255,0.85); line-height: 1.4; } .welcome-banner .wb-text strong { color: #fff; } .welcome-banner .wb-actions { display: flex; gap: 8px; } .welcome-banner .wb-actions button { padding: 6px 12px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: inherit; } .welcome-banner .wb-actions button:hover { background: rgba(255,255,255,0.2); } .welcome-banner .wb-actions .btn-tour { background: var(--amber); border-color: var(--amber); font-weight: 600; } /* === v6: Sticky sign-off zone on form === */ .form-page { padding-bottom: 100px; } .form-action-zone.sticky-action { position: sticky; bottom: 16px; box-shadow: 0 -2px 16px rgba(0,0,0,0.12); z-index: 5; } /* === v6: Form title prominence === */ .form-doc-head h2 { font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .form-title-block { padding: 16px 28px 14px; border-bottom: 1px solid var(--border); background: #fafafa; } .form-title-block .ft-title { font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.25; margin-bottom: 4px; } .form-title-block .ft-meta { font-size: 12px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .form-title-block .ft-meta .status-chip { font-size: 11px; } /* === v6: Form meta grouped — Identity / Implications / Approval state === */ .form-meta-group { background: #fafafa; border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; margin-bottom: 14px; } .form-meta-group h4 { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--border); } .form-meta-group .fmg-rows { display: grid; grid-template-columns: 140px 1fr 140px 1fr; gap: 6px 14px; font-size: 12px; } .form-meta-group .fmg-rows .lbl { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; font-weight: 600; padding-top: 2px; } .form-meta-group .fmg-rows .val { color: var(--text); font-weight: 500; } /* === v6: Modal — ESC support already added in JS === */ /* === v6: Header right side — kept simple === */ .header .who { gap: 8px; } /* === v8: Help grid — align cards to top, prevent stretch === */ .help-grid { align-items: start; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .help-role-card { display: flex; flex-direction: column; } .help-role-card ul { margin-bottom: 0; } /* === v10: Pricing attach button — green when a file is attached === */ .drawing-attach-btn.pricing-attach-btn.has-file { background: #dcfce7 !important; color: var(--green-dark) !important; border-color: var(--green) !important; font-weight: 600; } .drawing-attach-btn.pricing-attach-btn.has-file:hover { background: #bbf7d0 !important; } /* === v12: Variation Cost — center the N/A placeholder when locked === */ .cell-num.variation-cost[disabled] { text-align: center; font-style: italic; color: var(--muted); } .cell-num.variation-cost[disabled]::placeholder { text-align: center; } /* v17: Neutral shows a real 0 styled like a normal (Increase) value — right- aligned, tabular numerals, regular colour — while staying locked. */ .cell-num.variation-cost.neutral-zero[disabled] { text-align: right; font-style: normal; color: var(--text); background: transparent; } /* === v12: Form sidebar collapse toggle === */ .sidebar-toggle-btn { background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 13px; color: var(--muted); font-family: inherit; } .sidebar-toggle-btn:hover { background: #f3f4f6; color: var(--text); } body.form-sidebar-collapsed .form-tab { grid-template-columns: 44px 1fr; } body.form-sidebar-collapsed .form-list-pane { overflow: hidden; } body.form-sidebar-collapsed .form-list-head h3, body.form-sidebar-collapsed .form-list-head .filter-tabs, body.form-sidebar-collapsed #form-search, body.form-sidebar-collapsed .form-list-pane #form-list-body { display: none; } body.form-sidebar-collapsed .form-list-head { padding: 12px 6px; justify-content: center; border-bottom: 1px solid var(--border); } body.form-sidebar-collapsed .sidebar-toggle-btn::before { content: "\BB"; } body.form-sidebar-collapsed .sidebar-toggle-btn { content-visibility: hidden; } body.form-sidebar-collapsed .sidebar-toggle-btn { font-size: 0; } body.form-sidebar-collapsed .sidebar-toggle-btn::before { font-size: 14px; } /* === v19: editability affordance — editable cells show a faint dashed underline === */ table.register tbody td .cell-textarea, table.register tbody td .cell-date, table.register tbody td .cell-num:not([disabled]) { border-bottom: 1px dashed #d6d6d6; } table.register tbody td .cell-textarea:hover, table.register tbody td .cell-textarea:focus, table.register tbody td .cell-date:hover, table.register tbody td .cell-date:focus, table.register tbody td .cell-num:hover, table.register tbody td .cell-num:focus { border-bottom-style: solid; } tr.row-locked td .cell-textarea, tr.row-locked td .cell-date, tr.row-locked td .cell-num, body.role-readonly table.register tbody td .cell-textarea, body.role-readonly table.register tbody td .cell-date, body.role-readonly table.register tbody td .cell-num, body.role-approver table.register tbody td .cell-textarea, body.role-approver table.register tbody td .cell-date, body.role-approver table.register tbody td .cell-num { border-bottom-color: transparent; } /* === v20: signature record on approval cards === */ .ac-sig { font-size: 11px; color: var(--muted); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); line-height: 1.5; } .ac-sig .sig-script { font-family: 'Segoe Script', 'Bradley Hand', cursive; font-size: 14px; color: var(--navy); } .ac-sig .sig-img { height: 36px; max-width: 100%; vertical-align: middle; display: inline-block; } /* === v20: superseded attachment versions === */ .attach-versions { margin-top: 6px; padding-left: 42px; } .attach-version-row { font-size: 11px; color: var(--muted); padding: 2px 0; } /* === v19: dot legend (toolbar) === */ .dot-legend { display: inline-flex; gap: 10px; align-items: center; font-size: 10px; color: var(--muted); } .dot-legend span { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; } .dot-legend .d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* === v19: touch targets — attach buttons meet 24px minimum === */ .drawing-attach-btn { min-height: 24px; min-width: 28px; padding: 3px 8px; font-size: 12px; } /* === v19: chip consolidation — one geometry for every pill === */ .status-chip, .cell-pill-select, .zafer-chip, .rev-pill, .who-pill, .project-chip, .channel-pill, .consultant-badge, .filter-pill, .fl-status, .title-cell .rev-pill-inline { border-radius: 999px; } .status-chip, .consultant-badge, .filter-pill { font-size: 11px; } .zafer-chip, .rev-pill, .who-pill, .project-chip, .channel-pill, .fl-status, .title-cell .rev-pill-inline { font-size: 10px; } /* === v19: print the register table only (Print button on the Register tab) === */ @media print { body.print-register #dcr-form-panel { display: none !important; } body.print-register #register-panel { display: flex !important; overflow: visible !important; } body.print-register .toolbar, body.print-register .panel-header, body.print-register #register-empty { display: none !important; } body.print-register .table-scroll { overflow: visible !important; padding: 0 !important; } body.print-register table.register { font-size: 10px; width: 100% !important; } body.print-register table.register th, body.print-register table.register td { width: auto !important; min-width: 0 !important; padding: 4px 6px !important; white-space: normal; } body.print-register table.register .cell-textarea { font-size: 10px; border: 0; } body.print-register .col-resize { display: none !important; } } /* === v18: stage-count chips (register header) — dashboard + filter in one === */ .stage-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; } .stage-chip { padding: 4px 10px; border: 1px solid var(--border); background: #fff; border-radius: 12px; font-size: 12px; font-family: inherit; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s; } .stage-chip:hover { border-color: #9ca3af; color: var(--text); } .stage-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); } .stage-chip .sc-n { font-weight: 700; font-variant-numeric: tabular-nums; } /* === v18: form Actions menu === */ .actions-menu { position: relative; flex-shrink: 0; } .actions-menu-list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 240px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); z-index: 40; display: none; padding: 4px; } .actions-menu-list.open { display: block; } .actions-menu-list button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 5px; } .actions-menu-list button:hover { background: #f3f4f6; } /* === v18: revision history on the form === */ .rev-history-item { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: #fafafa; font-size: 12px; } .rev-history-item .rh-date { color: var(--muted); font-size: 11px; } .rev-history-item .rh-signers { flex-basis: 100%; color: #374151; font-size: 12px; line-height: 1.5; } /* === v18: new-row flash === */ @keyframes rowFlash { from { box-shadow: inset 0 0 0 999px rgba(99,121,71,0.16); } to { box-shadow: none; } } tr.row-flash td { animation: rowFlash 1.8s ease-out; } /* === v18: tablet pass (iPad landscape/portrait). Phone remains out of scope — see handover doc. Register keeps horizontal scroll; form stacks. === */ @media (max-width: 1024px) { .form-tab { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .form-list-pane { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--border); } .form-approvals-strip { grid-template-columns: repeat(2, 1fr) !important; } .form-doc-meta, .form-meta-group .fmg-rows { grid-template-columns: 130px 1fr; } .help-grid { grid-template-columns: 1fr; } .toolbar input[type=search] { width: 180px; } .notif-drawer { width: calc(100vw - 32px); right: 16px; } .panel-header { flex-wrap: wrap; } } .ei{width:1.05em;height:1.05em;vertical-align:-0.16em;margin-right:4px;flex-shrink:0} /* Inline dropzones — first attachment without a modal step. */ .inline-drop{ display:flex; flex-direction:column; align-items:center; gap:4px; border:1.5px dashed #cbd5e1; border-radius:9px; padding:18px 14px; cursor:pointer; background:#fcfcfd; transition:border-color .12s, background .12s; } .inline-drop:hover, .inline-drop:focus{ border-color:var(--accent); background:#f7f9f4; outline:none; } .inline-drop.over{ border-color:var(--accent); background:#f0f4ec; } .inline-drop-title{ font-size:12.5px; font-weight:600; color:#334155; } .inline-drop-sub{ font-size:11px; color:var(--muted); } /* === STP-09: print-only provenance === A printed notice can end up in a variation claim detached from the app. The page must state what it is — during the parallel run it is a copy of a record, not the record. */ .print-only { display: none; } @media print { .print-only { display: block !important; } .print-attest { margin: 8mm 14mm 0; padding-top: 6mm; border-top: 1.5px solid #1b2836; page-break-inside: avoid; } .print-attest h3 { font-size: 11pt; margin: 0 0 4mm; color: #1b2836; } .print-sig-table { width: 100%; border-collapse: collapse; font-size: 9pt; margin-bottom: 4mm; } .print-sig-table th, .print-sig-table td { border: 0.5pt solid #9ca3af; padding: 2mm 3mm; text-align: left; } .print-sig-table th { background: #f3f4f6; font-weight: 700; } .print-note { font-size: 8pt; line-height: 1.5; color: #374151; margin: 0 0 3mm; } /* The signature in the printed approver cell. .sig-script is scoped to .ac-sig on screen, so without this the printed signature rendered in the table's body font and read as a second copy of the name. */ .print-sig-table .sig-script { font-family: 'Segoe Script', 'Bradley Hand', cursive; font-size: 10pt; color: #1b2836; } /* Comments recorded against a decision. A signatory is required to give one for Approve w/ Comments or Reject; a printed record carrying the decision without the reason carries half the decision. */ .print-comments { margin: 0 0 4mm; page-break-inside: avoid; } .print-comments h4 { font-size: 9pt; margin: 0 0 2mm; color: #1b2836; } .print-comments ul { margin: 0; padding-left: 5mm; } .print-comments li { font-size: 8.5pt; line-height: 1.5; color: #374151; margin-bottom: 1.5mm; } .print-parallel { border: 1pt solid #92400e; background: #fffbeb; color: #92400e; padding: 3mm; } .print-provenance { color: #6b7280; font-size: 7.5pt; } } /* === STP-09: strip interactive chrome from the printed page === A PDF is read, not clicked. Buttons that cannot be pressed are noise on a document that may end up in a variation claim — and the on-screen approval cards duplicate the approval-record table, which is worse than noise: the same facts twice, in two formats, on a page meant to be authoritative. */ @media print { .form-doc .btn, .form-doc button, .actions-menu, .form-attach-actions, .inline-drop, .attach-versions a { pointer-events: none; } .form-doc .btn, .form-doc button, .actions-menu, .form-attach-actions, .inline-drop { display: none !important; } /* The approvals strip is the screen's version of the record; the print block's table is the document's. Keep one. */ .screen-only { display: none !important; } /* Superseded version links print as plain text — a hyperlink on paper is a dead end, but the filename is still evidence of what existed. */ .attach-versions a { text-decoration: none; color: #374151; } } /* Approval-record colouring. Colour must not be the only signal — the decision word says the same thing, so this survives a monochrome printer and a colour-blind reader (audit item 11). */ @media print { .print-sig-table tr.sig-approved td { background: #f0f7f0; } .print-sig-table tr.sig-approved .sig-decision { color: #166534; font-weight: 700; } .print-sig-table tr.sig-comments td { background: #f4f7f0; } .print-sig-table tr.sig-comments .sig-decision { color: #3f6212; font-weight: 700; } .print-sig-table tr.sig-rejected td { background: #fdf2f2; } .print-sig-table tr.sig-rejected .sig-decision { color: #991b1b; font-weight: 700; } .print-sig-table tr.sig-pending .sig-decision { color: #92400e; font-weight: 700; } /* Browsers strip background colour when printing unless told not to. */ .print-sig-table, .print-sig-table tr, .print-sig-table td, .print-parallel { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ===================================================================== DCR Meeting overlay — ported verbatim from solene_dcr_prototype_v24 (L757-788) on 22 Aug. MISSING SINCE SLICE 5. meeting.js builds 26 distinct mtg-* classes and dcr.css carried ZERO rules for any of them, so the overlay rendered as unstyled flow content: no backdrop, no card, no scroll containment. The ids and class names match the prototype exactly, so this is a straight copy rather than a reauthoring. The lesson is the split's own: CSS was ported "verbatim" per slice, and slice 5's JS arrived without the stylesheet block that belonged to it. Nothing checks that a class a module emits has a rule anywhere — the element-id gate has no CSS equivalent. ===================================================================== */ /* v25: DCR Meeting overlay */ #dcr-meeting-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:340;align-items:center;justify-content:center;padding:20px} #dcr-meeting-overlay.open{display:flex} .mtg-card{background:#fff;border-radius:12px;width:720px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.3)} .mtg-head{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--navy);color:#fff} .mtg-head .mtg-prog{margin-left:auto;font-size:12px;color:rgba(255,255,255,.7)} .mtg-head .mtg-close{cursor:pointer;color:rgba(255,255,255,.75);font-size:16px} .mtg-body{padding:18px 20px;overflow:auto} .mtg-sub{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:14px} .mtg-section{margin-bottom:16px} .mtg-section h4{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 8px} .mtg-attendees{display:flex;flex-direction:column;gap:6px} .mtg-att{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer} .mtg-dcrlist{display:flex;flex-direction:column;gap:4px} .mtg-dcritem{font-size:12px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;gap:8px} .mtg-empty{font-size:12.5px;color:var(--muted);font-style:italic} .mtg-dcr{border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:14px;background:#fafafa} .mtg-dcr-h{display:flex;align-items:center;gap:8px;margin-bottom:4px} .mtg-dcr h3{font-size:15px;margin:2px 0 6px;color:var(--navy)} .mtg-desc{font-size:12.5px;color:#374151;line-height:1.5;margin-bottom:10px} .mtg-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted)} .mtg-meta b{color:var(--navy);font-weight:600;margin-right:4px} .mtg-signrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f3f4f6;font-size:12.5px;flex-wrap:wrap} .mtg-signrow.done{color:var(--green-dark)} .mtg-signrow.wait{color:var(--muted);font-style:italic} .mtg-signrow .mtg-name{width:130px} /* The comment is a textarea on its own line under the decision (12 Sep); it was an squeezed beside a