n.siegfried
61d1cf4bff
Site comments (8/3) - BIM card: LOD removed, IFF # added next to the coordination status, and required once that status is "Signed off (IFF)" — an unnumbered sign-off isn't traceable. A LOD already stored on a package is preserved and shown as legacy, not blanked. - The blue "from SOP types" subtext under a field is now a SOP chip on the label with the detail in a tooltip. The chip stays visible rather than hover-only: field tablets have no hover, and "this came from the SOP" is the part that matters. The hint elements stay in the DOM (hidden) so the code writing to them keeps working; an observer mirrors their text into the tooltip. - Specification Section is no longer typed per package. Each WP type carries a spec section on the SOP; the field is read-only in the Creator and follows the type, with the SOP's spec folder linked underneath. This reads both spec comments as one intent — stop typing it, derive it. - Assignees and Distribution are multi-selects over the SOP project team, showing each person's job function, with the CM pre-added to Distribution (removable per package) and a free-text option for people with no account. The stored display strings are unchanged so print/export/dashboard keep working; account ids ride alongside for the notification work in wave 3. Localization + time - Per-user locale/timezone (Language & time in the user menu), an app-wide default in the admin console, then the browser. Timezones are validated against the server's zoneinfo and the picker is fed from it. Calendar dates are formatted from their parts so a due date never reads a day early in another zone. - Every displayed timestamp now goes through the shared helpers. Top-bar chrome - Project switcher beside the logo and a centered global search, injected into either generation of top bar; skipped in an iframe so the embedded Creator doesn't get a second one. Ctrl/Cmd-K focuses search. - GET /api/search covers work packages, projects and SOPs, scoped to the caller's projects, hiding archived packages, with LIKE wildcards escaped. Fixed along the way: showForm() cleared every card's inline display, which undid applyKind() — so the Package Type and BIM cards reappeared on an install-only project. Split out applyKindVisibility() and re-apply it there. Verified: 100 API checks on a fresh database (44 permissions + 22 password reset + 34 search/localization), 24 driven UI checks against the real Creator page in headless Chrome (SOP chips, both people pickers, spec auto-fill, critical tags, BIM suppression), and the chrome harness on both bar styles. Screenshots reviewed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
768 lines
50 KiB
CSS
768 lines
50 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 sits in a wide two-column shell: a sticky work-package navigator on
|
||
the left and the form itself filling the rest of the screen. */
|
||
.wp-layout { display: flex; align-items: flex-start; gap: 0; max-width: 1760px; margin: 0 auto; }
|
||
.main { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding: 28px 32px 64px; }
|
||
|
||
.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:1760px; margin:0 auto; padding:12px 28px; 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:1760px; margin:0 auto; 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:1760px; margin:0 auto; padding:0 28px; }
|
||
.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; 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); }
|
||
|
||
/* ── WP NAVIGATOR (left rail) ─────────────────────────────────────────
|
||
Sticky list of every work package on the project. Click one to open it in
|
||
the form; the one being edited is highlighted. */
|
||
.wp-nav { flex:0 0 262px; width:262px; align-self:flex-start; position:sticky; top:var(--rail-top,0px);
|
||
height:calc(100vh - var(--rail-top,0px)); display:flex; flex-direction:column;
|
||
background:var(--surface); border-right:1px solid var(--border); }
|
||
.wp-nav-head { display:flex; align-items:center; gap:8px; padding:14px 14px 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-collapse, .wp-nav-reopen { background:transparent; border:1px solid var(--border); border-radius:4px;
|
||
color:var(--text-muted); cursor:pointer; font-size:14px; line-height:1; padding:2px 7px; margin-left:auto; }
|
||
.wp-nav-collapse:hover, .wp-nav-reopen:hover { border-color:var(--accent); color:var(--accent); }
|
||
.wp-nav-search { margin:0 14px 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; }
|
||
.wp-nav-reopen { display:none; position:sticky; top:var(--rail-top,0px); margin:10px 0 0 8px; align-self:flex-start; z-index:20; }
|
||
/* Keep the rail's footer clear of the fixed save bar. */
|
||
body.has-sticky-save .wp-nav { height:calc(100vh - var(--rail-top,0px) - 56px); }
|
||
body.wp-nav-collapsed .wp-nav { display:none; }
|
||
body.wp-nav-collapsed .wp-nav-reopen { display:block; }
|
||
@media (max-width: 1100px) {
|
||
.wp-nav { display:none; }
|
||
.wp-nav-reopen { display:none !important; }
|
||
}
|
||
|
||
/* ── 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) ───────────────────────────────
|
||
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; }
|
||
|
||
/* 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; } }
|