n.siegfried
fcba74b584
Layout — the reported "skinny scrolling windows" - .content-area capped the whole suite at 1000px, so on a 1920 screen the embedded Work Package Creator ran in a ~930px column with its own scrollbar inside the page's. The wizard now caps at 1700px and the Creator/Dashboard tab goes full-bleed: the iframe fills the window below the app chrome and owns the only scrollbar. Needed `flex: none` on the content area — as a `flex: 1` item its flex-basis overrode `height`, leaving the used height indefinite so the child's `height: 100%` collapsed the iframe to its 150px default. - The SOP wizard's fields were one per row; they now flow into ~340px columns. Navigator — now an auto-hiding drawer - It was a fixed 262px column that stole width from the form AND was hidden below 1100px, so embedded (the normal path) it never appeared at all — that's the "broken side menu". It's now an overlay drawer behind a slim always-visible edge handle: hover or tap to open, move away / Escape / pick a package to close, or pin it to keep it open (pinned shifts the form and the page chrome across, and is remembered). A gutter keeps the handle off the section-nav chips. Bugs found while checking the site over - collectStepData() still read the SOP team fields as text inputs, but wave 1 made them account pickers — so it wrote a user ID into state.team.pm where the display NAME belongs, and the SOP would print `user_ab12…` as the PM. Now synced properly from the pickers. - loadSampleData() set .value on those selects with fictional names; setting an unmatched value on a <select> silently does nothing, so the sample lost its team. It now stores them as names without an account, which the picker shows as "(no account)". - My earlier CSS block replacement had deleted the SOP-chip, people-picker and critical-tag styles. Restored. Same picker everywhere the SOP names someone - Sign-off roles (step 3, required and optional) are account pickers now, storing userId alongside the name, so a signature belongs to an account that can be notified. Titles stay free text. Per-project permissions (asked for: "change project permissions for individual users") - project_members.role overrides the account's role on that project, so a PM on one job can be a Project User on another. Empty = inherit; app admin is admin everywhere. effective_role() feeds require_project_admin, so WP delete, completed- SOP edits and project delete are all judged per project. - Project access is now its own column in the admin console (it was buried among the action buttons, which is why it couldn't be found), showing the project count per account; the dialog sets access plus the role on each project. - The members endpoint reports each person's effective role on that project. Verified: 157 API checks across five suites on clean databases (44 permissions + 22 password reset + 34 search/localization + 39 gates/notifications + 18 new per-project permission checks), 16 drawer-behaviour + 4 pinned-mode UI checks driven in headless Chrome, and probes confirming the team/sign-off pickers populate and no longer corrupt state.team on step navigation. Screenshots reviewed at 1920x1080. Service-worker cache bumped to v3 so browsers pick up the new shell. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
828 lines
52 KiB
CSS
828 lines
52 KiB
CSS
/* Fonts are referenced by name only — no external @import, so the app works
|
||
fully behind a firewall. If IBM Plex is installed/self-hosted it is used;
|
||
otherwise it falls back to the system UI fonts. */
|
||
|
||
/* Embedded-in-Suite tweaks */
|
||
body.embedded .embed-hide { display: none !important; }
|
||
body.embedded .embed-first { margin-left: auto; }
|
||
|
||
:root {
|
||
--bg: #f4f4f4;
|
||
--surface: #ffffff;
|
||
--surface2: #f4f4f4;
|
||
--border: #e0e0e0;
|
||
--border-strong: #8d8d8d;
|
||
--text: #161616;
|
||
--text-muted: #525252;
|
||
--text-dim: #8d8d8d;
|
||
--accent: #0f62fe;
|
||
--accent-dim: #edf5ff;
|
||
--accent-green: #198038;
|
||
--accent-green-dim: #defbe6;
|
||
--accent-amber: #8e6a00;
|
||
--accent-amber-dim: #fdf6dd;
|
||
--red: #da1e28;
|
||
--red-dim: #fff1f1;
|
||
--radius: 0;
|
||
--shadow: none;
|
||
--shadow-lg: 0 4px 16px rgba(20,30,50,.12);
|
||
--mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
|
||
--sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--sans);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ── HEADER ── */
|
||
.header {
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 14px 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.header-logo {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: .15em;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
}
|
||
.header-sep { color: var(--border-strong); }
|
||
.header-title { font-size: 13px; font-weight: 500; color: var(--text-muted); }
|
||
|
||
/* ── STEPPER ── */
|
||
.stepper-wrap { padding: 22px 32px 0; max-width: 1000px; margin: 0 auto; }
|
||
.stepper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.step-tab {
|
||
flex: 1 0 10%;
|
||
padding: 9px 6px;
|
||
text-align: center;
|
||
font-family: var(--mono);
|
||
font-size: 9.5px;
|
||
font-weight: 500;
|
||
letter-spacing: .04em;
|
||
color: var(--text-dim);
|
||
background: var(--surface);
|
||
border-right: 1px solid var(--border);
|
||
border-bottom: 2px solid transparent;
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
line-height: 1.35;
|
||
text-transform: uppercase;
|
||
}
|
||
.step-tab:hover { background: var(--surface2); color: var(--text-muted); }
|
||
.step-tab.active { background: var(--accent-dim); color: var(--accent); border-bottom-color: var(--accent); }
|
||
.step-tab.done { color: var(--accent-green); background: var(--accent-green-dim); }
|
||
.step-num { display: block; font-size: 9px; opacity: .65; margin-bottom: 2px; }
|
||
|
||
/* ── MAIN ──
|
||
The form uses the full width it's given. The work-package navigator is an
|
||
auto-hiding overlay drawer (see below) rather than a column, so it never takes
|
||
width away from the form — which matters most when this page is embedded in the
|
||
suite's tab and every pixel is shared with the app chrome. */
|
||
.wp-layout { display: block; width: 100%; margin: 0; }
|
||
.main { min-width: 0; max-width: none; margin: 0; padding: 22px 28px 72px var(--gutter,34px);
|
||
transition: padding-left .18s ease; }
|
||
|
||
.section { display: none; }
|
||
.section.active { display: block; animation: fade .25s ease; }
|
||
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
padding: 28px 32px;
|
||
}
|
||
|
||
.section-header { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
|
||
.section-label {
|
||
font-family: var(--mono); font-size: 10px; font-weight: 600;
|
||
letter-spacing: .2em; color: var(--accent); text-transform: uppercase; margin-bottom: 5px;
|
||
}
|
||
.section-title { font-size: 22px; font-weight: 300; color: var(--text); letter-spacing: -.02em; }
|
||
.section-desc { margin-top: 5px; font-size: 13px; color: var(--text-muted); font-weight: 400; }
|
||
|
||
/* ── FIELDS ── */
|
||
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
|
||
.field-grid.col3 { grid-template-columns: 1fr 1fr 1fr; }
|
||
.field-grid.col1 { grid-template-columns: 1fr; }
|
||
/* On a wide screen let the two-up grids flow into 3–4 columns instead of
|
||
stretching two fields across the whole card. */
|
||
@media (min-width: 1200px) {
|
||
.field-grid:not(.col1):not(.col3) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
|
||
}
|
||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||
.field.span2 { grid-column: span 2; }
|
||
|
||
label {
|
||
font-family: var(--mono); font-size: 10px; font-weight: 500;
|
||
letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase;
|
||
}
|
||
label .req { color: var(--accent); margin-left: 3px; }
|
||
|
||
input[type=text], input[type=date], input[type=number], textarea, select {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: var(--radius);
|
||
color: var(--text);
|
||
font-family: var(--sans);
|
||
font-size: 14px;
|
||
padding: 9px 12px;
|
||
outline: none;
|
||
transition: border-color .15s, box-shadow .15s;
|
||
width: 100%;
|
||
}
|
||
input:focus, textarea:focus, select:focus {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||
}
|
||
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
|
||
::placeholder { color: var(--text-dim); }
|
||
|
||
/* ── PILLS ── */
|
||
.check-group, .radio-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
|
||
.check-pill, .radio-pill {
|
||
display: flex; align-items: center; gap: 7px;
|
||
padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: 20px;
|
||
cursor: pointer; transition: all .12s; user-select: none; font-size: 13px; color: var(--text-muted);
|
||
background: var(--surface);
|
||
}
|
||
.check-pill:hover, .radio-pill:hover { border-color: var(--accent); color: var(--text); }
|
||
.check-pill input, .radio-pill input { display: none; }
|
||
.check-pill .dot, .radio-pill .dot {
|
||
width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
|
||
transition: background .12s; flex-shrink: 0;
|
||
}
|
||
.check-pill.checked { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
|
||
.check-pill.checked .dot { background: var(--accent); }
|
||
.radio-pill.selected { border-color: var(--accent-amber); background: var(--accent-amber-dim); color: var(--accent-amber); }
|
||
.radio-pill.selected .dot { background: var(--accent-amber); }
|
||
|
||
/* ── TABLES ── */
|
||
.table-wrap { overflow-x: auto; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius); }
|
||
table { width: 100%; border-collapse: collapse; }
|
||
th {
|
||
background: var(--surface2); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
|
||
padding: 8px 10px; font-family: var(--mono); font-size: 9px; font-weight: 600;
|
||
letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-align: left; white-space: nowrap;
|
||
}
|
||
td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 4px; vertical-align: middle; }
|
||
th:last-child, td:last-child { border-right: none; }
|
||
tr:last-child td { border-bottom: none; }
|
||
td.row-label {
|
||
padding: 8px 10px; font-family: var(--mono); font-size: 11px; color: var(--text-muted);
|
||
background: var(--surface2); white-space: nowrap; min-width: 150px;
|
||
}
|
||
td input[type=text], td select { border: 1px solid transparent; border-radius: 3px; background: transparent; font-size: 12px; padding: 6px 8px; }
|
||
td input[type=text]:focus, td select:focus { background: var(--surface); border-color: var(--accent); box-shadow: none; }
|
||
td.center { text-align: center; }
|
||
|
||
.toggle-cell { display: flex; justify-content: center; align-items: center; padding: 6px; }
|
||
.toggle-btn {
|
||
width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--border-strong);
|
||
background: var(--surface); color: var(--text-dim); font-size: 15px; cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center; transition: all .12s; font-family: var(--mono); line-height: 1;
|
||
}
|
||
.toggle-btn.enabled { border-color: var(--accent-green); background: var(--accent-green-dim); color: var(--accent-green); }
|
||
.toggle-btn.disabled { border-color: var(--red); background: var(--red-dim); color: var(--red); text-decoration: line-through; font-size: 11px; }
|
||
|
||
.ov-select { width: 58px; font-size: 10px !important; padding: 5px 2px !important; text-align: center; font-family: var(--mono) !important; font-weight: 600; }
|
||
|
||
/* ── MISC ── */
|
||
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
|
||
.sub-heading {
|
||
font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .12em;
|
||
text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.sub-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); }
|
||
|
||
.notice {
|
||
background: var(--accent-dim); border: 1px solid #b9d2fb; border-radius: var(--radius);
|
||
padding: 10px 14px; font-size: 12px; color: #0043ce; margin-bottom: 18px; font-family: var(--mono);
|
||
}
|
||
|
||
/* ── DELIVERABLES ── */
|
||
.deliv-group { margin-bottom: 20px; }
|
||
.deliv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||
.deliv-item {
|
||
display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
|
||
border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer;
|
||
transition: all .12s; user-select: none; background: var(--surface);
|
||
}
|
||
.deliv-item:hover { border-color: var(--accent); }
|
||
.deliv-item.checked { border-color: var(--accent); background: var(--accent-dim); }
|
||
.deliv-item input { display: none; }
|
||
.deliv-box {
|
||
width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 3px;
|
||
flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center;
|
||
font-size: 11px; color: #fff; transition: all .12s;
|
||
}
|
||
.deliv-item.checked .deliv-box { background: var(--accent); border-color: var(--accent); }
|
||
.deliv-text { font-size: 12.5px; line-height: 1.35; color: var(--text); }
|
||
.deliv-text .dt-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
|
||
|
||
/* ── NAV ── */
|
||
.nav-row { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); }
|
||
.btn {
|
||
padding: 10px 22px; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; font-weight: 600;
|
||
letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border: 1px solid; transition: all .15s;
|
||
}
|
||
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
|
||
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
|
||
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow); }
|
||
.btn-primary:hover { background: #0353e9; }
|
||
.btn-generate { background: var(--accent-green); border-color: var(--accent-green); color: #fff; font-weight: 700; box-shadow: var(--shadow); }
|
||
.btn-generate:hover { background: #0e6027; }
|
||
|
||
/* ── OUTPUT ── */
|
||
#output-section { display: none; }
|
||
#output-section.active { display: block; }
|
||
.output-toolbar { display: flex; gap: 10px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
|
||
.output-doc {
|
||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
|
||
box-shadow: var(--shadow-lg); padding: 52px 56px; font-family: var(--sans); line-height: 1.7;
|
||
color: var(--text); font-size: 13px; max-height: 74vh; overflow-y: auto;
|
||
}
|
||
.output-doc h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.02em; }
|
||
.output-doc .doc-subtitle { font-size: 11px; color: var(--text-muted); margin-bottom: 28px; font-family: var(--mono); letter-spacing: .08em; }
|
||
.output-doc h2 {
|
||
font-size: 13px; font-weight: 600; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase;
|
||
color: var(--accent); margin-top: 30px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-dim);
|
||
}
|
||
.output-doc h3 { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-top: 16px; margin-bottom: 6px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
|
||
.output-doc p { margin-bottom: 10px; }
|
||
.output-doc ul { padding-left: 20px; margin-bottom: 10px; }
|
||
.output-doc li { margin-bottom: 3px; }
|
||
.output-doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; border: 1px solid var(--border); }
|
||
.output-doc th { background: var(--surface2); border: 1px solid var(--border); padding: 6px 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--text-muted); }
|
||
.output-doc td { border: 1px solid var(--border); padding: 7px 10px; vertical-align: top; }
|
||
.output-doc .badge { display: inline-block; padding: 1px 8px; border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 600; }
|
||
.badge-R { background: var(--accent-green-dim); color: var(--accent-green); }
|
||
.badge-O { background: var(--accent-amber-dim); color: var(--accent-amber); }
|
||
.badge-NA { background: var(--surface2); color: var(--text-dim); }
|
||
.badge-Y { background: var(--accent-green-dim); color: var(--accent-green); }
|
||
.badge-N { background: var(--red-dim); color: var(--red); }
|
||
|
||
.info-kv { display: flex; gap: 8px; font-size: 12px; margin-bottom: 6px; }
|
||
.info-kv .k { font-family: var(--mono); font-size: 10px; color: var(--text-muted); white-space: nowrap; min-width: 130px; }
|
||
.info-kv .v { color: var(--text); }
|
||
|
||
/* ── LOADING ── */
|
||
.loading-overlay {
|
||
display: none; position: fixed; inset: 0; background: rgba(244,245,247,.82); z-index: 200;
|
||
align-items: center; justify-content: center; flex-direction: column; gap: 16px; backdrop-filter: blur(2px);
|
||
}
|
||
.loading-overlay.active { display: flex; }
|
||
.spinner { width: 36px; height: 36px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.loading-text { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: .1em; }
|
||
|
||
/* ── VALIDATION ── */
|
||
.step-tab.invalid { color: var(--red); background: var(--red-dim); border-bottom-color: var(--red); }
|
||
.step-tab.invalid.active { color: var(--red); background: var(--red-dim); border-bottom-color: var(--red); }
|
||
.step-tab .step-flag { display: none; }
|
||
.step-tab.invalid .step-flag { display: inline; margin-left: 4px; }
|
||
input.input-invalid, textarea.input-invalid, select.input-invalid { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-dim); }
|
||
.radio-group.group-invalid, .check-group.group-invalid { outline: 1px solid var(--red); outline-offset: 4px; border-radius: var(--radius); }
|
||
.req-hint { font-family: var(--mono); font-size: 10px; color: var(--red); margin-top: 4px; display: none; }
|
||
.req-hint.show { display: block; }
|
||
|
||
/* ── KEY ROLES ── */
|
||
.roles-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
|
||
.role-row { display: grid; grid-template-columns: 220px 1fr 36px; gap: 10px; align-items: center; }
|
||
.role-row .role-other { display: none; }
|
||
.role-row.is-other { grid-template-columns: 220px 1fr 1fr 36px; }
|
||
.role-row.is-other .role-other { display: block; }
|
||
.row-del {
|
||
width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--border-strong);
|
||
background: var(--surface); color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1;
|
||
display: flex; align-items: center; justify-content: center; transition: all .12s; flex-shrink: 0;
|
||
}
|
||
.row-del:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
|
||
.add-btn {
|
||
display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius);
|
||
border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-muted);
|
||
font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
|
||
cursor: pointer; transition: all .15s;
|
||
}
|
||
.add-btn:hover { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--accent-dim); }
|
||
|
||
/* ── WO TYPE NAME EDITING ── */
|
||
td.wo-name-cell { padding: 4px; background: var(--surface2); }
|
||
td.wo-name-cell input { font-family: var(--mono); font-size: 11px; color: var(--text); font-weight: 500; }
|
||
.wo-custom-tag { font-family: var(--mono); font-size: 8px; color: var(--accent); letter-spacing: .1em; margin-left: 6px; vertical-align: middle; }
|
||
|
||
/* ── SEQUENCE BUILDER ── */
|
||
.seq-builder { margin-bottom: 18px; }
|
||
.seq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
|
||
.seq-step {
|
||
display: flex; align-items: center; gap: 12px; padding: 11px 14px;
|
||
background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
|
||
box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s, opacity .12s;
|
||
}
|
||
.seq-step:hover { border-color: var(--accent); }
|
||
.seq-step.dragging { opacity: .35; border-style: dashed; }
|
||
.seq-step.drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
|
||
.seq-handle { cursor: grab; color: var(--text-dim); font-size: 16px; line-height: 1; user-select: none; flex-shrink: 0; }
|
||
.seq-handle:active { cursor: grabbing; }
|
||
.seq-num {
|
||
width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--accent-dim); color: var(--accent);
|
||
font-family: var(--mono); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.seq-step input.seq-label {
|
||
border: 1px solid transparent; background: transparent; font-size: 14px; padding: 5px 8px; color: var(--text); flex: 1;
|
||
}
|
||
.seq-step input.seq-label:focus { background: var(--surface2); border-color: var(--accent); box-shadow: none; }
|
||
.seq-arrow { text-align: center; color: var(--text-dim); font-size: 13px; line-height: .4; margin: -2px 0; }
|
||
.seq-add-row { display: flex; gap: 10px; align-items: center; }
|
||
.seq-add-row input { flex: 1; }
|
||
.seq-step.gate { border-color: var(--accent-amber); background: var(--accent-amber-dim); border-style: dashed; }
|
||
.seq-step.gate .seq-label { color: var(--accent-amber); font-weight: 500; }
|
||
.seq-gate-badge {
|
||
flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--accent-amber); color: #fff;
|
||
font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
|
||
}
|
||
.add-btn-gate { border-color: var(--accent-amber); color: var(--accent-amber); }
|
||
.add-btn-gate:hover { border-color: var(--accent-amber); color: var(--accent-amber); background: var(--accent-amber-dim); border-style: solid; }
|
||
.field-hint { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }
|
||
.field-hint code { background: var(--surface2); padding: 1px 6px; border-radius: 3px; color: var(--accent); }
|
||
.field-hint a { color: var(--accent); text-decoration: none; margin-left: 6px; font-weight: 600; }
|
||
.field-hint a:hover { text-decoration: underline; }
|
||
.other-field { margin-top: 6px; }
|
||
|
||
/* ── REVIEW COMMENTS ─────────────────────────────────────────────── */
|
||
.cbadge-total { display:inline-block; min-width:16px; padding:0 5px; margin-left:4px; font-family:var(--mono);
|
||
font-size:10px; font-weight:700; line-height:16px; text-align:center; color:#fff; background:var(--accent); border-radius:9px; }
|
||
.step-tab { position:relative; }
|
||
.step-tab .cbadge { position:absolute; top:4px; right:4px; min-width:15px; height:15px; padding:0 4px;
|
||
font-family:var(--mono); font-size:9px; font-weight:700; line-height:15px; text-align:center;
|
||
color:#fff; background:var(--accent-amber); border-radius:8px; box-shadow:0 0 0 2px var(--surface); }
|
||
|
||
.cmt-overlay { position:fixed; inset:0; background:rgba(20,30,50,.28); opacity:0; pointer-events:none;
|
||
transition:opacity .2s ease; z-index:60; }
|
||
.cmt-overlay.open { opacity:1; pointer-events:auto; }
|
||
.cmt-drawer { position:fixed; top:0; right:0; height:100vh; width:380px; max-width:92vw; background:var(--surface);
|
||
border-left:1px solid var(--border); box-shadow:var(--shadow-lg); transform:translateX(100%);
|
||
transition:transform .24s ease; z-index:61; display:flex; flex-direction:column; }
|
||
.cmt-drawer.open { transform:translateX(0); }
|
||
.cmt-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
|
||
border-bottom:1px solid var(--border); }
|
||
.cmt-title { font-weight:700; font-size:14px; color:var(--text); }
|
||
.cmt-x { background:none; border:none; color:var(--text-muted); font-size:15px; cursor:pointer; padding:4px 8px; border-radius:4px; }
|
||
.cmt-x:hover { background:var(--surface2); color:var(--text); }
|
||
.cmt-namebar { padding:12px 18px; border-bottom:1px solid var(--border); }
|
||
.cmt-namebar label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:5px; }
|
||
.cmt-namebar input { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); font-family:var(--sans); font-size:13px; color:var(--text); background:var(--surface); }
|
||
.cmt-compose { padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface2); }
|
||
.cmt-compose-label { font-size:11px; color:var(--text-muted); margin-bottom:7px; }
|
||
.cmt-compose-label strong { color:var(--accent); }
|
||
.cmt-compose textarea { width:100%; padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--radius);
|
||
font-family:var(--sans); font-size:13px; color:var(--text); resize:vertical; background:var(--surface); }
|
||
.cmt-add { width:100%; margin-top:9px; }
|
||
.cmt-list { flex:1; overflow-y:auto; padding:10px 14px; }
|
||
.cmt-empty { text-align:center; color:var(--text-dim); font-size:12px; padding:36px 12px; }
|
||
.cmt-item { border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; margin-bottom:9px; background:var(--surface); }
|
||
.cmt-item.mine { border-color:var(--accent); background:var(--accent-dim); }
|
||
.cmt-meta { display:flex; align-items:center; gap:7px; margin-bottom:5px; font-size:11px; }
|
||
.cmt-author { font-weight:700; color:var(--text); }
|
||
.cmt-step { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.03em;
|
||
color:var(--accent); background:var(--accent-dim); padding:1px 6px; border-radius:9px; }
|
||
.cmt-time { color:var(--text-dim); margin-left:auto; font-size:10px; }
|
||
.cmt-text { font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
|
||
.cmt-del { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:11px; padding:2px 5px; border-radius:4px; }
|
||
.cmt-del:hover { background:var(--red-dim); color:var(--red); }
|
||
.cmt-jump { background:none; border:none; color:var(--accent); cursor:pointer; font-size:10px; padding:0; margin-top:4px; }
|
||
.cmt-jump:hover { text-decoration:underline; }
|
||
.cmt-foot { border-top:1px solid var(--border); padding:12px 18px; }
|
||
.cmt-note { font-size:10px; color:var(--text-muted); line-height:1.5; margin-bottom:10px; }
|
||
.cmt-foot-btns { display:flex; gap:7px; flex-wrap:wrap; }
|
||
.cmt-foot-btns .btn { padding:6px 11px; font-size:11px; }
|
||
.cmt-clear { margin-left:auto; color:var(--text-muted); }
|
||
|
||
/* ── REV1: validation, governance, summary ───────────────────────── */
|
||
.radio-group.group-invalid, .check-group.group-invalid { outline:2px solid var(--red); outline-offset:4px; border-radius:var(--radius); }
|
||
.ov-select.ov-unset { color:var(--red) !important; border-color:var(--red); }
|
||
.use-btn { display:inline-block; margin-left:8px; padding:4px 14px; font-family:var(--sans); font-size:11px; font-weight:700;
|
||
color:#fff; background:var(--accent-green); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
|
||
.use-btn:hover { background:#0e6027; }
|
||
.sum-chips { display:flex; flex-wrap:wrap; gap:7px; }
|
||
.sum-chip { background:var(--accent-dim); color:var(--accent); border:1px solid #b9d2fb; border-radius:3px;
|
||
padding:3px 10px; font-family:var(--mono); font-size:10px; }
|
||
.sum-warn { margin-top:10px; color:var(--accent-amber); background:var(--accent-amber-dim); border:1px solid #f0d9ad;
|
||
border-radius:var(--radius); padding:7px 10px; font-size:11px; }
|
||
|
||
/* ── CREATION TOOL ───────────────────────────────────────────────── */
|
||
.ctx-bar { max-width:none; margin:0; padding:12px 28px 12px var(--gutter,34px); display:flex; align-items:center; gap:20px;
|
||
border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; }
|
||
.ctx-empty { color:var(--text-muted); font-size:13px; }
|
||
.ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; }
|
||
.ctx-main .ctx-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
|
||
.ctx-sample { font-family:var(--mono); font-size:9px; font-weight:700; color:var(--accent-amber);
|
||
background:var(--accent-amber-dim); border:1px solid #f0d9ad; border-radius:9px; padding:1px 7px; margin-left:6px; vertical-align:middle; }
|
||
.ctx-meta { margin-left:auto; display:flex; gap:16px; font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
|
||
.ctx-meta b { color:var(--accent); }
|
||
.ctx-meta code { background:var(--surface2); padding:1px 6px; border-radius:3px; color:var(--accent); }
|
||
.link-btn { background:none; border:none; color:var(--accent); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
|
||
|
||
.mode-wrap { max-width:none; margin:0; padding:16px 28px 0; display:flex; align-items:center; gap:16px; }
|
||
.mode-toggle { display:inline-flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
|
||
.mode-btn { padding:8px 18px; font-family:var(--sans); font-size:13px; font-weight:600; border:none; background:var(--surface);
|
||
color:var(--text-muted); cursor:pointer; }
|
||
.mode-btn.active { background:var(--accent); color:#fff; }
|
||
.created-count { font-size:11px; color:var(--text-muted); }
|
||
|
||
.wo-section { border:1px solid var(--border); border-radius:var(--radius); padding:11px 13px; margin-bottom:9px; background:var(--surface); }
|
||
.wo-section-head { display:flex; align-items:center; gap:9px; margin-bottom:7px; flex-wrap:wrap; }
|
||
.wo-section-name { font-weight:700; font-size:13px; color:var(--text); }
|
||
.wo-section-src { font-family:var(--mono); font-size:10px; color:var(--text-muted); margin-left:auto; }
|
||
.wo-section textarea { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius);
|
||
font-family:var(--sans); font-size:13px; color:var(--text); resize:vertical; background:var(--surface); }
|
||
.empty-hint { color:var(--text-dim); font-size:13px; padding:18px 6px; text-align:center; }
|
||
|
||
.crew-row { grid-template-columns:1fr 36px !important; }
|
||
.crew-row.is-other { grid-template-columns:1fr 1fr 70px 36px !important; }
|
||
.crew-row:not(.is-other) { grid-template-columns:1fr 70px 36px !important; }
|
||
|
||
.batch-head { display:flex; align-items:center; gap:16px; margin:14px 0 10px; font-size:13px; flex-wrap:wrap; }
|
||
#batch-preview table input { width:100%; }
|
||
|
||
/* ── WORK PACKAGE FORM ───────────────────────────────────────────── */
|
||
.sop-hint { color:var(--accent) !important; }
|
||
.release-banner { max-width:none; margin:0; padding:0 28px 0 var(--gutter,34px); }
|
||
.release-banner .rb-inner { margin-top:14px; border-radius:var(--radius); padding:11px 16px; font-size:13px; font-weight:600;
|
||
display:flex; align-items:center; gap:10px; }
|
||
.rb-ready { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid #b6e3c6; }
|
||
.rb-notready { background:var(--accent-amber-dim); color:var(--accent-amber); border:1px solid #f0d9ad; }
|
||
.rb-hold { background:var(--red-dim); color:var(--red); border:1px solid #f3c4c4; }
|
||
.pill-hold.selected { background:var(--red) !important; border-color:var(--red) !important; }
|
||
.pill-hold.selected .dot { background:#fff !important; }
|
||
|
||
.cstatus { display:inline-flex; border:1px solid var(--border-strong); border-radius:5px; overflow:hidden; }
|
||
.cstatus button { border:none; background:var(--surface); color:var(--text-muted); font-family:var(--sans); font-size:11px;
|
||
font-weight:600; padding:4px 10px; cursor:pointer; border-right:1px solid var(--border); }
|
||
.cstatus button:last-child { border-right:none; }
|
||
.cstatus button.on-open { background:var(--red); color:#fff; }
|
||
.cstatus button.on-cleared { background:var(--accent-green); color:#fff; }
|
||
.cstatus button.on-na { background:var(--text-muted); color:#fff; }
|
||
#material-body input, #attach-body input, #constraint-body input, #signoff-body input { width:100%; }
|
||
.signoff-check { width:18px; height:18px; cursor:pointer; }
|
||
|
||
/* ── COMMENT-DRIVEN ADDITIONS ────────────────────────────────────── */
|
||
.locked-field { background:var(--surface2)!important; color:var(--text-muted); cursor:not-allowed; }
|
||
.lock-row { display:flex; align-items:center; gap:10px; margin-top:5px; }
|
||
.lock-edit { background:none; border:none; color:var(--accent); cursor:pointer; font-size:11px; padding:0; }
|
||
.override-note { font-size:11px; color:var(--accent-amber); }
|
||
.sop-tag { font-size:9px; font-weight:700; color:var(--accent); background:var(--accent-dim,#eaf0fd); border:1px solid #cdd9f2; border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
|
||
|
||
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:#fff;
|
||
padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s; z-index:9999; box-shadow:0 6px 24px rgba(0,0,0,.25); }
|
||
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
|
||
|
||
.modal-overlay { position:fixed; inset:0; background:rgba(20,28,40,.55); display:none; align-items:center; justify-content:center; z-index:9000; padding:20px; }
|
||
.modal-overlay.open { display:flex; }
|
||
.modal { background:var(--surface); border-radius:0; width:100%; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; max-height:90vh; display:flex; flex-direction:column; }
|
||
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
|
||
.modal-title { font-weight:700; font-size:15px; color:var(--text); }
|
||
.modal-body { padding:18px 20px; overflow-y:auto; }
|
||
.modal-body .field { margin-bottom:14px; }
|
||
.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); }
|
||
.hold-photo-preview img { max-width:160px; max-height:120px; border-radius:6px; border:1px solid var(--border); margin-top:8px; display:block; }
|
||
|
||
/* ── REV 2 ADDITIONS ─────────────────────────────────────────────── */
|
||
.auto-tag { font-size:9px; font-weight:700; color:var(--accent-green); background:var(--accent-green-dim); border:1px solid #b6e3c6; border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
|
||
.derived-box { padding:9px 11px; border:1px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface2); color:var(--text); font-size:13px; font-weight:600; min-height:38px; display:flex; align-items:center; }
|
||
.material-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
|
||
.workstep-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
|
||
.workstep-row .ws-num { flex:0 0 26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:5px; }
|
||
.workstep-row textarea { flex:1; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); font-family:var(--sans); font-size:13px; resize:vertical; min-height:38px; }
|
||
.workstep-row .row-del { flex:0 0 auto; margin-top:6px; }
|
||
|
||
/* ── MOBILE (comment 5) ──────────────────────────────────────────── */
|
||
@media (max-width: 720px) {
|
||
.header { flex-wrap:wrap; gap:6px; padding:10px 14px; }
|
||
.header-title { width:100%; order:5; }
|
||
.header .btn { margin-left:0 !important; padding:6px 10px !important; font-size:12px; }
|
||
.header .btn:first-of-type { margin-left:auto !important; }
|
||
.main { padding:14px !important; }
|
||
.ctx-bar, .release-banner { padding-left:14px; padding-right:14px; }
|
||
.ctx-meta { margin-left:0; width:100%; }
|
||
.field-grid { grid-template-columns:1fr !important; }
|
||
.radio-group { flex-wrap:wrap; }
|
||
.card { padding:16px 14px !important; }
|
||
.modal { max-width:100% !important; }
|
||
.output-toolbar { flex-wrap:wrap; }
|
||
.material-actions .add-btn { flex:1 1 auto; }
|
||
table { min-width:520px; } /* keep columns legible; .table-wrap scrolls */
|
||
.cstatus button { padding:6px 8px; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.header-logo { font-size:14px; }
|
||
.workstep-row textarea { font-size:16px; } /* avoid iOS zoom */
|
||
input, select, textarea { font-size:16px; } /* avoid iOS zoom on focus */
|
||
}
|
||
|
||
/* ── REV 3 ADDITIONS ─────────────────────────────────────────────── */
|
||
/* SOP-inherited field highlight (comment 8) */
|
||
.sop-inherited { background:rgba(37,99,214,0.07) !important; border-color:var(--accent) !important; opacity:0.85; color:var(--text); }
|
||
.sop-inherited:focus { opacity:1; }
|
||
|
||
/* Dev mode (comment 7) */
|
||
.logo-wrap { position:relative; display:flex; align-items:center; }
|
||
.dev-toggle { position:absolute; left:2px; bottom:-9px; width:18px; height:7px; padding:0; border:none;
|
||
background:var(--text-dim); opacity:0.10; border-radius:3px; cursor:pointer; }
|
||
.dev-toggle:hover { opacity:0.35; }
|
||
.dev-banner { background:#3a2a00; color:#ffd479; font-size:12.5px; font-weight:700; text-align:center; padding:7px 14px; letter-spacing:.3px; }
|
||
body.dev-mode .header { box-shadow: inset 0 -3px 0 #ffb000; }
|
||
|
||
/* SOP reference links (comments 1,3,4) */
|
||
.sop-ref-links { margin-bottom:12px; }
|
||
.ref-links-title { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
|
||
.ref-links { display:flex; flex-wrap:wrap; gap:8px; }
|
||
.ref-link { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--accent);
|
||
background:var(--accent-dim,#eef3fd); border:1px solid #cdd9f2; border-radius:8px; padding:6px 11px; text-decoration:none; }
|
||
.ref-link:hover { background:#e2ecfc; }
|
||
.ref-link .ref-sys { font-weight:400; color:var(--text-muted); font-size:11px; }
|
||
.ref-link-sm { font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; }
|
||
.ref-link-sm:hover { text-decoration:underline; }
|
||
|
||
/* Sign-off date override (comment 5) */
|
||
.so-date { font-size:13px; font-variant-numeric:tabular-nums; }
|
||
.so-ovr { margin-left:8px; font-size:11px; }
|
||
|
||
/* Collapsible form sections */
|
||
.collapse-chev { display:inline-block; width:1em; margin-right:7px; color:var(--text-muted); font-size:11px; user-select:none; }
|
||
.card.collapsed > :not(.section-header):not(.sub-heading) { display:none !important; }
|
||
.card.collapsed .section-desc { display:none; }
|
||
|
||
/* Section nav (jump chips) */
|
||
.section-nav-bar{ position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:6px;
|
||
padding:8px 12px 8px var(--gutter,34px); background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
|
||
border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(20,30,50,.06);
|
||
transition:transform .22s ease; }
|
||
.section-nav-bar:empty{ display:none; }
|
||
.section-nav-bar.nav-hidden{ transform:translateY(-160%); }
|
||
.sec-chip{ font-size:12px; font-weight:600; color:var(--text-muted); background:var(--surface2);
|
||
border:1px solid var(--border); border-radius:14px; padding:4px 11px; cursor:pointer; white-space:nowrap; }
|
||
.sec-chip:hover{ border-color:var(--accent); color:var(--accent); }
|
||
|
||
/* ── SOP-inherited marker ───────────────────────────────────────────────────
|
||
The "from SOP types" subtext used to sit under the field. It's now a small
|
||
chip on the label with the detail in a hover tooltip (site comment 8/3).
|
||
The chip stays VISIBLE rather than hover-only: on a field tablet there is no
|
||
hover, and "this value came from the SOP" is the part people need to see. */
|
||
.field-hint.sop-hint { display: none; }
|
||
.sop-chip { display:inline-block; margin-left:6px; padding:0 6px; border-radius:9px;
|
||
background:var(--accent-dim); color:var(--accent); border:1px solid #b9d2fb;
|
||
font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
|
||
vertical-align:middle; cursor:help; position:relative; }
|
||
.sop-chip::after { content:attr(data-tip); position:absolute; bottom:135%; left:50%;
|
||
transform:translateX(-50%); background:#161616; color:#fff; padding:7px 10px; font-size:12px;
|
||
font-weight:400; letter-spacing:0; text-transform:none; line-height:1.4; white-space:normal;
|
||
width:max-content; max-width:260px; text-align:left; z-index:9999; opacity:0;
|
||
pointer-events:none; transition:opacity .12s; box-shadow:0 4px 14px rgba(20,30,50,.22); }
|
||
.sop-chip::before { content:''; position:absolute; bottom:135%; left:50%;
|
||
transform:translate(-50%,95%); border:5px solid transparent; border-top-color:#161616;
|
||
opacity:0; transition:opacity .12s; z-index:9999; }
|
||
.sop-chip:hover::after, .sop-chip:hover::before,
|
||
.sop-chip:focus::after, .sop-chip:focus::before { opacity:1; }
|
||
|
||
/* ── people picker (Assignees / Distribution / Predecessors) ─────────────────
|
||
Multi-select over the SOP project team instead of a free-text list. */
|
||
.people-pick { border:1px solid var(--border-strong); border-radius:4px; background:var(--surface);
|
||
padding:5px 6px; min-height:38px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
|
||
.people-pick:focus-within { outline:2px solid var(--accent); outline-offset:-2px; }
|
||
.pp-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 6px 2px 8px;
|
||
background:var(--surface2); border:1px solid var(--border); border-radius:12px;
|
||
font-size:12px; max-width:100%; }
|
||
.pp-chip.pp-locked { background:var(--accent-dim); border-color:#b9d2fb; color:var(--accent); }
|
||
.pp-chip .pp-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.pp-chip .pp-x { background:none; border:0; cursor:pointer; color:var(--text-muted);
|
||
font-size:12px; line-height:1; padding:0 1px; }
|
||
.pp-chip .pp-x:hover { color:var(--red); }
|
||
.pp-add { position:relative; }
|
||
.pp-add-btn { background:none; border:1px dashed var(--border-strong); border-radius:12px;
|
||
color:var(--text-muted); font:inherit; font-size:12px; padding:2px 9px; cursor:pointer; }
|
||
.pp-add-btn:hover { border-color:var(--accent); color:var(--accent); }
|
||
.pp-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:60; min-width:270px;
|
||
max-height:300px; overflow-y:auto; background:var(--surface); border:1px solid var(--border-strong);
|
||
box-shadow:0 8px 24px rgba(20,30,50,.18); border-radius:4px; padding:6px 0; }
|
||
.pp-menu[hidden] { display:none; }
|
||
.pp-group { font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
|
||
color:var(--text-dim); padding:7px 10px 3px; }
|
||
.pp-opt { display:flex; align-items:center; gap:8px; padding:5px 10px; font-size:13px; cursor:pointer; }
|
||
.pp-opt:hover { background:var(--surface2); }
|
||
.pp-opt input { width:15px; height:15px; cursor:pointer; }
|
||
.pp-opt .pp-role { color:var(--text-dim); font-size:11.5px; }
|
||
.pp-free { border-top:1px solid var(--border); margin-top:5px; padding:7px 10px 3px; }
|
||
.pp-free input { width:100%; padding:5px 7px; font:inherit; font-size:12.5px;
|
||
border:1px solid var(--border); border-radius:3px; }
|
||
.pp-free .field-hint { margin-top:4px; }
|
||
|
||
/* Critical constraint marker (from the SOP) */
|
||
.crit-tag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px; font-size:10px;
|
||
font-weight:700; letter-spacing:.02em; color:var(--red); background:var(--red-dim);
|
||
border:1px solid #ffc4c4; white-space:nowrap; vertical-align:middle; }
|
||
|
||
/* ── WP NAVIGATOR — auto-hiding drawer ─────────────────────────────────────
|
||
Was a fixed 262px column, which (a) stole width from the form and (b) vanished
|
||
entirely under 1100px — so embedded in the suite tab it was never visible at
|
||
all. Now it slides in over the content from a slim edge handle: hover (or tap)
|
||
the handle to open, move away to close, or pin it open if you'd rather it stay.
|
||
Nothing is taken from the form unless you pin it. */
|
||
.wp-nav {
|
||
position: fixed;
|
||
top: var(--rail-top, 0px);
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 300px;
|
||
max-width: 86vw;
|
||
z-index: 120;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--surface);
|
||
border-right: 1px solid var(--border-strong);
|
||
box-shadow: 6px 0 22px rgba(20,30,50,.16);
|
||
transform: translateX(-100%);
|
||
transition: transform .18s ease;
|
||
}
|
||
body.wp-nav-open .wp-nav,
|
||
body.wp-nav-pinned .wp-nav { transform: none; }
|
||
/* Pinned: no shadow (it's part of the layout now) and the form shifts over. */
|
||
body.wp-nav-pinned .wp-nav { box-shadow: none; }
|
||
|
||
/* The always-visible edge handle. Vertical so it costs ~26px of width. */
|
||
.wp-nav-handle {
|
||
position: fixed;
|
||
top: calc(var(--rail-top, 0px) + 14px);
|
||
left: 0;
|
||
z-index: 119;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 12px 5px;
|
||
writing-mode: vertical-rl;
|
||
background: var(--surface);
|
||
color: var(--text-muted);
|
||
border: 1px solid var(--border-strong);
|
||
border-left: 0;
|
||
border-radius: 0 5px 5px 0;
|
||
box-shadow: 2px 0 8px rgba(20,30,50,.10);
|
||
font: inherit;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
}
|
||
.wp-nav-handle:hover { color: var(--accent); border-color: var(--accent); }
|
||
.wp-nav-handle .wp-nav-handle-count {
|
||
writing-mode: horizontal-tb; font-size: 10px; font-weight: 700; letter-spacing: 0;
|
||
background: var(--accent-dim); color: var(--accent); border-radius: 8px; padding: 0 5px;
|
||
}
|
||
body.wp-nav-open .wp-nav-handle,
|
||
body.wp-nav-pinned .wp-nav-handle { display: none; }
|
||
|
||
.wp-nav-head { display:flex; align-items:center; gap:8px; padding:12px 12px 8px; }
|
||
.wp-nav-title { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
|
||
.wp-nav-count { color:var(--text-dim); font-weight:600; letter-spacing:0; }
|
||
.wp-nav-btn { background:transparent; border:1px solid var(--border); border-radius:4px;
|
||
color:var(--text-muted); cursor:pointer; font-size:13px; line-height:1; padding:3px 7px; }
|
||
.wp-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
|
||
.wp-nav-btn.is-on { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
|
||
.wp-nav-head .wp-nav-btn:first-of-type { margin-left:auto; }
|
||
.wp-nav-search { margin:0 12px 10px; padding:6px 9px; font-size:12px; font-family:inherit;
|
||
border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); }
|
||
.wp-nav-search:focus { outline:none; border-color:var(--accent); }
|
||
.wp-nav-list { flex:1 1 auto; overflow-y:auto; padding:0 8px 8px; }
|
||
.wp-nav-group { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
|
||
color:var(--text-dim); padding:10px 6px 5px; }
|
||
.wp-nav-item { display:block; width:100%; text-align:left; background:transparent; border:0;
|
||
border-left:3px solid transparent; border-radius:4px; padding:6px 8px; cursor:pointer;
|
||
font-family:inherit; color:var(--text); }
|
||
.wp-nav-item:hover { background:var(--surface2); }
|
||
.wp-nav-item.active { background:var(--accent-dim); border-left-color:var(--accent); }
|
||
.wp-nav-num { display:block; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); }
|
||
.wp-nav-subj { display:block; font-size:12px; color:var(--text-muted); line-height:1.35;
|
||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.wp-nav-meta { display:flex; align-items:center; gap:6px; margin-top:3px; font-size:10px; color:var(--text-dim); }
|
||
.wp-nav-dot { width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex:0 0 auto; }
|
||
.wp-nav-dot.ok { background:var(--accent-green); }
|
||
.wp-nav-dot.open { background:var(--accent-amber); }
|
||
.wp-nav-dot.hold { background:var(--red); }
|
||
.wp-nav-empty { padding:12px 8px; font-size:12px; color:var(--text-dim); }
|
||
.wp-nav-foot { border-top:1px solid var(--border); padding:9px 12px; display:flex; gap:8px; flex-wrap:wrap; }
|
||
/* Keep the drawer's footer clear of the fixed save bar. */
|
||
body.has-sticky-save .wp-nav { bottom: 54px; }
|
||
/* Pinned: the page chrome shifts with the form so nothing hides behind the panel. */
|
||
body.wp-nav-pinned { --gutter: 328px; }
|
||
body.wp-nav-pinned .sticky-save { left: 300px; }
|
||
|
||
/* Narrow screens: never pin (there isn't the width) — overlay only. */
|
||
@media (max-width: 900px) {
|
||
body.wp-nav-pinned { --gutter: 34px; } /* no room to pin — overlay only */
|
||
.wp-nav { width: 290px; }
|
||
}
|
||
|
||
/* Sticky save bar */
|
||
.sticky-save{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center;
|
||
justify-content:space-between; gap:14px; padding:10px 20px; background:#fff;
|
||
border-top:1px solid var(--border-strong); box-shadow:0 -2px 10px rgba(20,30,50,.08); }
|
||
.sticky-save .sticky-status{ font-size:13px; font-weight:600; }
|
||
.sticky-save .sticky-actions{ display:flex; gap:10px; }
|
||
.ss-ready{ color:var(--accent-green); }
|
||
.ss-notready{ color:var(--accent-amber); }
|
||
.ss-hold{ color:var(--red); }
|
||
body.has-sticky-save .main{ padding-bottom:74px; }
|
||
|
||
/* Disciplines + per-discipline scope */
|
||
.disc-picker { display:flex; flex-wrap:wrap; gap:8px; }
|
||
.disc-pill { display:flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--border-strong);
|
||
border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; user-select:none; transition:border-color .12s, background .12s, color .12s; }
|
||
.disc-pill:hover { border-color:var(--accent); color:var(--text); }
|
||
.disc-pill input { display:none; }
|
||
.disc-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--border-strong); transition:background .12s; flex-shrink:0; }
|
||
.disc-pill.selected { border-color:var(--accent); background:var(--accent-dim,#eef3fd); color:var(--accent); }
|
||
.disc-pill.selected .dot { background:var(--accent); }
|
||
.disc-scope { border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:6px; padding:12px 14px; margin-bottom:12px; background:var(--bg); }
|
||
.disc-scope-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
|
||
.disc-tag { font-weight:700; font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:.03em; }
|
||
.disc-status { font-size:12px; color:var(--text-muted); }
|
||
.disc-status select { font-size:12px; padding:3px 6px; }
|
||
|
||
/* Dashboard */
|
||
.dash-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
|
||
.dash-metric { background:var(--surface); border:1px solid var(--border); border-radius:0; padding:14px 16px; text-align:center; }
|
||
.dash-metric .dm-val { font-size:26px; font-weight:800; line-height:1; }
|
||
.dash-metric .dm-label { font-size:11px; color:var(--text-muted); margin-top:6px; text-transform:uppercase; letter-spacing:.03em; }
|
||
.dash-metric.dm-green .dm-val { color:var(--accent-green); }
|
||
.dash-metric.dm-red .dm-val { color:var(--red); }
|
||
.dash-metric.dm-blue .dm-val { color:var(--accent, #0f62fe); }
|
||
.dash-metric[onclick] { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
|
||
.dash-metric[onclick]:hover { border-color:var(--accent); }
|
||
.dash-metric.dm-active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
|
||
.dash-chip[onclick] { cursor:pointer; }
|
||
.dash-chip.chip-active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
|
||
.dash-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
|
||
.dash-bd-title { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
|
||
.dash-chip { display:inline-block; font-size:12px; background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:3px 10px; margin:0 6px 6px 0; }
|
||
.dash-chip.chip-red { background:var(--red-dim); color:var(--red); border-color:var(--red); }
|
||
.dash-panel { background:var(--surface); border:1px solid var(--border); border-radius:0; padding:14px 16px; margin-bottom:16px; }
|
||
.dash-panel-title { font-weight:700; font-size:13px; margin-bottom:10px; }
|
||
.dash-table { width:100%; border-collapse:collapse; font-size:12.5px; }
|
||
.dash-table th { text-align:left; background:var(--surface2); border-bottom:1px solid var(--border); padding:6px 8px; font-size:11px; text-transform:uppercase; color:var(--text-muted); }
|
||
.dash-table td { border-bottom:1px solid var(--border); padding:6px 8px; vertical-align:top; }
|
||
.dash-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
|
||
.dash-filters input, .dash-filters select { padding:7px 10px; border:1px solid var(--border-strong); border-radius:6px; font-size:13px; }
|
||
.dash-filters input[type=search] { flex:1; min-width:200px; }
|
||
@media (max-width:640px){ .dash-breakdown { grid-template-columns:1fr; } }
|
||
|
||
/* ── WP history (audit trail) modal ──────────────────────────────────────── */
|
||
.hist-list { display:flex; flex-direction:column; }
|
||
.hist-item { display:grid; grid-template-columns:170px 1fr auto; gap:12px; align-items:baseline;
|
||
padding:9px 2px; border-bottom:1px solid var(--border); }
|
||
.hist-item:last-child { border-bottom:none; }
|
||
.hist-when { font-family:var(--mono); font-size:11px; color:var(--text-muted); white-space:nowrap; }
|
||
.hist-action { font-weight:600; color:var(--text); }
|
||
.hist-detail { color:var(--accent); font-size:13px; }
|
||
.hist-actor { font-size:12px; color:var(--text-muted); white-space:nowrap; }
|
||
@media (max-width:560px){ .hist-item { grid-template-columns:1fr; gap:2px; } }
|
||
|
||
/* ── Dashboard progress bars + pager + archived toggle (Phase 2) ──────────── */
|
||
.prog-row { display:grid; grid-template-columns:150px 1fr 96px; gap:10px; align-items:center; margin-bottom:7px; }
|
||
.prog-name { font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||
.prog-bar { height:10px; background:var(--surface2); border:1px solid var(--border); overflow:hidden; }
|
||
.prog-fill { height:100%; background:var(--accent); transition:width .3s ease; }
|
||
.prog-pct { font-size:12px; font-weight:600; color:var(--text); text-align:right; white-space:nowrap; }
|
||
.prog-sub { font-weight:400; color:var(--text-muted); font-size:11px; }
|
||
.dash-arch-toggle { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); white-space:nowrap; cursor:pointer; }
|
||
.dash-pager { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12.5px; color:var(--text-muted); }
|
||
.dash-pager-btns { margin-left:auto; display:flex; gap:8px; }
|
||
.dash-pager .btn { padding:5px 12px; }
|
||
@media (max-width:560px){ .prog-row { grid-template-columns:110px 1fr 74px; } }
|