per such
* day, spanning every Task row vertically (grid-row: N / span row-count) —
* O(days) total, never O(tasks x days) — rather than a
* repeating-linear-gradient, because the day columns are flexible
* (minmax(28px, 1fr)) and a fixed-pixel gradient cannot stay phase-aligned
* with a variable-width, variable-start-weekday column track (docs/26 §24).
* --projecthub-portal-gantt-weekend-bg (Client Portal Daily Grid Gantt
* Unit D-Fix, docs/26 §41.13/§43) reuses the existing
* --projecthub-portal-border token rather than --projecthub-portal-bg:
* this Gantt section renders directly on body.projecthub-portal's own
* background (no intervening white --projecthub-portal-surface card),
* so reusing --projecthub-portal-bg made weekend cells exactly the same
* colour as the page behind every non-weekend cell — invisible in
* practice, confirmed in a real browser. --projecthub-portal-border is
* already the design system's own "subtle but visible against the page
* background" gray, reused here rather than introducing a new hex value.
* .projecthub-portal-gantt-row__info and .projecthub-portal-gantt-header-spacer
* (both column 1) are sticky so the Task info column and the header's own
* column-1 gutter stay pinned during horizontal scroll (docs/26 §33);
* sticky *header rows* (vertical stickiness) are explicitly out of scope
* for V1 (docs/26 §10 Q4, deferred).
*
* .projecthub-portal-gantt-range-too-long (Client Portal Daily Grid Gantt
* Unit C-Fix) is the fallback text shown instead of the entire grid/bar
* block (never a partial or truncated grid) when
* PortalGanttView::isTimelineTooLong() is true — this --gantt-day-count
* grid-template-columns mechanism is itself unbounded by Task date range
* width (Phase 45, pre-dating the day-grid), so the whole block is
* skipped, not only the Unit B day-grid header (docs/26 §16/§39).
*
* contain: layout (Client Portal Daily Grid Gantt Unit D-Fix, docs/26
* §41.21/§43) works around a real browser rendering limitation, not a
* source misconfiguration: without it, position: sticky on a direct CSS
* Grid item (.projecthub-portal-gantt-row__info /
* -header-spacer, both grid-column: 1) only holds correctly for a
* horizontal scroll distance up to (scroll-container clientWidth − the
* sticky element's own width) — confirmed empirically across a wide
* range of scroll offsets — then drifts linearly with the scroll amount
* as if it had silently become position: static. contain: layout on
* this grid makes the browser recompute the sticky element's
* containing/constraint rect against the grid's own (correct, full)
* box instead, closing the gap entirely at every tested scroll
* position. contain: layout alone also makes the grid stop
* contributing its true content width to .projecthub-portal-gantt-timeline-scroll's
* scrollable area (verified: scrollWidth collapses to clientWidth,
* killing horizontal scroll outright) — width: max-content restores
* the grid's intrinsic, content-driven width so scrolling keeps working
* exactly as before; the pre-existing min-width: 100% below still
* floors it at the container's full width for short ranges too narrow
* to need scrolling, since min-width always wins over a smaller width
* value in the CSS box model.
*/
.projecthub-portal-gantt-empty {
color: var(--projecthub-portal-muted);
}
.projecthub-portal-gantt-range {
color: var(--projecthub-portal-muted);
font-size: 0.875rem;
margin: 0 0 1rem;
}
.projecthub-portal-gantt-range-too-long {
color: var(--projecthub-portal-muted);
}
/*
* Client Portal UI Restoration — Sticky Date Header: mirrors the reasoning
* WP Admin's own Sticky Date Header fix already established
* (assets/css/admin-gantt.css's own .projecthub-admin-gantt-timeline-scroll
* docblock) — a position: sticky descendant only ever sticks relative to
* its nearest ancestor that is itself an actual, bounded scroll container.
* This element's existing horizontal-overflow rule alone already makes its
* computed vertical overflow resolve to auto too (a plain CSS Overflow
* Module rule), but with no bounded height its own content never overflows
* vertically, so nothing on that axis ever had anywhere to "stick" to —
* confirmed directly via
* Browser QA that a naive position: sticky on the header rows below did
* nothing at all without this. The Portal page has no wp-admin bar (this is
* a standalone document, templates/portal/layout.php), so the max-height
* formula only needs to subtract the fixed portal header
* (--projecthub-portal-header-height) and a constant covering the page
* title/back-link/range text above this element — measured directly
* against the real rendered page, not copied from WP Admin's own unrelated
* chrome.
*/
.projecthub-portal-gantt-timeline-scroll {
max-height: calc(100vh - var(--projecthub-portal-header-height) - 220px);
max-width: 100%;
min-height: 240px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 0.5rem;
}
.projecthub-portal-gantt {
column-gap: 1rem;
contain: layout;
display: grid;
grid-template-columns: minmax(200px, 260px) repeat(var(--gantt-day-count, 1), minmax(28px, 1fr));
list-style: none;
margin: 0;
min-width: 100%;
padding: 0;
/* Hierarchy UI Redesign (revised, Client Portal UI Restoration): 0, not
a small nonzero gap — every row (header and body alike) must render
perfectly flush against the next with nothing in between, since
within a hierarchy group (a root Task plus its visible children/
grandchildren) the info cells now share one continuous border as a
single unbroken block (.projecthub-portal-gantt-row__info--group-start/
--group-end below); any row-gap here would show as a seam splitting
that block. Spacing between two different root Tasks' groups comes
instead from a real .projecthub-portal-gantt-group-spacer grid row
templates/portal/gantt/list.php inserts before each new group
(except the first) — its own explicit height, not a gap value, so
it applies uniformly across every column without relying on row-gap
at all. */
row-gap: 0;
width: max-content;
}
/* Client Portal UI Restoration: the visible space between two different
root Tasks' groups (docs comment on .projecthub-portal-gantt above).
Spans every column (not just the info column) so the gap reads as one
full-width band, and carries no background so day-column weekend/today
shading (a lower, non-sticky layer) still shows through it uninterrupted,
matching the shading's own continuous look through an ordinary
within-group row boundary. */
.projecthub-portal-gantt-group-spacer {
grid-column: 1 / -1;
height: 0.75rem;
}
.projecthub-portal-gantt-row {
display: contents;
}
/* Hierarchy UI Redesign: a collapsed row (JS-toggled, .is-collapsed) is
fully removed from the grid — its display: none overrides this rule's
own display: contents, taking its info/bar/unscheduled children out of
layout entirely rather than leaving an empty grid row. */
.projecthub-portal-gantt-row.is-collapsed {
display: none;
}
/*
* Client Portal UI Restoration: a hierarchy group (a root Task plus its
* visible children/grandchildren, list.php's own $is_group_start/
* $is_group_end) now reads as one unbroken block — left/right borders on
* every row so the sides form a continuous line down the whole group
* (row-gap: 0 above means adjacent rows touch exactly, so these can never
* show a seam), while the top/bottom border and rounded corners apply only
* at the group's own start/end row respectively. A lone root Task with no
* children carries both modifier classes and so renders a complete
* 4-sided card, same as before this Unit.
*/
.projecthub-portal-gantt-row__info {
background: var(--projecthub-portal-surface);
border-left: 1px solid var(--projecthub-portal-border);
border-right: 1px solid var(--projecthub-portal-border);
grid-column: 1;
left: 0;
padding: 0.4rem 0.75rem;
position: sticky;
z-index: 2;
}
.projecthub-portal-gantt-row__info--group-start {
border-top: 1px solid var(--projecthub-portal-border);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.projecthub-portal-gantt-row__info--group-end {
border-bottom: 1px solid var(--projecthub-portal-border);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/*
* Client Portal UI Restoration — hierarchy indent root cause fix: the
* previous approach stepped the *sticky* .projecthub-portal-gantt-row__info
* box itself right via margin-left, which a real-browser Horizontal Scroll
* QA confirmed collapses back to the unindented position once the timeline
* is scrolled — position: sticky's own "stuck" offset is computed from this
* element's inset (left: 0) against its scroll container, and margin on the
* sticky element itself is not reliably honored by every engine once it is
* actually in its stuck state. WP Admin's own Gantt (assets/css/
* admin-gantt.css .projecthub-admin-gantt-depth-1/2
* .projecthub-admin-gantt-row__info-box) never had this bug because it
* indents via padding-inline-start on a plain (non-sticky) inner box
* instead — the sticky element's own box never moves, so there is nothing
* for scroll to un-stick. This mirrors that pattern: .projecthub-portal-
* gantt-row__info-box is a plain grid-item child of the sticky info cell
* above it, and depth indentation is padding-inline-start on that inner
* box, which survives horizontal scroll unconditionally because it never
* depends on position: sticky's own offset math at all.
*/
.projecthub-portal-gantt-row__info-box {
position: relative;
}
.projecthub-portal-task-depth-1 .projecthub-portal-gantt-row__info-box {
padding-inline-start: 20px;
}
.projecthub-portal-task-depth-2 .projecthub-portal-gantt-row__info-box {
padding-inline-start: 40px;
}
/* The "接続線": drawn in the padding-inline-start gutter the rules above
just opened up, not flush against the content's own left edge — spans
the full row height so consecutive same-depth rows visually chain into
one continuous trunk line. Positioned against .projecthub-portal-gantt-
row__info-box (a plain, non-sticky box), so it moves correctly with the
indented content during horizontal scroll instead of drifting the way a
line anchored to the sticky parent's own offset would. */
.projecthub-portal-task-depth-1 .projecthub-portal-gantt-row__info-box::before,
.projecthub-portal-task-depth-2 .projecthub-portal-gantt-row__info-box::before {
border-left: 2px solid var(--projecthub-portal-border);
bottom: 0;
content: '';
position: absolute;
top: 0;
}
.projecthub-portal-task-depth-1 .projecthub-portal-gantt-row__info-box::before {
left: 10px;
}
.projecthub-portal-task-depth-2 .projecthub-portal-gantt-row__info-box::before {
left: 30px;
}
.projecthub-portal-gantt-row__name {
align-items: center;
display: flex;
font-weight: 600;
gap: 0.4rem;
margin: 0 0 0.15rem;
}
.projecthub-portal-gantt-row__name-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.projecthub-portal-gantt-row__assignee {
color: var(--projecthub-portal-muted);
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 400;
}
/* Hierarchy UI Redesign: the collapse/expand toggle, rendered only for a
row with at least one visible child (PortalGanttTaskDisplayView::
hasChildren()). A plain button, no confirm()/dialog — assets/js/
portal-gantt.js toggles .is-collapsed on descendant rows and flips
aria-expanded; nothing here depends on JS having run (the button is
inert, always expanded, until portal-gantt.js attaches its handler). */
.projecthub-portal-gantt-toggle {
background: none;
border: none;
border-radius: 4px;
color: var(--projecthub-portal-muted);
cursor: pointer;
display: inline-flex;
flex-shrink: 0;
padding: 2px;
}
.projecthub-portal-gantt-toggle:hover,
.projecthub-portal-gantt-toggle:focus-visible {
background: var(--projecthub-portal-gantt-weekend-bg);
color: var(--projecthub-portal-accent);
}
.projecthub-portal-gantt-toggle-icon {
border-bottom: 4px solid currentColor;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
display: block;
height: 0;
transform: rotate(180deg);
transition: transform 0.15s ease;
width: 0;
}
.projecthub-portal-gantt-toggle[aria-expanded='false'] .projecthub-portal-gantt-toggle-icon {
transform: rotate(90deg);
}
/*
* Client Portal UI Restoration — Task Row Height: status and assignee now
* share one line (align-items: center flex row) instead of stacking as two
* separate elements, shrinking the single-line-common-case row height
* without touching task name readability, hierarchy indentation, or the
* click target (this line has no interactive control of its own).
*/
.projecthub-portal-gantt-row__meta {
align-items: center;
color: var(--projecthub-portal-muted);
display: flex;
font-size: 0.75rem;
gap: 0.4rem;
margin: 0.1rem 0 0;
}
/*
* Client Portal UI Restoration — Status Visual: the status badge inside a
* Gantt row reuses admin.css's own .projecthub-badge--status-* color
* mapping (via BadgePresenter::forTaskStatus(), never a new status color
* system — PortalGanttTaskViewFactory resolves the variant, this selector
* only renders it), scoped to a smaller size than both the shared
* .projecthub-portal-badge default and WP Admin's own 12px badge, per this
* row's own compact density requirement — every other .projecthub-portal-
* badge usage (Requirement page, etc.) is untouched.
*/
.projecthub-portal-gantt-row__meta .projecthub-portal-badge {
flex-shrink: 0;
font-size: 0.6875rem;
font-weight: 600;
padding: 0.05rem 0.5rem;
}
.projecthub-portal-badge--status-not-started {
background: #f0f0f1;
border-color: #c3c4c7;
color: #3c434a;
}
.projecthub-portal-badge--status-in-progress {
background: #d4f4dd;
border-color: transparent;
color: #1a4d2e;
}
.projecthub-portal-badge--status-waiting-review,
.projecthub-portal-badge--status-on-hold {
background: #fef3cd;
border-color: transparent;
color: #7a5c00;
}
.projecthub-portal-badge--status-completed {
background: #dde7f5;
border-color: transparent;
color: #1d3a5f;
}
.projecthub-portal-gantt-bar {
align-self: center;
background: var(--projecthub-portal-accent);
border-radius: 4px;
height: 1rem;
position: relative;
z-index: 1;
}
/* Hierarchy UI Redesign: a slightly shorter bar per depth level, still
vertically centered in its own row — a purely visual cue reinforcing
that a child/grandchild's period sits nested within its ancestors',
alongside the row stacking itself. The actual containment guarantee
comes from TaskAncestorScheduleAdjuster (Application layer), not from
this styling. */
.projecthub-portal-gantt-bar--depth-1 {
height: 0.75rem;
}
.projecthub-portal-gantt-bar--depth-2 {
height: 0.5rem;
}
/* Hierarchy UI Redesign: a completed Task (TaskStatus::COMPLETED) reads
as visually "done" — a light gray box background, dimmed name text,
and a gray bar, regardless of depth. --projecthub-portal-bg is this
design system's own existing light gray (the page's own background,
reused here rather than introducing a new hex value). */
.projecthub-portal-task-completed .projecthub-portal-gantt-row__info {
background: var(--projecthub-portal-bg);
}
.projecthub-portal-task-completed .projecthub-portal-gantt-row__name-text {
color: var(--projecthub-portal-muted);
}
.projecthub-portal-task-completed .projecthub-portal-gantt-row__name-text::before {
content: '\2713\0020';
}
.projecthub-portal-task-completed .projecthub-portal-gantt-bar {
background: var(--projecthub-portal-muted);
}
.projecthub-portal-gantt-row__unscheduled {
align-self: center;
color: var(--projecthub-portal-muted);
font-size: 0.75rem;
grid-column: 2 / -1;
margin: 0;
}
/*
* Client Portal UI Restoration — Sticky Date Header (top-left corner):
* z-index: 5 stays the highest of the header's own stacking group
* (month/day-number/weekday below sit at 4) so this corner cell still wins
* over both a day header cell and a Task row passing beneath it during
* horizontal/vertical scroll. background is transparent so a Task row (or
* the group-spacer band) scrolling underneath during vertical scroll shows
* through rather than being masked by an opaque corner box. top: 0 needs
* no per-row offset since this single cell already spans all 3 header row
* tracks (grid-row: 1 / span 3, set by the PHP template), and with row-gap:
* 0 on the parent grid (see .projecthub-portal-gantt above) its rendered
* height already equals the header rows' own combined height exactly, with
* nothing left to reconcile.
*/
.projecthub-portal-gantt-header-spacer {
background: transparent;
grid-column: 1;
left: 0;
position: sticky;
top: 0;
z-index: 5;
}
/*
* Client Portal UI Restoration — Sticky Date Header backdrop (calendar
* side): month/day-number/weekday below (grid-row 1/2/3) are each placed
* in exactly one day column (or, for month, a span across same-month day
* columns) — none of them extends into this grid's own column-gap: 1rem
* track between adjacent day columns, since a plain, non-spanning grid
* item's box never includes the gap next to it. With nothing else opaque
* covering those 1rem gaps, a Task row/bar scrolling underneath during
* vertical scroll was visible through them, right through the sticky
* header's own 3-row band — reported directly against the real rendered
* page. This single element, spanning every calendar column and all 3
* header rows (grid-row: 1 / span 3, grid-column: 2 / -1, set by the PHP
* template) the same way .projecthub-portal-gantt-header-spacer already
* spans column 1, gets an opaque background specifically because its whole
* reason to exist is covering those gap tracks — unlike the corner spacer
* above, which stays transparent per this Unit's own explicit instruction.
* z-index: 3 sits below the header text cells themselves (4) and the
* corner spacer (5), so it never covers the header's own date labels, but
* above every body-row element that can scroll under it (info: 2, bar: 1,
* day-column background: 0).
*/
.projecthub-portal-gantt-header-backdrop {
background: var(--projecthub-portal-surface);
position: sticky;
top: 0;
z-index: 3;
}
/*
* Sticky Date Header: all 3 rows are independently position: sticky (a
* single element cannot span 3 separately-offset sticky positions), each
* needing its own cumulative `top` equal to the row height(s) above it.
* month and day-number get an explicit `height` (rather than relying on
* content/line-height/border to render exactly 1.35rem) so this arithmetic
* is exact regardless of font metrics — box-sizing: border-box (global)
* means each row's border/padding still renders inside that height, and
* the existing flex + align-items: center still centers its text within
* whatever height results. With row-gap: 0 on the parent grid, each row's
* natural (unstuck) resting position already equals these same cumulative
* offsets, so the header looks identical at rest and once stuck — no
* separate gap-cancelling margin is needed here.
*/
.projecthub-portal-gantt-month,
.projecthub-portal-gantt-day-number,
.projecthub-portal-gantt-weekday {
align-items: center;
background: var(--projecthub-portal-surface);
color: var(--projecthub-portal-muted);
display: flex;
font-size: 0.75rem;
justify-content: center;
padding: 0.2rem 0;
position: sticky;
z-index: 4;
}
.projecthub-portal-gantt-month {
border-bottom: 1px solid var(--projecthub-portal-border);
font-weight: 600;
height: 1.35rem;
top: 0;
}
.projecthub-portal-gantt-day-number {
height: 1.35rem;
top: 1.35rem;
}
.projecthub-portal-gantt-weekday {
border-bottom: 1px solid var(--projecthub-portal-border);
margin-bottom: 0.25rem;
top: 2.7rem;
padding-bottom: 0.4rem;
}
.projecthub-portal-gantt-day-number--weekend,
.projecthub-portal-gantt-weekday--weekend {
background: var(--projecthub-portal-gantt-weekend-bg);
}
.projecthub-portal-gantt-day-number--today,
.projecthub-portal-gantt-weekday--today {
background: var(--projecthub-portal-gantt-today-bg);
color: var(--projecthub-portal-accent);
font-weight: 600;
}
.projecthub-portal-gantt-day-column {
align-self: stretch;
z-index: 0;
}
.projecthub-portal-gantt-day-column--weekend {
background: var(--projecthub-portal-gantt-weekend-bg);
}
.projecthub-portal-gantt-day-column--today {
background: var(--projecthub-portal-gantt-today-bg);
}
/* -- responsive ------------------------------------------------------------
* Desktop (> 960px): sidebar + main, side by side.
* Tablet/mobile (<= 960px): navigation becomes a horizontal bar under the
* header rather than a fixed-width side column — with a single visible
* item today this stays a slim strip; it grows into a horizontally
* readable bar as more items are added later, still without any JS. No
* layout below relies on horizontal scrolling to avoid breaking; only the
* navigation bar, .projecthub-portal-table-scroll (the Requirement
* Version history table's own wrapper), and
* .projecthub-portal-gantt-timeline-scroll (the Gantt chart's own
* wrapper, Phase 45 Unit D) ever scroll horizontally, each contained to
* that one element, never the page itself (Phase 42 Unit H §37 —
* 320/375/768/1024 widths considered below).
*/
@media screen and (max-width: 960px) {
.projecthub-portal__body {
flex-direction: column;
}
.projecthub-portal-nav {
border-bottom-right-radius: 0;
border-right: none;
width: 100%;
}
.projecthub-portal-nav__list {
display: flex;
overflow-x: auto;
padding: 0.5rem;
}
.projecthub-portal-nav__link.is-active {
border-left: none;
border-bottom: 3px solid var(--projecthub-portal-accent);
padding-left: 1.25rem;
}
.projecthub-portal__main {
padding: 1rem;
}
}
@media screen and (max-width: 768px) {
.projecthub-portal-detail-card,
.projecthub-portal-version-summary,
.projecthub-portal-requirement-section,
.projecthub-portal-activity-item,
.projecthub-portal-dashboard-card,
.projecthub-portal-dashboard-attention__item,
.projecthub-portal-dashboard-project-card,
.projecthub-portal-project-list-card,
.projecthub-portal-task-list-card,
.projecthub-portal-chat-message,
.projecthub-portal-file {
padding: 1rem;
}
.projecthub-portal-dashboard-summary {
grid-template-columns: minmax(0, 1fr);
}
.projecthub-portal-file-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Hierarchy UI Redesign: .projecthub-portal-gantt-row__info is
deliberately excluded from the shared 1rem padding rule above —
the Gantt's own compact row density (§ above the gantt chart
rules) is a requirement at every width, not only desktop. */
.projecthub-portal-gantt-row__info {
padding: 0.5rem 0.625rem;
}
}
@media screen and (max-width: 480px) {
.projecthub-portal-login__container,
.projecthub-portal-message__container {
margin: 5vh 1rem;
max-width: none;
padding: 1.5rem;
}
.projecthub-portal__header {
padding: 0.5rem;
}
.projecthub-portal-detail-card,
.projecthub-portal-version-summary,
.projecthub-portal-requirement-section,
.projecthub-portal-activity-item,
.projecthub-portal-chat-message,
.projecthub-portal-file {
padding: 0.75rem;
}
.projecthub-portal-file-list {
grid-template-columns: minmax(0, 1fr);
}
}