html, body {
font-family: Inter, "Segoe UI", sans-serif;
font-size: 12px;
}
/* ── Scrollbars — match the React app (devtrac-ui/src/App.css) ──────────────
React styles ONE thin 6.4px bar globally (gray thumb on a light track) and
reserves NO permanent gutter: the bar overlays content only while scrolling.
The Blazor pages instead set `scrollbar-gutter:stable; scrollbar-width:thin`
inline on every scroll container, which (a) permanently reserves a gutter
strip on the right — most visible on the manager screens, whose grid scrolls
internally so the outer container never actually scrolls — and (b) forces a
wider ~11px bar in Chrome that overrides the webkit 6.4px width. Match React:
the global bar below, plus neutralizing those two inline props so the strip
is gone and Chrome uses the 6.4px bar. (The flyout keeps its stable gutter —
React's FormSlideout does too — but now at the same thin 6.4px width.) */
::-webkit-scrollbar {
width: 6.4px;
height: 6.4px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #999;
border-radius: 3.2px;
}
/* !important beats the inline (non-important) declarations on the containers.
Auto (not thin) lets Chrome honor the 6.4px ::-webkit-scrollbar width above;
Firefox falls back to its default bar exactly as the React app does. */
.mgr-scroll,
.overflow-y-scroll,
[style*="scrollbar-gutter"] {
scrollbar-gutter: auto !important;
scrollbar-width: auto !important;
}
:root {
--project-image: url('../images/100x50transparent.png');
--project-drawer-width: 224px; /* React app-sidebar / app-brand-block width (was 300px) */
--project-grey: #e6e7e9;
--project-drawer-width-collapsed: 52.8px; /* React .app-sidebar.collapsed width (was 95px) */
--projectrac-primary-color: transparent;
--projectrac-primary-text-color: white;
--projectrac-secondary-color: transparent;
--projectrac-secondary-color-mod: color-mix(in srgb,var(--projectrac-secondary-color), #fff 10%);
/* Sidebar background — React ProjectEnvLayout: a 20% tint of the primary
color on white (color-mix(in srgb, brandBg 20%, white)). */
--projectrac-sidebar-bg: color-mix(in srgb, var(--projectrac-primary-color) 20%, white);
--projectrac-secondary-text-color: white;
--projectrac-tertiary-color: #ececec;
--projectrac-tertiary-text-color: white;
--projectrac-button-color: #ececec;
--projectrac-button-text-color: black;
--projectrac-nav-height: 50px;
--project-nav-height: 112px; /* React app-top-row min-height (was 150px) */
--project-dialog-bg: #e7e7e8;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
@media (max-height: 688px) {
.side-navigation-logo {
visibility: hidden;
}
}
@media (min-width: 636px) {
.project-header-navigation {
width: var(--project-drawer-width);
max-width: var(--project-drawer-width);
height: var(--project-nav-height);
background-color: var(--projectrac-primary-color);
}
}
@media (max-width: 635.99px) {
.project-header-navigation {
width: var(--project-drawer-width);
min-width: var(--project-drawer-width);
height: var(--project-nav-height);
background-color: var(--projectrac-primary-color);
}
}
.content-start {
top: var(--project-nav-height);
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
span.custom-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-file-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 5px;
flex-grow: 1;
}
.file-badge {
width: 40px;
height: 40px;
background: var(--projectrac-secondary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 10px;
font-weight: bold;
}
.file-info {
flex: 1;
}
.center-in-column {
text-align: center !important;
}
.k-grid-table td.special-background {
background: #ffffcc !important;
}
div.workplan-tree button.k-button-Clear {
}
div.workplan-tree button:not(.workplan-new-task) span.k-svg-i-plus > svg {
fill: var(--projectrac-secondary-color) !important;
}
div.workplan-tree span.k-svg-i-star > svg {
fill: #d3c800;
}
/* ---------------------------------------------------------------------------
Project Workplan tree header — React `.wp2-table thead th`
(components/shared/ProjectWorkplanPage.css). Scoped to the page's own
`.workplan` tree so the shared SvaTreeList keeps its own chrome elsewhere.
React values: #eae8e5 fill, #222 text, 9.6px/600, padding 4.8px 9.6px,
24px row, and 1.6px #e0e0e0 separators on all sides but the left.
--------------------------------------------------------------------------- */
.workplan .tl-table thead th {
/* !important on font: the app-wide `div:not(.workplan-tree) th` rule
(app.css ~L338) forces 11px/bold with !important, and this tree's wrapper
is `.workplan`, not `.workplan-tree`, so it is NOT exempt. Plain
declarations lose to it no matter how specific. Same trap PortalGrid hit. */
font-size: 9.6px !important;
font-weight: 600 !important;
height: 24px;
/* SvaTreeList sizes its header row off --tl-head-row (34px); React is 24. */
--tl-head-row: 24px;
padding: 4.8px 9.6px !important;
background: #eae8e5;
color: #222;
letter-spacing: normal; /* SvaTreeList tracks 0.04em; React does not */
text-align: left;
border-top: 1.6px solid #e0e0e0;
border-bottom: 1.6px solid #e0e0e0;
border-right: 1.6px solid #e0e0e0;
border-left: none;
}
.workplan .tl-table thead th:last-child {
border-right: none;
}
/* Row cells — React `.wp2-task-row td` / `.wp2-subtask-row td`
(ProjectWorkplanPage.css L458). Same !important story as the header: the
app-wide `div:not(.workplan-tree) td` rule (app.css L358) forces 11px with
!important, and this tree is `.workplan`, not `.workplan-tree`. SvaTreeList
also sets its own 25px row height and `0 10px` padding. */
.workplan .tl-table tbody td {
font-size: 8.8px !important;
font-weight: 500 !important;
padding: 3.2px 9.6px !important;
height: 20.8px;
color: #333;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
vertical-align: middle;
}
.workplan .tl-table tbody td:last-child {
border-right: none;
}
/* The add / drag columns are 24px and 16px wide and SvaTreeList zeroes their
padding deliberately. The blanket `padding !important` above outranked
that, so the 20px "+" button was squeezed into a 24px cell with 19.2px of
padding — pushed off-centre and clipped. Put their zero back. */
.workplan .tl-table thead th.tl-add-col,
.workplan .tl-table thead th.tl-drag-col,
.workplan .tl-table tbody td.tl-add-col,
.workplan .tl-table tbody td.tl-drag-col {
padding: 0 !important;
text-align: center;
}
/* Status / Priority pills — React `.aa-status` (HomePage.css) and
`.wp2-priority`: 8.4px/500 in a fixed-height tile, with NO vertical padding.
The app-wide `.rounded-status` is 10.5px/400 with 3px/4px top/bottom padding,
which is what kept the rows taller than React's. Scoped to `.workplan` so the
pill keeps its normal size on every other screen that uses it. */
.workplan .tl-table tbody td .rounded-status {
display: inline-flex;
align-items: center;
height: 17.6px;
padding: 0 6.4px;
border-radius: 2.4px;
font-size: 8.4px !important;
font-weight: 500 !important;
}
/* React's Priority tile is 1.6px shorter than the Status tile. */
.workplan .tl-table tbody td.wp2-col-priority .rounded-status {
height: 16px;
}
/* React's first header cell is the "+" (Plus-Icon.png). SvaTreeList already
emits an empty `th.tl-add-col` in that slot for the add column, so the icon
goes in as a background rather than by adding a column. */
.workplan .tl-table thead th.tl-add-col {
background-image: url('/icons/Plus-Icon.png');
background-repeat: no-repeat;
background-position: center;
background-size: 12.8px 12.8px;
}
/* React `.wp2-header-star-icon` — 11.2px, DevTRAC black, centred in its cell.
Replaces a 24px Star.svg, which is what made it read oversized. */
.wp2-header-star-icon {
display: block;
width: 11.2px;
height: 11.2px;
margin: 0 auto;
fill: #222;
stroke: #222;
}
/* React puts this icon in its own `.wp2-col-toggle` column; with the column
count fixed it sits inline ahead of the label instead, on React's 4.8px
header gap. */
.wp2-task-header {
display: inline-flex;
align-items: center;
gap: 4.8px;
vertical-align: middle;
}
div.workplan-tree > div > div.k-grid-header > div > table > thead > tr > th:nth-child(n+1):nth-child(-n+3) {
border-right-width: 0px !important;
border-right-color: transparent !important;
border-right-style: solid !important;
}
div.workplan-tree > div > div.k-grid-header > div > table > thead > tr > th:nth-child(n+1):nth-child(-n+4) {
border-left-width: 0px !important;
border-left-color: transparent !important;
border-left-style: solid !important;
}
div.workplan-tree div.k-grid-container > div.k-grid-content > table > tbody > tr > td:nth-child(2) {
white-space: nowrap;
}
div.workplan-tree > div > div.k-grid-container > div.k-grid-content > table > tbody > tr.project-grid-header td {
border-bottom-width: 2px !important;
border-bottom-color: var(--projectrac-secondary-color) !important;
border-bottom-style: solid !important;
}
div.workplan-tree > div > div.k-grid-container > div.k-grid-content > table > tbody > tr.project-grid-header td {
border-left-width: 0px !important;
border-left-color: transparent !important;
border-left-style: solid !important;
}
div.workplan-tree > div > div.k-grid-container > div.k-grid-content > table > tbody > tr:not(.project-grid-header) td:nth-child(n+4):nth-child(-n+10) {
border-right-width: 1px !important;
border-right-color: silver !important;
border-right-style: solid !important;
}
div.workplan-tree > div > div.k-grid-container > div.k-grid-content > table > tbody > tr:not(.project-grid-header) td:nth-child(n+1):nth-child(-n+4) {
border-left-width: 0px !important;
border-right-width: 0px !important;
border-right-color: transparent !important;
border-right-style: solid !important;
}
div.workplan-tree > div > div.k-grid-container > div.k-grid-content > table > tbody > tr:not(.project-grid-header) td:nth-child(n+1):nth-child(-n+5) {
border-left-width: 0px !important;
border-left-color: transparent !important;
border-left-style: solid !important;
}
div.workplan-tree > div > div.k-grid-container > div.k-grid-content > table > tbody > tr:not(.project-grid-header) td {
border-bottom-width: 1px !important;
border-bottom-color: silver !important;
border-bottom-style: solid !important;
white-space: nowrap;
}
div.workplan-tree span.k-svg-i-plus {
margin-top: -1px;
}
.workplan-tree-history tr:first-of-type[aria-level="1"] {
background-color: #abf9a8 !important;
color: black;
}
.workplan-tree-history tr[aria-level="1"] {
background-color: #e59279 !important;
color: black !important;
}
.letter-circle {
background-color: #d9d9d9;
border-radius: 50%;
color: #333;
cursor: default;
font-size: 9px;
font-weight: 600;
height: 20px;
min-height: 20px;
justify-content: center;
width: 20px;
min-width: 20px;
padding: 4px;
text-align: center;
margin-right: 6px;
display: inline-block;
}
.input-validation-error {
border: 2px solid red;
background-color: red;
outline: none;
}
.k-invalid .k-textbox,
.k-invalid .k-input {
border-color: red;
}
table thead tr th {
border-bottom: 1px solid white !important;
}
table th {
border-left: 1px solid white !important;
border-right: 1px solid white !important;
}
.header-margin-top {
margin-top: 2.25rem;
}
div.workplan-tree td {
padding-left: 6px;
padding-right: 6px;
padding-top: 1px !important;
padding-bottom: 1px !important;
padding-block-end: 0px !important;
}
div:not(.workplan-tree) td {
padding: 3px 7px 3px 7px;
font-size: 11px !important;
font-weight: 500 !important;
}
div:not(.workplan-tree) th {
padding: 3px 7px 3px 7px;
font-size: 11px !important;
font-weight: bold !important;
}
.bootstrap-gutter-fix {
margin-right: 5px;
}
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.projectrac-height {
height: calc(100vh - var(--project-nav-height));
}
.projectrac-report-height {
height: calc(100vh - (var(--project-nav-height) + 134px));
}
.projectrac-card-height {
/* excludes card padding */
height: calc(100vh - (var(--project-nav-height) + 150px));
}
.projectrac-bi-height {
height: calc(100vh - (var(--project-nav-height) + 130px));
aspect-ratio: 2.1 / 1;
max-width: calc(100vw - 350px);
}
.projectrac-bi-height-contract {
height: calc((100vh - (var(--project-nav-height))) - 130px);
aspect-ratio: 2.1 / 1;
max-width: calc(100vw - 350px);
}
.dialog-bg {
background-color: var(--project-dialog-bg);
}
.nav-landing-login {
background-color: black;
height: var(--projectrac-nav-height);
min-height: var(--projectrac-nav-height);
}
.nav-project {
/*background-color: var(--projectrac-primary-color);*/
background-color: #e6e7e8;
color: var(--projectrac-primary-text-color);
height: var(--project-nav-height);
min-height: var(--project-nav-height);
}
.loading {
color: white;
/*height: 100vh;
background-color: black;*/
position: fixed; /* Positions the overlay relative to the viewport */
top: 0;
left: 0;
width: 100%; /* Ensures it covers the full width */
height: 100%; /* Ensures it covers the full height */
background-color: rgba(0, 0, 0); /* Semi-transparent black background */
display: flex; /* Centers content horizontally and vertically */
justify-content: center;
align-items: center;
z-index: 99999; /* Ensures it appears on top of other content */
}
.W225
{
width: 225px;
}
.W225 li {
margin-top: 25px;
}
#userButton > span.k-button-text {
flex: 1 1 auto !important;
}
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: auto;
}
.loading-progress circle {
fill: none;
stroke: black;
stroke-width: 0.2rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: white;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.spinner {
/* Add your spinner animation or styling here */
/* Example: a simple rotating circle */
border: 4px solid #f3f3f3;
border-top: 4px solid black;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 15px auto 15px auto;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-progress-text {
text-align: center;
font-weight: bold;
/*inset: calc(20vh + 3.25rem) 0 auto 0.2rem;*/
position: relative;
}
.landing-login-logo {
font-size: 45px;
font-weight: bolder;
margin-left: -2px;
}
.secondary-inversed-text {
color: var(--projectrac-secondary-color);
font-weight: bold;
}
.secondary-text {
color: var(--projectrac-secondary-color);
}
.primary-inversed-text {
color: var(--projectrac-primary-color);
}
.projectrac-spinner {
width: 50px;
height: 50px;
position: relative;
top: 50%;
left: 50%;
}
.border-bottom-thick {
border-bottom: 1px solid white;
}
.login-secondary-text {
font-size: 16px;
font-weight: bold;
}
.login-background {
background-color: white;
height: calc(100vh - var(--projectrac-nav-height));
}
.landing-logo-text {
font-weight: bolder;
font-size: 16px;
}
.landing-logo-image {
justify-self: start;
display: inline-block;
height: 3.5rem;
align-items: center;
}
.header-initials {
border-radius: 3px;
background-color: #f5f5f5;
color: black;
}
.project-header-logo {
/* React .app-brand-block logo inset: logo at x=12, y=20. The 15.8px bottom padding
sets the gap down to the Home button (Home top = 20+30.4+15.8 = 66.2, like React). */
padding: 20px 12px 15.8px 12px;
}
/* Home button in the brand block — mirrors React .brand-nav-btn: a 28.8px icon wrap
(7.2 padding → 14.4px icon at x=19.2), 4.8px gap, then the label at x=45.6. */
.brand-nav-btn {
display: flex;
width: fit-content; /* content-width like React (icon-wrap + gap + label), not full row */
align-items: center;
gap: 4.8px;
height: 28.8px;
margin-left: 12px; /* box starts at x=12 like React */
cursor: pointer;
}
.brand-nav-icon-wrap {
width: 28.8px;
height: 28.8px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex-shrink: 0;
}
.brand-nav-icon {
width: 14.4px;
height: 14.4px;
}
.brand-nav-label {
font-size: 11.2px;
font-weight: 500;
color: #fff;
line-height: 1;
}
.project-header {
/*background: url('/images/madison-waterfront2.jpg') repeat center center !important;*/
background-repeat: repeat;
background-position: center center;
height: var(--project-nav-height);
background-color: white;
border-bottom: 1px solid var(--projectrac-primary-color);
min-width: 500px;
}
.project-header-home-spacing {
min-height: 1.5rem;
}
.project-header-secondary {
background-color: white;
height: var(--project-nav-height);
}
.page-header {
font-size: 1.25rem;
line-height: 1.2;
margin-bottom: 2px;
}
.page-header-lg {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 2px;
}
.project-card-header {
color: var(--projectrac-primary-color);
font-size: 22px;
vertical-align: middle;
}
.side-navigation-panel {
width: var(--project-drawer-width);
min-width: var(--project-drawer-width);
min-height: calc(100vh - var(--project-nav-height));
background-color: var(--projectrac-sidebar-bg);
transition: width 0.5s ease-out;
padding-top: 12px; /* React .app-sidebar-content top inset */
}
.side-navigation-panel-secondary {
width: var(--project-drawer-width);
min-width: var(--project-drawer-width);
min-height: calc(100vh - var(--project-nav-height));
background-color: var(--project-dialog-bg);
transition: width 0.5s ease-out;
}
.side-navigation-link-open {
height: 36px;
margin-left: 1.5px;
}
/* Project Information / Project Dashboard (SvgButton) — React .env-nav-section
.home-section-header: 11.2px / weight 500 grey text + 14.4px grey icon, inset
12px to line up with the top-level buttons. */
.env-nav-link {
display: flex;
align-items: center;
margin-left: 0; /* drop .side-navigation-link-open's 1.5px so the icon lands at React's 19.2px */
padding-left: 12px;
font-size: 11.2px;
font-weight: 500 !important; /* beats the component's fw-bold */
color: rgba(0, 0, 0, 0.5);
/* React .home-section-header: 28.77px tall, 6.4px below it. Overrides the
.side-navigation-link-open height:36px. */
height: 28.8px;
margin-bottom: 6.4px;
}
/* Icon box — React .home-section-icon-wrap: 7.2px padding around a 14.4px icon,
so the icon starts 7.2px in (at 19.2px from the sidebar edge, matching React). */
.env-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 7.2px;
flex-shrink: 0;
}
.env-nav-icon {
width: 14.4px;
height: 14.4px;
object-fit: contain;
/* React .env-nav-section .home-section-icon — recolor the black PNG to ~50% grey. */
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) brightness(30%) opacity(50%);
}
/* The label span: drop the component's ms-2 (8px) and mb-n2 (-8px). The mb-n2
pushed the text off-center in the flex row; margin 0 lets align-items:center
center it against the icon. React's 4.8px icon→label gap comes from the . */
.env-nav-link span {
margin-left: 0 !important;
margin-bottom: 0 !important;
}
.side-navigation-panel-separator {
/* React .env-nav-divider: a 1px grey line, inset 12px to match the buttons.
Top 10.4 = React's 8.8 divider margin + the 1.6px margin-bottom React puts on the
Dashboard nav section, so the divider (and the mgmt group below) sit at React's y. */
margin: 10.4px 12px 30.4px;
background-color: rgba(0, 0, 0, 0.5);
border: 0;
height: 1px;
opacity: 1;
}
.side-navigation-panel-separator-collapsed {
/* Centered in the 52.8px pane: width 28.8 (= icon-box width) with auto L/R margins
→ x=12, 12px each side, sitting directly under the icon boxes. Grey to match the
expanded divider so it reads as the same line. Vertical footprint (8.8 top /
30.4 bottom) matches the expanded divider so management icons don't jump. */
margin: 10.4px auto 30.4px !important;
background-color: rgba(0, 0, 0, 0.5);
border: 0;
height: 1px;
width: 28.8px;
opacity: 1;
}
.content-separator {
/*margin-left: 1.5rem !important;*/
background-color: var(--projectrac-primary-color);
border: 0;
height: 1px;
opacity: 1;
}
.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
background-color: transparent;
color: var(--projectrac-secondary-color);
font-weight: bold;
}
.multi-header th[data-level="1"] > span > span > span.k-column-title {
margin-right: auto !important;
margin-left: auto !important;
}
.justify-left th[data-level="1"]:not(:first-child) > span > span > span.k-column-title {
margin-right: auto !important;
margin-left: auto !important;
}
.justify-left th[data-level="1"] > span > span > span.k-column-title {
margin-right: auto;
margin-left: 0px;
text-align: left;
}
.justify-left td:has(.k-checkbox-wrap) {
text-align: center;
background-color: #ffffcc;
}
.project-grid-header {
backdrop-filter: brightness(33310%);
color: var(--projectrac-secondary-color) !important;
background-color: hsl(from var(--projectrac-secondary-color) h s l / .15) !important;
}
.column-item-hidden {
display: none;
}
.hover-column-item .k-grid-content tr:hover .column-item-hidden {
fill: var(--projectrac-secondary-color) !important;
stroke: var(--projectrac-secondary-color) !important;
display: inline;
background-color: hsl(from var(--projectrac-secondary-color) h s l / .1) !important;
}
.column-item-hidden .k-button-solid-base {
color: var(--projectrac-secondary-color) !important;
background-color: hsl(from var(--projectrac-secondary-color) h s l / .1) !important;
}
.grid-button {
height: 28px;
}
.TelerikNotification .k-notification-container .k-notification {
width: 300px;
position: relative;
overflow: hidden;
text-align: center;
text-wrap: auto;
align-items: center;
}
.custom-notification-parent {
position: absolute; /* lets the notifications use this parent for positioning */
left: 100%;
top: var(--projectrac-nav-height);
transform: translate(-110%, -30px);
z-index: 10234; /* depends on other z-indexes on the page */
/* This example centers the notification container according to its own parent which is
below the button.
Centering approach based on https://css-tricks.com/centering-css-complete-guide/
*/
}
.custom-positioned-notifications {
position: relative; /* force the individual notifications respect the position of their parent */
flex-wrap: nowrap !important; /* display the individual notifications in a single column */
}
.k-table-tfoot {
background-color: var(--project-dialog-bg);
}
.side-navigation-panel-collapsed {
width: var(--project-drawer-width-collapsed);
min-width: var(--project-drawer-width-collapsed);
height: calc(100vh - var(--project-nav-height));
background-color: var(--projectrac-sidebar-bg);
min-height: 300px;
transition: width 0.5s ease-out;
padding-top: 12px; /* match .side-navigation-panel so items don't jump up 12px on collapse */
}
.project-info-box {
padding-left: 30px !important;
padding: 6px;
}
.project-info-button {
border-radius: 5px;
height: 30px;
color: white;
margin-left: auto;
margin-right: auto;
max-width: 140px;
background-color: var(--projectrac-secondary-color);
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
display: block;
}
.project-info-button-collapsed {
text-align: center;
border-radius: 5px;
color: white;
max-width: calc(var(--project-drawer-width-collapsed) - 10px);
margin-left: auto;
margin-right: auto;
background-color: var(--projectrac-secondary-color);
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
display: block;
}
/* ---------------------------------------------------------------------------
Project-environment sidebar footer — React `.app-sidebar-footer`, and the
twin of the Landmark shell's `.lmk-sidebar-footer`. Replaces the old
`position: fixed` `.side-navigation-logo`, which floated the wordmark at the
viewport's bottom-left instead of belonging to the panel (so it never
narrowed with the collapsed rail).
`margin-top: auto` pins it to the bottom of the existing flex column without
restructuring the sidebar's markup. The fill is one shade darker than the
panel, as React does with color-mix(--shell-sidebar-bg 97%, black).
--------------------------------------------------------------------------- */
.env-sidebar-footer {
flex: 0 0 auto;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 52.8px;
width: var(--project-drawer-width);
min-width: var(--project-drawer-width);
padding: 12px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.2);
background-color: color-mix(in srgb, var(--projectrac-sidebar-bg) 97%, black);
transition: width 0.5s ease-out, min-width 0.5s ease-out;
/* Clip the cross-fading wordmark. It is absolutely positioned and ~84px
wide, so in the 52.8px collapsed rail it hangs over the edge — still laid
out, since `.hidden` only zeroes opacity. The panel carries Bootstrap's
`overflow-y-auto`, and a non-visible overflow on one axis forces the other
to compute as `auto`, so that overhang became a horizontal scrollbar.
React contains it on `.app-sidebar` (`overflow: hidden`) instead. */
overflow: hidden;
}
.env-sidebar-footer.collapsed {
width: var(--project-drawer-width-collapsed);
min-width: var(--project-drawer-width-collapsed);
}
.env-sidebar-logo {
position: absolute; /* React: both marks share the footer's centre */
height: 28px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.env-sidebar-icon {
height: 19.2px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.env-sidebar-logo.hidden,
.env-sidebar-icon.hidden {
opacity: 0;
pointer-events: none;
}
/* Kept for any other consumer; no longer used by ProjectLayout. */
.side-navigation-logo {
position: fixed;
bottom: 0;
left: 0;
margin-left: 12px; /* further left (was 1.5rem / 24px) */
background-color: var(--projectrac-sidebar-bg);
}
.side-navigation-logo-collapsed {
position: fixed;
bottom: 0;
left: 0;
width: var(--project-drawer-width-collapsed);
background-color: var(--projectrac-sidebar-bg);
}
.landmark-logo {
/* React .app-sidebar-logo: 28px tall (was width:114px). width:auto keeps the
aspect (~89px); no auto margins so it sits left, not centered. */
height: 28px;
width: auto;
object-fit: contain;
}
.landmark-logo-collapsed {
width: 70px;
margin-left: 7px;
}
.k-button-text>span.k-icon {
margin-top: -4px;
margin-right: 5px;
}
.svg-grid-sm-fix {
position: relative;
top: -1.5px;
}
.colored-svg>svg {
fill: var(--projectrac-secondary-color) !important;
}
/* For Telerik UI for Blazor FileSelect/Upload
.k-dropzone .k-dropzone-hint, .k-file, .k-upload-files.k-reset {
display: none;
}
.k-upload .k-dropzone {
border: none;
padding: 0;
}
.k-upload .k-dropzone em {
display: none;
}
*/
/*.k-numerictextbox > .k-input-inner {
text-align: right !important;
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
*/
#userdetailselector.k-dropdownlist > .k-input-inner {
background-color: #e7e7e8 !important;
}
#projectselector.k-dropdownlist {
border-color: white;
}
#projectselector.k-dropdownlist > .k-input-inner:hover {
background-color: var(--projectrac-primary-color) !important;
/* backdrop-filter: brightness(210%);
color: var(--projectrac-secondary-color) !important;
background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.3) !important;*/
}
span.k-dropdownlist:not(#projectselector) > span.k-input-inner {
background-color: white;
}
.k-window-titlebar {
background-color: var(--projectrac-secondary-color) !important;
color: var(--projectrac-secondary-text-color) !important;
}
div.custom-title > div.k-dialog-titlebar {
background-color: var(--projectrac-primary-color) !important;
color: var(--projectrac-primary-text-color) !important;
}
.k-splitbar.k-focus {
background-color: white !important;
}
.k-resize-handle {
height: 100% !important;
}
.k-splitbar {
padding-left: 0px !important;
padding-right: 9px !important;
}
.k-resize-handle {
width: 1px !important;
}
.k-column-title {
font-weight: bold;
}
.k-numerictextbox input {
text-align: right;
}
.k-collapse-prev {
margin: 0px !important;
padding: 0px !important;
}
.k-collapse-next {
margin: 0px !important;
padding: 0px !important;
}
/*li.k-item.k-menu-item > span {
color: var(--projectrac-secondary-text-color) !important;
font-weight: bold;
background-color: var(--projectrac-secondary-color) !important;
border-radius: 4px;
}*/
/*.k-menu-link-text {
margin-top: 2px;
color: var(--projectrac-secondary-text-color) !important;
}*/
.user-button-item {
font-size: 15px;
color: black !important;
}
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link {
background-color: var(--projectrac-secondary-color) !important;
}
.k-link .k-menu-link {
color: var(--projectrac-secondary-text-color) !important;
}
.k-table-th.k-sorted, th.k-table-th {
color: var(--projectrac-primary-text-color);
background-color: var(--projectrac-primary-color);
}
.k-checkbox {
border-color: gray;
}
.project-border-top {
border-top: 1px solid black !important;
}
.dropdown-menu-secondary {
background-color: var(--projectrac-secondary-color);
color: var(--projectrac-secondary-text-color);
border-radius: 4px;
}
.back-button {
color: var(--projectrac-secondary-color);
background-color: silver;
}
.utility-button {
color: black;
padding: 6px 10px;
background-color: #cbcccb;
}
.approval-button {
color: white;
background-color: gray;
}
.project-button {
padding: 4px;
width: 80px;
}
.e-accordion .e-acrdn-item .e-acrdn-header {
padding: 5px 8px !important;
}
.xl-button {
width: 330px !important;
max-width: 330px !important;
}
.mt-nxl {
margin-top: -0.05rem !important;
}
.mt-6 {
margin-top: 24px !important;
}
.mt-7 {
margin-top: 28px !important;
}
.mt-8 {
margin-top: 32px !important;
}
code {
color: #c02d76;
}
.full-screen-wait {
background-color: rgba(0,0,0,.7);
width: 100vw;
height: 100vh;
position: absolute;
z-index: 10005;
top: 0px;
left: 0px;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
.project-select {
color: var(--projectrac-primary-text-color);
background-color: var(--projectrac-primary-color);
}
.project-select:hover {
color: var(--projectrac-primary-text-color);
background-color: var(--projectrac-secondary-color);
}
.grouped-accordion-button {
/* React .home-section-header (HomeSidebar.css): 11.2px / weight 500, header
margin-bottom 6.4px. min-width:220px + margin:auto removed — they overflowed
the 224px sidebar and centered the item; React headers are left-aligned and
fill the column. Colours kept (pill styling out of this pass's scope). */
color: var(--projectrac-primary-text-color);
background-color: var(--projectrac-primary-color);
font-size: 11.2px;
font-weight: 500;
min-height: 28.8px; /* React header height (its icon-wrap: 14.4 + 2×7.2) */
padding: 0 8px 0 0; /* React header padding is 0; icon-wrap is flush left, 8px right for the caret */
margin-bottom: 8px; /* React inter-pill gap = header mb 6.4 + section mb 1.6 = 8px → 36.8px c2c */
border-radius: 3.2px; /* React .env-resources-section .home-section-header */
cursor: pointer;
}
/* Left icon on the expanded management pill (React .env-icon-wrap + .home-section-icon):
the 28.8px svg is flush at the pill's left edge; the glyph renders ~14px white, centered. */
/* React .env-icon-wrap: a 28.8px box holding a 14.4px icon, so the glyph sits
the same distance from the pill's edge as in React. Used by both the expanded
pill (NavButton) and the collapsed rail (NavExpander). */
.nav-button-icon-wrap {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28.8px;
height: 28.8px;
}
.nav-button-icon {
flex-shrink: 0;
display: block;
width: 14.4px;
height: 14.4px;
object-fit: contain;
/* React ships black PNGs and inverts them for the dark pill. */
filter: brightness(0) invert(1);
}
/* Label sits 4.8px right of the icon (React .home-section-header span padding-left). */
.nav-button-label {
padding-left: 4.8px;
}
.grouped-accordion-subbutton {
margin-left: auto;
margin-right: auto;
color: var(--projectrac-primary-color);
padding: 2px;
min-width: 220px;
cursor: pointer;
}
.grouped-accordion-subbutton:hover {
color: var(--projectrac-secondary-color);
}
/* Sidebar section (a menu group). The 12px side padding is React's
.app-sidebar-content inset; it centers the top-level button so it is 200px
wide in the 224px sidebar (12px each side). No bottom margin: the gap between
buttons is the button's own margin-bottom (6.4px). */
.nav-section {
padding: 0 12px;
}
/* Sub-item list under a section header — React `.env-submenu`, padding-left
41.6px. That was 24px here because the section header had no icon to clear;
now that the pill carries the React PNG, the full indent applies. Both apps
put the item 53.6px from the sidebar's left edge (12px content inset + 41.6). */
.nav-submenu {
padding-left: 41.6px;
}
/* Open submenu — React `.env-submenu.open { padding-bottom: 6.4px }`: the space
between the last sub-item and the next section's button. Only while open, so a
closed section keeps the plain button-to-button gap. */
.nav-submenu.accordion-state-visible {
padding-bottom: 6.4px;
}
/* Sidebar sub-item (NavText in the expanded Accordion) — React .env-submenu-item
(EnvSidebar.css): 10.4px / weight 500, padding 3.2px 0. The 41.6px indent under
the section header comes from the submenu container (.accordion-state-gone). */
.nav-text-item {
font-size: 10.4px;
font-weight: 500;
padding: 3.2px 0;
cursor: pointer;
}
.nav-text-item:hover {
color: var(--projectrac-secondary-color);
}
.grouped-collapsed-subbutton {
/* Popup dropdown link — React .sidebar-tooltip-dropdown-item: grey text on the
white popup, with a 16px left inset. */
color: rgba(0, 0, 0, 0.5);
padding: 3.2px 9.6px 3.2px 16px;
cursor: pointer;
}
.grouped-collapsed-subbutton:hover {
color: var(--projectrac-secondary-color);
}
.grouped-accordion-subitem {
cursor: pointer;
color: white;
}
.grouped-accordion-selected {
background-color: var(--projectrac-secondary-color);
font-weight: bold;
}
/* Selected sub-item — React .env-submenu-item.active: accent color, weight 600
(not bold/700), and a small rounded block in the gutter to its left. The
2.4 x 9.6px bar sits at -7.2px, inside .nav-submenu's 24px indent. */
.menu-selected {
color: var(--projectrac-secondary-color);
font-weight: 600;
position: relative;
}
.menu-selected::before {
content: '';
position: absolute;
left: -7.2px;
top: 50%;
transform: translateY(-50%);
width: 2.4px;
height: 9.6px;
border-radius: 1px;
background-color: var(--projectrac-secondary-color);
}
.collapsed-menu-button {
margin-left: auto;
margin-right: auto;
/* 8px row gap = expanded management pill's margin-bottom (React's 36.8px c2c), so the
icons keep the same spacing and y positions as the expanded buttons. */
margin-bottom: 8px;
/* React collapsed icon box: 28.8px square. display:block (NOT flex): the 28.8px svg
fills the box exactly so no centering is needed, and — critically — a flex box
computes the absolutely-positioned flyout's static top ~0.02px off, which snaps to a
1px gap for whichever row lands on an x.5 device pixel. block = exact 0 offset. */
display: block;
width: 28.8px;
height: 28.8px;
border-radius: 3.2px;
background-color: var(--projectrac-primary-color);
}
.side-navigation-panel-collapsed .ac-body > svg {
/* block, not inline — kills baseline whitespace so the 28.8px svg fills the 28.8px box. */
display: block;
}
.collapsed-menu-button-selected {
margin-left: auto;
margin-right: auto;
width: 36px;
height: 36px;
border-radius: 7px;
background-color: var(--projectrac-secondary-color);
}
.collapsed-menu-extension {
/* Collapsed-rail flyout header. React (.sidebar-tooltip-portal.env-tooltip-menu)
opens to the RIGHT of the 52.8px rail: header aligned to the hovered icon
(x=12, over the box), 268px wide. offsetParent is BODY (x=0), so left:12
lands the header at the icon's x. */
width: 250px;
left: 35px;
height: 28.8px;
position: absolute;
border-top-right-radius: 7px;
background-color: var(--projectrac-primary-color);
z-index: 4000;
}
.milestone-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
transition: transform 0.15s ease;
}
.milestone-toggle:hover:not(.disabled) {
transform: scale(1.1);
}
.milestone-toggle:active:not(.disabled) {
transform: scale(0.95);
}
.milestone-toggle.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.no-alt-rows > div > div.k-grid-container > div.k-grid-content > table > tbody > tr:not([aria-level='1']) {
background-color: transparent !important;
}
.no-alt-rows > div > div.k-grid-container > div.k-grid-content > table > tbody > tr:hover:not([aria-level='1']) {
background-color: #eaeaea !important;
}
.no-alt-rows > div > div.k-grid-container > div.k-grid-content > table > tbody > tr.k-grid-edit-row {
background-color: #eaeaea !important;
}
.no-alt-rows-row-border > div > div.k-grid-container > div.k-grid-content > table > tbody > tr > td {
border-bottom: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)) !important;
}
.history .k-grid-header .k-table-th {
vertical-align: top !important;
}
.workplan-add-child {
border: 0px, solid transparent;
background-color: transparent;
}
.workplan-new-task {
background-color: var(--projectrac-secondary-color);
color: var(--projectrac-secondary-text-color);
font-size: 7px;
width: 13px;
height: 13px;
padding-left: 0px;
}
.workplan-new-task:hover {
background-color: var(--projectrac-secondary-color);
color: var(--projectrac-secondary-text-color);
filter: grayscale(51);
}
.dropdown-toggle {
background-color: var(--projectrac-secondary-color);
color: var(--projectrac-secondary-text-color);
}
.dropdown-toggle:hover {
background-color: var(--projectrac-secondary-color);
color: var(--projectrac-secondary-text-color);
filter: brightness(1.15);
}
.dropdown-toggle.show {
background-color: var(--projectrac-primary-color);
color: var(--projectrac-secondary-text-color);
}
.report-background {
padding: 6px;
width: 250px;
backdrop-filter: brightness(33310%);
color: var(--projectrac-secondary-color) !important;
/* background-color: var(--projectrac-secondary-color) !important;*/
background-color: hsl(from var(--projectrac-secondary-color) h s l / .2) !important;
}
li.k-treeview-item {
color: var(--projectrac-secondary-color);
}
li.k-treeview-item[aria-level="2"] > span > .k-treeview-leaf:hover {
padding: 6px !important;
backdrop-filter: brightness(33310%);
color: var(--projectrac-secondary-color) !important;
/* background-color: var(--projectrac-secondary-color) !important;*/
background-color: hsl(from var(--projectrac-secondary-color) h s l / .2) !important;
}
li.k-treeview-item[aria-level="1"] .k-treeview-leaf:hover {
background-color: transparent;
padding: 6px !important;
color: var(--projectrac-secondary-color);
}
li.k-treeview-item[aria-level="1"] .k-treeview-leaf {
padding: 6px !important;
}
div.dropdown > ul {
padding: 6px;
backdrop-filter: brightness(33310%);
color: var(--projectrac-secondary-color) !important;
/* background-color: var(--projectrac-secondary-color) !important;*/
background-color: hsl(from var(--projectrac-secondary-color) h s l / .2) !important;
}
div.dropdown > ul > li > a {
padding: 6px;
color: var(--projectrac-secondary-color) !important;
/* background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.3) !important;
*/
}
a.dropdown-item:hover {
background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.2) !important;
color: var(--projectrac-secondary-text-color);
border-radius: 3px;
}
/*.k-treeview .k-icon:before {
content: "\e127";*/ /* Example Unicode character */
/*}*/
.collapsed-menu-extension-selected {
width: 268px;
left: 12px;
height: 28.8px;
position: absolute;
border-top-right-radius: 7px;
background-color: var(--projectrac-secondary-color);
z-index: 4000;
}
/* Sidebar collapse toggle — ported verbatim from the React AppShell
(devtrac-ui/src/components/layout/AppShell.css .app-sidebar-toggle): a plain
«/» text button absolutely pinned to the top-left of the content column
(which is position:relative). z-index:1 keeps it below the sticky sidebar. */
.app-sidebar-toggle {
position: absolute;
top: 11.2px;
left: 4px;
background: none;
border: none;
color: #333333;
font-size: 17.6px;
/* React's button keeps the UA default line-height (no Bootstrap). Bootstrap
Reboot here forces `button { line-height: inherit }` (1.5 = 26.4px), which
makes the box taller and the «/» glyph sit off-center; `normal` restores
React's compact, vertically-centered glyph. */
line-height: normal;
cursor: pointer;
padding: 2.4px 4.8px;
z-index: 1;
}
.app-sidebar-toggle:hover {
color: #333;
}
.chevron-left {
transform: rotate(0deg);
transition: transform 0.3s ease-out;
left: 263px;
top: 39.5px;
cursor: pointer;
z-index: 888;
}
.chevron-right {
transform: rotate(180deg);
transition: transform 0.3s ease-out;
left: 62px;
top: 39.5px;
cursor: pointer;
z-index: 888;
}
.chevron-up {
transform: rotate(180deg);
transition: transform 0.3s ease-out;
}
.chevron-down {
transform: rotate(0deg);
transition: transform 0.3s ease-out;
}
.accordion-state-gone {
/* visibility: collapse;
display: none;*/
overflow: hidden;
max-height: 0px;
transition: transform 0.5s ease-out;
transition: max-height .5s ease-out;
}
.accordion-state-visible {
/* visibility: visible;
display: unset;*/
max-height: 500px;
transition: transform 0.5s ease-out;
transition: max-height 1s ease-out;
}
.ann1 {
transform: rotate(-180deg);
}
.e-dropdown-btn {
background-color: var(--projectrac-secondary-color) !important;
}
.tab-item {
cursor: pointer;
padding-bottom: 0px !important;
color: var(--projectrac-primary-color);
font-weight: 600;
opacity: .5;
border-radius: 0px;
fill: var(--projectrac-primary-color);
height: 35px;
}
.tab-item-border {
cursor: pointer;
padding-bottom: 0px !important;
color: var(--projectrac-primary-color);
font-weight: 600;
opacity: .5;
border-bottom-color: var(--projectrac-primary-color);
border-bottom-width: 1px;
border-radius: 0px;
fill: var(--projectrac-primary-color);
height: 35px;
}
.tab-item:hover {
cursor: pointer;
padding-bottom: 0px !important;
color: var(--projectrac-primary-color);
opacity: 1;
text-decoration: underline;
border-bottom-color: var(--projectrac-primary-color);
border-bottom-width: 1px;
border-radius: 0px;
}
.tab-text {
margin-left: 0.2rem;
margin-right: 1.3rem;
stroke: #000000;
}
.tab-selected {
color: var(--projectrac-secondary-color);
stroke: var(--projectrac-secondary-color);
font-weight: 600;
opacity: 1;
padding-bottom: 0px !important;
border-bottom-color: var(--projectrac-secondary-color);
border-bottom-width: 3px;
border-radius: 0px;
fill: var(--projectrac-secondary-color);
height: 35px;
}
.tab-selected:hover {
color: var(--projectrac-secondary-color);
text-decoration: underline;
padding-bottom: 0px !important;
border-bottom-color: var(--projectrac-secondary-color);
border-bottom-width: 3px;
border-radius: 0px;
}
.tabbed-tab-text {
position: relative;
display: inline-block;
}
.tabbed-tab-text::after {
content: attr(data-text);
font-weight: 1000;
visibility: hidden;
height: 0;
overflow: hidden;
display: block;
}
.tab-selected-border {
border-bottom-color: var(--projectrac-secondary-color);
border-bottom-width: 3px;
}
.tab-inactive-border {
border-bottom-color: var(--projectrac-primary-color);
border-bottom-width: 3px;
}
.tab-separator {
border-bottom: 1px solid gray;
}
.e-search-icon::before {
content: '\e754';
font-family: e-icons;
}
.e-headercell {
color: var(--projectrac-primary-text-color) !important;
background-color: var(--projectrac-primary-color) !important;
}
.e-dropdown-popup ul .e-item .e-menu-icon {
fill: var(--projectrac-secondary-color) !important;
color: var(--projectrac-secondary-color) !important;
}
.e-dropdown-popup > ul > li > a {
color: var(--projectrac-secondary-color) !important;
}
.e-dropdown-popup ul.e-dropdown-menu {
backdrop-filter: brightness(210%);
color: var(--projectrac-secondary-color) !important;
background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.3) !important;
}
.projectrac-primary-background {
background-color: var(--projectrac-primary-color);
color: var(--projectrac-primary-text-color);
}
.ac-body {
}
.ac-content {
display: block;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease-in, visibility .2s 0.2s; /* was 30.2s — popup took 30s to appear on hover */
}
.grouped-accordion-subitem:hover {
color: var(--projectrac-secondary-color);
}
.ac-body:hover > .ac-content {
display: block;
visibility: visible;
opacity: 1;
transition: opacity 0.2s ease-in;
}
.fill-secondary {
fill: var(--projectrac-secondary-color);
}
.secondary-button {
backdrop-filter: brightness(210%);
color: var(--projectrac-secondary-color) !important;
background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.3) !important;
}
.secondary-background {
color: var(--projectrac-secondary-text-color) !important;
background-color: var(--projectrac-secondary-color) !important;
}
.e-back-icon::before {
content: '\e773';
}
.form-popup {
position: absolute;
top: 2rem;
right: 15px;
border: 2px solid #afafaf;
z-index: 5009;
background-color: white;
}
/* Add styles to the form container */
.form-container {
width: 400px;
min-height: 230px;
padding: 10px;
backdrop-filter: brightness(210%);
color: var(--projectrac-secondary-color) !important;
background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.3) !important;
}
li.e-has-child > div.e-fullrow, li.e-level-1 > div.e-fullrow {
border: .3px solid gray;
border-radius: 4px;
background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.3) !important;
}
.e-treeview .e-list-item.e-active > .e-fullrow {
background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.9) !important;
border: none;
}
.e-treeview .e-list-text {
font-weight: bold;
}
li.e-hover > .e-fullrow {
background-color: hsl(from var(--projectrac-secondary-color) h s l / 0.9) !important;
}
.e-treeview .e-list-item.e-hover > .e-fullrow, .e-treeview .e-list-item.e-node-focus > .e-fullrow {
background-color: transparent;
}
.e-treeview .e-icon-collapsible, .e-treeview .e-icon-expandable {
color: var(--projectrac-primary-color);
}
.richp {
word-wrap: break-word;
white-space: break-spaces;
}
.status-on-hold, .status-tsk-on-hold {
background-color: #fdefd7;
color: #000000;
}
.priority-normal {
background-color: #fff3e3;
color: #d89828;
}
.priority-high {
background-color: #fadbd8;
color: #c0392b;
}
.priority-low {
background-color: #d4edda;
color: #1e7e34;
}
.status-on-hold-circle, .status-tsk-on-hold-circle, .priority-normal-circle {
fill: #faa91c
}
.status-tsk-paused {
fill: #faa91c;
background-color: #fef4e4;
}
.status-tsk-overdue {
background-color: #f9e5dc;
color: red;
fill: red;
}
.status-canceled, .status-unknown, .status-tsk-canceled {
background-color: #f1f1f1;
color: #a6a6a6;
}
.status-canceled-circle, .status-unknown-circle, .status-tsk-canceled-circle {
fill: #a6a6a6;
}
.status-open, .status-tsk-completed, .priority-low {
background-color: #e5efe4;
color: #339c4d;
}
.status-open-circle, .status-tsk-completed-circle {
fill: #339c4d;
}
.status-pending-approval, .status-in-process, .status-tsk-open {
background-color: #aae0f9; /* Example custom background color */
color: #006fc0; /* Example custom text color */
}
.status-pending-approval-circle, .status-in-process-circle, .status-tsk-open-circle {
fill: #006fc0;
}
.status-draft, .status-tsk-draft {
background-color: #bbb6d2; /* Example custom background color */
color: #6f2f9f; /* Example custom text color */
}
.status-draft-circle, .status-tsk-draft-circle {
fill: #6f2f9f;
}
.status-approved, .status-tsk-approved {
background-color: #ddebdc; /* Example custom background color */
color: #00af50; /* Example custom text color */
}
.status-approved-circle, .status-tsk-approved-circle {
fill: #00af50;
}
.status-rejected, .status-tsk-rejected {
background-color: #f6dbce; /* Example custom background color */
color: #ff0000; /* Example custom text color */
}
.status-rejected-circle, .status-tsk-rejected-circle {
fill: #ff0000;
}
.status-tsk-draft, .status-tsk-not-started {
background-color: silver;
color: black;
}
.status-tsk-draft-circle, .status-tsk-not-started-circle {
fill: black;
}
.rounded-status {
padding-left: 6px;
padding-right: 6px;
padding-top: 3px;
padding-bottom: 4px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 400 !important;
}
.status-button-overdue {
fill: #d2232a;
width: 20px;
height: 20px;
}
.status-button {
fill: #000000;
width: 20px;
height: 20px;
}
.fill-white {
fill: white;
}
.fill-black {
fill: black;
}
.fill-button-black span svg {
fill: #949494 !important;
}
.table-narrow-padding > tr > td {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 4px;
padding-right: 4px;
}
.project-page-header {
color: black !important;
}
.project-workplan-tree-header > div .k-grid-header th {
background: #d9d9d9;
color: black;
font-weight: bold;
text-transform: uppercase;
}
.project-workplan-grid-header .k-grid-header th {
background: black;
color: white;
text-transform: uppercase;
}
.project-information-pin {
padding-left: 9px;
}
.project-information-header {
font-size: 16px;
}
.project-information-tab-text > div.tab-item > .tab-text {
color: black !important;
fill: black !important;
}
.project-information-grid-header {
min-height: 160px !important;
}
.project-information-grid-header .k-grid-header th {
background: #f2f3f4 !important;
color: black !important;
}
.project-information-card-header {
background: black !important;
color: white !important;
}
.project-information-subheader {
font-size: 12px;
font-weight: bolder;
}
.project-information-content {
margin-right: 255px;
}
.project-information-panel {
position: absolute;
right: 0;
top: var(--project-nav-height);
width: 250px;
overflow-y: auto;
z-index: 1000;
overflow-x: hidden;
height: calc(100vh - var(--project-nav-height) - 40px);
margin-right: 13px;
border-left-style: solid;
border-left-width: 1px;
}
.project-information-description {
word-wrap: break-word;
text-wrap: auto;
max-height: 130px;
overflow-y: auto;
}
.project-information-user-grid {
/* position: relative;
bottom: 20px;
left: 0;
right: 0;
min-height: 120px;
height: 250px;
background: #f2f2f2;
border-top: 1px solid #ccc;*/
}
.bottom-panel {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
min-height: 220px;
height: calc(100vh - 40px); /* grows with viewport */
background: #f2f2f2;
border-top: 1px solid #ccc;
}
@media (max-width: 1310px) {
.vertical-separator {
display: none;
}
.project-information-content > .d-flex {
flex-wrap: wrap !important;
}
.project-information-content > div > .flex-fill {
width: 100%;
}
.project-information-content {
margin-right: 255px;
}
.project-information-grid {
margin-top: 12px;
}
}
.vertical-separator {
border-left: 1px solid black;
height: 100%;
}
.side-panel {
background-color: #312f30;
color: white;
}
.side-panel-title {
width: 75px;
}
.side-panel-task-name {
color: white;
font-size: 16px;
}
.side-panel-task-name > input {
padding-left: 0px;
}
.workstream-tree {
width: 190px;
height: 75px;
display: inline-block;
background-color: white;
color: black;
}
.side-panel-save {
color: black;
padding: 6px 10px;
background-color: white;
width: 75px;
}
.offcanvas.fullscreen {
width: calc(100vw - var(--project-drawer-width)) !important;
}
.max-width-400 {
max-width: 400px;
}
#workplanTree li.k-treeview-item {
color: black;
}
#workplanTree > k-focus {
background-color: var(--projectrac-secondary-color) !important;
}
#workplanTree li.k-treeview-item[aria-level="2"] > span > .k-treeview-leaf:hover {
padding: 3px;
backdrop-filter: brightness(33310%);
color: black !important;
/* background-color: var(--projectrac-secondary-color) !important;*/
background-color: white;
}
#workplanTree li.k-treeview-item[aria-level="1"] .k-treeview-leaf:hover {
background-color: transparent;
padding: 3px;
color: black;
}
#workplanTree li.k-treeview-item[aria-level="1"] .k-treeview-leaf {
padding: 3px;
}
.required-label::after {
content: "* ";
font-size: larger;
color: red;
}
.required-column::after {
content: " *";
font-size: larger;
color: white;
}
/*#U1 .k-table-th.k-sorted, th.k-table-th {
color: black;
background-color: #d8d8d8 !important;
}*/
/*******************************************************************************/
/*******************************************************************************/
/*******************************************************************************/
/* Landmark environment */
/* ---------------------------------------------------------------------------
Landmark shell width floor — React `.app-shell { min-width: 1664px }`
(AppShell.css L14). Above 1664 the banner and the content column expand with
the viewport; below it the shell keeps its size and the page scrolls
horizontally, so the two dashboard panels stop shrinking at React's
1440 - 48 - 12 = 1380px content width (654px per panel) instead of being
squeezed down with the window.
React pins the brand block and the sidebar with `position: sticky; left: 0`
so they stay put while that scroll happens; same here. React also carries a
`min-height: 800px` companion floor, deliberately NOT ported yet — it is a
vertical-scroll change and wants its own check.
--------------------------------------------------------------------------- */
.lmk-shell {
min-width: 1664px;
/* ── Landmark palette ──────────────────────────────────────────────────
The Landmark environment is NOT project-themed. React's AppShell is
rendered here with no brandBg / brandHover / sidebarBg props, so it falls
back to its own defaults; these are those defaults mapped onto the app's
theme vars, redeclared for this subtree so every `var(--projectrac-*)`
consumer inside the Landmark shell resolves to them.
Doing it in CSS rather than through the setPrimaryColor JS matters twice
over: the JS only runs in OnAfterRenderAsync, so the first paint after
navigating in from a project would otherwise still carry that project's
palette; and the accent React uses here (#5b9bd5) is not what Acumatica
returns for the Landmark pseudo-project (it reports #000 for all three
slots), so the JS could not produce it anyway.
primary = React .app-brand-block #000000
secondary = React --brand-hover (the accent) #5b9bd5
tertiary = React --shell-sidebar-bg #333333
Anything outside this subtree — Telerik popups portal to — keeps
the :root values the layout's JS publishes. */
--projectrac-primary-color: #000000;
--projectrac-primary-text-color: #ffffff;
--projectrac-secondary-color: #5b9bd5;
--projectrac-secondary-text-color: #ffffff;
--projectrac-tertiary-color: #333333;
--projectrac-tertiary-text-color: #ffffff;
/* Set outright, not left to :root's color-mix(primary 20%, white) — that
would resolve to #ccc against a black primary, where React is #333. */
--projectrac-sidebar-bg: #333333;
}
.lmk-shell .lmk-header-navigation,
.lmk-shell .lmk-sidebar {
position: sticky;
left: 0;
z-index: 5;
}
/* ---------------------------------------------------------------------------
Project-environment banner wash — React darkens the project photo with a flat
50% black layer. Every variant agrees: `.env-banner::after` (the generic
DB-driven banner), `.essentia-banner::after` and `.edgewater-banner::after`
are all `rgba(0, 0, 0, 0.5)`. Landmark Home is deliberately different at 0.75
(see .lmk-banner-image below).
The wash is a positioned pseudo-element, so it paints over the banner's static
flex children. React lifts its own two out of the way — `.env-banner-logo`
z-index 1, `.app-banner-user` z-index 20 — and so do we.
--------------------------------------------------------------------------- */
.env-banner {
position: relative;
}
.env-banner::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.env-banner-logo-wrap {
position: relative;
z-index: 1;
}
.env-banner-user {
position: relative;
z-index: 20;
}
/* ---------------------------------------------------------------------------
Landmark banner — React `.app-banner` + `HomeBanner.tsx`. The strip is a flat
#111 with a 1px #444 bottom rule (React `--topbar-border`'s default, since the
Landmark shell is unbranded); the photo and its wash live in their own layer
so the user block paints on top of them.
--------------------------------------------------------------------------- */
.lmk-banner {
position: relative;
background-color: #111 !important; /* beats .project-header's white */
background-image: none !important; /* and its project header photo */
border-bottom: 1px solid #444;
}
.lmk-banner-image {
position: absolute;
inset: 0;
background: url('/images/Landmark-Background.png') center / cover no-repeat;
}
.lmk-banner-image::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
}
/* React .app-banner-user sits at z-index 20 over the banner layer. */
.lmk-banner-user {
position: relative;
z-index: 20;
}
/* Landmark brand block — React .app-brand-block (AppShell.tsx): 224px wide, so
it lines up with the sidebar beneath it, on a FIXED black. It must not read
--projectrac-tertiary-color: those vars still hold the last-opened project's
palette when you arrive here, which used to recolor the block per project. */
.lmk-header-navigation {
width: var(--project-drawer-width);
min-width: var(--project-drawer-width);
height: var(--project-nav-height);
background-color: #000;
}
/* ---------------------------------------------------------------------------
Landmark sidebar — port of React AppShell.css `.app-sidebar*` +
HomeSidebar.css (`.home-section*`, `.home-link*`, `.quick-link*`).
Everything is scoped to `.lmk-sidebar` on purpose: `.side-navigation-panel`
is shared with the project environment, which keeps its project-derived
`--projectrac-sidebar-bg`. Landmark Home is a FIXED palette in React
(panel #333, footer one shade darker, white text, #5b9bd5 hover), so it must
not read the project vars — they still hold the last-opened project's colors
when you arrive here.
--------------------------------------------------------------------------- */
.lmk-sidebar {
background-color: #333; /* React .app-sidebar */
color: #fff;
overflow: hidden;
padding-top: 0; /* the 12px inset moves to .lmk-sidebar-content */
border-right: 1px solid #363636; /* React: color-mix(--topbar-border #444 20%, #333) */
}
/* React .app-sidebar-content: 12px all round, and it takes the leftover height
so the footer bar sits on the bottom edge. React clips (overflow:hidden);
we scroll instead so a long newsfeed stays reachable. */
.lmk-sidebar-content {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 12px;
white-space: nowrap;
/* React .app-sidebar-content pins the content box to the full drawer width,
so the nav column is 200px and the panel's 1px right border overlaps it
(clipped) instead of squeezing every child by 1px. */
min-width: var(--project-drawer-width);
}
.lmk-sidebar .home-sidebar-nav {
display: flex;
flex-direction: column;
}
.lmk-sidebar .home-section {
margin-bottom: 14.4px;
}
.lmk-sidebar .home-section-header {
display: flex;
align-items: center;
gap: 4.8px;
font-size: 11.2px;
font-weight: 500;
margin-bottom: 6.4px;
color: #fff;
cursor: default;
}
/* 7.2px padding around a 14.4px icon = a 28.8px box, which is what puts the
section labels (and the link lists below) at x = 12 + 28.8 + 4.8 = 45.6. */
.lmk-sidebar .home-section-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 7.2px;
background-color: #333;
border-radius: 3.2px;
flex-shrink: 0;
}
.lmk-sidebar .home-section-icon {
width: 14.4px;
height: 14.4px;
object-fit: contain;
filter: brightness(0) invert(1); /* React ships black PNGs and inverts them */
}
.lmk-sidebar .home-section-links {
display: flex;
flex-direction: column;
gap: 0;
padding-left: 33.6px;
}
.lmk-sidebar .home-link {
display: block;
color: #fff;
text-decoration: none;
font-size: 8.8px;
line-height: normal;
cursor: pointer;
padding: 6.4px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lmk-sidebar .home-link-icon {
width: 9.6px;
height: 9.6px;
object-fit: contain;
filter: brightness(0) invert(1);
margin-right: 4px;
vertical-align: middle;
}
.lmk-sidebar .home-link:hover {
color: #5b9bd5;
}
/* React's recolor of the white icon to #5b9bd5 on hover. */
.lmk-sidebar .home-link:hover .home-link-icon {
filter: brightness(0) saturate(100%) invert(59%) sepia(52%) saturate(405%) hue-rotate(176deg) brightness(92%) contrast(89%);
}
/* Site-map group label inside Company Resources. React has no group level (it
lists starred resources flat), so this is deliberately subordinate to
.home-link rather than a style ported from anywhere. */
.lmk-sidebar .home-link-group {
font-size: 8.8px;
font-weight: 600;
color: rgba(255, 255, 255, 0.55);
padding: 6.4px 0 2.4px;
}
.lmk-sidebar .quick-links-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4.8px;
padding-left: 33.6px;
}
.lmk-sidebar .quick-link-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
aspect-ratio: 1.3;
padding: 4.8px;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 3.2px;
text-align: center;
font-size: 8.8px;
line-height: normal;
color: #fff;
text-decoration: none;
cursor: pointer;
}
.lmk-sidebar .quick-link-item:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.lmk-sidebar .quick-link-icon {
width: 16px;
height: 16px;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* React .app-sidebar-footer: color-mix(#333 97%, black) = #313131. */
.lmk-sidebar-footer {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
/* Same containment as .env-sidebar-footer. Redundant today — .lmk-sidebar
already clips — but it keeps the twin footers self-contained. */
overflow: hidden;
min-height: 52.8px;
min-width: var(--project-drawer-width);
padding: 12px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.2);
background-color: #313131;
}
.lmk-sidebar-logo {
position: absolute; /* React: both marks share the footer's centre */
height: 28px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.lmk-sidebar-icon {
height: 19.2px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.lmk-sidebar-logo.hidden,
.lmk-sidebar-icon.hidden {
opacity: 0;
pointer-events: none;
}
/* Collapsed rail — React .app-sidebar.collapsed. The content box keeps its
224px min-width and is simply clipped by the panel's overflow:hidden (that
is how React does it), so only the labels and the two link lists are
hidden; the 28.8px icon wraps stay put at x = 12. */
.lmk-sidebar.collapsed .home-section-links,
.lmk-sidebar.collapsed .quick-links-grid {
visibility: hidden;
max-height: 0;
margin: 0;
overflow: hidden;
}
.lmk-sidebar.collapsed .home-section-header span {
visibility: hidden;
}
.lmk-sidebar.collapsed .lmk-sidebar-footer {
width: var(--project-drawer-width-collapsed);
min-width: var(--project-drawer-width-collapsed);
}
/* ---------------------------------------------------------------------------
Landmark Dashboard (/project) — port of React pages/home/HomePage.css, with
the effective overrides from pages/home/ActionsApprovalsPage.css folded in
(that sheet wins on .content-title and on .home-page .portal-header, so the
numbers below are React's COMPUTED values, not HomePage.css's declarations).
Scoped to .home-page throughout: .portal-tabs / .portal-header etc. are
generic names and the Tabbed component is shared with the manager screens.
--------------------------------------------------------------------------- */
.home-page {
max-width: 100%;
display: flex;
flex-direction: column;
height: calc(100vh - var(--project-nav-height));
/* React .app-content */
background-color: #faf8f5;
padding: 24px 12px 12px 48px;
overflow-y: auto;
white-space: normal;
}
/* Full-bleed title band. React pulls it out of .app-content's padding with
negative margins; the #d9d9d9 fill is ActionsApprovalsPage.css's
`html .content-title` override of HomePage.css's #eae8e5. */
.home-page .content-title {
display: flex;
align-items: center;
font-size: 14.4px;
font-weight: 700;
color: #222;
background-color: #d9d9d9;
margin: -24px -12px 20px -48px;
padding: 12px 48px;
border-bottom: 1px solid #d9d9d9;
}
.home-page .content-title-icon {
width: 24px;
height: 24px;
object-fit: contain;
margin-right: 6.4px;
filter: brightness(0);
}
.home-page .portal-card {
margin-bottom: 24px;
}
/* Label row above each card, sitting on the 1.6px rule. */
.home-page .portal-header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 1.6px solid #333;
}
/* .home-page override: transparent, NOT HomePage.css's #333-on-white pill. */
.home-page .portal-header {
display: inline-flex;
align-items: center;
height: 27.2px;
box-sizing: border-box;
margin-top: -4.8px;
padding: 4.8px 12px;
font-size: 12.8px;
font-weight: 700;
color: #222;
background: transparent;
border-radius: 3.2px 3.2px 0 0;
}
.home-page .section-header-link-icon {
width: 16px;
height: 16px;
object-fit: contain;
cursor: pointer;
margin-bottom: 4px;
margin-right: 12px;
filter: brightness(0) opacity(0.8);
}
.home-page .section-header-link-icon:hover {
filter: brightness(0) saturate(100%) invert(59%) sepia(52%) saturate(405%) hue-rotate(176deg) brightness(92%) contrast(89%);
}
.home-page .home-card {
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 0 0 3.2px 3.2px;
overflow: hidden;
}
.home-page .portal-body {
padding: 4px 12px 12px;
}
.home-page .home-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
flex: 1;
min-height: 0;
}
.home-page .section-card {
display: flex;
flex-direction: column;
min-height: 0;
/* Grid items default to min-width:auto, which lets the wider table push its
column past 1fr — without this the two panels come out 528 / 572. */
min-width: 0;
}
.home-page .section-body {
padding: 4px 12px 12px;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
/* --- Tabs -----------------------------------------------------------------
React's .portal-tabs is a row of plain buttons. Here it is the shared
`Tabbed` component wearing Class="portal-tabs", so the rules below undo
Tabbed's own Bootstrap chrome (.btn padding, .me-3 gap, the separate
border div) and re-dress it as React's tab strip. */
.home-page .portal-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid #d9d9d9;
}
.home-page .portal-tabs > .btn {
margin-right: 0 !important; /* Tabbed hard-codes .me-3 */
padding: 0 !important;
border: none;
border-radius: 0;
line-height: normal;
/* The ACTIVE button also wears .tab-selected, whose base rule hard-codes
height: 35px; the strip is display:flex so that stretches the inactive
tabs with it. React's tab is 26.8. */
height: auto !important;
}
/* React .portal-tab. 8px top padding is the
`.home-page .portal-body > .portal-tabs .portal-tab` override.
padding needs !important: the base `.tab-selected` rule carries
`padding-bottom: 0 !important`, and the label span wears that class. */
.home-page .portal-tabs .tab-text.tabbed-tab-text {
display: block;
padding: 8px 16px 4.8px !important;
margin-left: 0 !important; /* base .tab-text: 0.2rem / 1.3rem, which */
margin-right: 0 !important; /* widened every tab by 24px */
font-size: 10.4px !important;
line-height: normal;
}
/* Tabbed reserves the bold width with a hidden ::after at weight 1000 so
the tab doesn't jump when it activates. React's active tab is 600, so
reserve 600 — at 1000 the tab sits ~18px wider than React's. */
.home-page .portal-tabs .tab-text.tabbed-tab-text::after {
font-weight: 600;
}
.home-page .portal-tabs .tab-text.tabbed-tab-text:not(.tab-selected) {
font-weight: 500 !important;
color: #999 !important;
stroke: #999 !important;
}
/* React's active tab is #333 here, NOT the project secondary color the
manager screens use — Landmark Home has no project theme. */
.home-page .portal-tabs .tab-text.tabbed-tab-text.tab-selected {
font-weight: 600 !important;
color: #333 !important;
stroke: #333 !important;
/* base .tab-selected hard-codes height: 35px, which makes the active
tab 9px taller than its neighbours */
height: auto !important;
}
/* Tabbed draws the underline as its own div below the label; React uses a
1.6px bottom border on the button, overlapping the strip's 1px rule. */
.home-page .portal-tabs .tab-selected-border,
.home-page .portal-tabs .tab-inactive-border {
height: 0;
min-height: 0;
margin-bottom: -1px;
padding: 0 !important;
}
.home-page .portal-tabs .tab-selected-border {
border-bottom: 1.6px solid #333 !important;
}
.home-page .portal-tabs .tab-inactive-border {
border-bottom: none !important;
}
/* Locked to the natural tile height so the panel does not resize between
Active and All (React: 166.4px tile + 12px top padding). */
.home-page .portal-tab-content {
padding: 12px 0 0;
min-height: 178.4px;
}
/* --- Project tiles --------------------------------------------------------- */
.home-page .portal-cards {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.home-page .project-tile {
position: relative;
width: 180px;
border: 1px solid #ececec;
border-radius: 4.8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s;
}
.home-page .project-tile:hover {
transform: translateY(-1.6px);
box-shadow: 0 0 0 1.6px rgba(0, 0, 0, 0.3);
}
.home-page .project-tile-hover-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 4.8px;
opacity: 0;
transition: opacity 0.2s;
z-index: 2;
}
.home-page .project-tile:hover .project-tile-hover-overlay {
opacity: 1;
}
.home-page .project-tile-goto {
width: 51.2px;
height: 51.2px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.home-page .project-tile-image {
position: relative;
height: 88px;
background-size: cover;
background-position: center;
border-radius: 4.8px 4.8px 0 0;
}
.home-page .project-tile-tint {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.25);
border-radius: 4.8px 4.8px 0 0;
}
/* #eae8e5 is the ActionsApprovalsPage.css `.home-page .project-tile-info`
override (the table-footer tone), not HomePage.css's own value. */
.home-page .project-tile-info {
padding: 6.4px 8px;
background-color: rgb(234, 233, 231);
border-radius: 0 0 4.8px 4.8px;
}
.home-page .project-tile-name {
font-size: 9.6px;
font-weight: 600;
color: #222;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-page .project-tile-icon {
width: 9.6px;
height: 9.6px;
object-fit: contain;
margin-right: 4px;
vertical-align: -1px;
filter: brightness(0);
}
.home-page .project-tile-detail {
font-size: 8px;
font-weight: 500;
color: #999;
padding-left: 13.6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-page .project-tile-badge {
display: inline-flex;
align-items: center;
margin-top: 4.8px;
margin-left: 13.6px;
padding: 2.4px 8px 2.4px 5.6px;
font-size: 7.2px;
font-weight: 600;
color: #fff;
background-color: #5b9bd5;
border-radius: 2.4px;
}
.home-page .badge-dot {
display: inline-block;
width: 4.8px;
height: 4.8px;
margin-right: 4px;
border-radius: 50%;
background-color: #fff;
}
.home-page .badge-development {
background-color: #2c5282;
}
.home-page .badge-construction {
background-color: #c0392b;
}
.home-page .badge-predevelopment {
background-color: #7f8c8d;
}
.home-page .portal-cards-empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 166.4px;
height: 100%;
}
.home-page .placeholder-text {
font-size: 10.4px;
color: #999;
}
/* Tabbed renders each tab body as a sibling .tabbed-pane after the strip, so
the ACTIVE pane is the flex item that has to absorb the card's spare height
(React sizes its tables the same way, from the card, not from JS). This is
what replaced ProjectPage's old JS resize callback and its `40 + 296 + 194`
magic numbers. */
.home-page .section-body > .tabbed-pane {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.home-page .section-body > .tabbed-pane > .k-grid,
.home-page .section-body > .tabbed-pane > .k-treelist {
height: 100%;
}
/* --- Landmark detail pages (/landmark/actions, /landmark/workplan) ---------
React `HomeActionsApprovalsPage.tsx` (.reports-page.home-page) and
`WorkplansPage.tsx` (.wp-page.home-page). Both reuse the .home-page shell
above and add: a title bar that carries a back link on the right of a hairline
divider, and ONE full-height card instead of the dashboard's three.
------------------------------------------------------------------------- */
.home-page .content-title-left {
display: flex;
align-items: center;
}
.home-page .content-title-divider {
flex-shrink: 0;
width: 1px;
height: 14.4px;
margin-left: 16px;
margin-right: 9.6px;
background-color: #bbb;
}
.home-page .content-title-back {
display: flex;
align-items: center;
gap: 4px;
font-size: 8.8px;
font-weight: 500;
color: #999;
text-decoration: none;
cursor: pointer;
}
.home-page .content-title-back-icon {
width: 11.2px;
height: 11.2px;
object-fit: contain;
opacity: 0.5;
}
/* The single card fills the page; React .reports-page-card / .wp-page-card. */
.home-page .detail-page-card {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.home-page .detail-page-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
padding: 4px 12px 12px;
border-radius: 0 0 3.2px 3.2px;
}
/* Same trick as the dashboard panels: the active .tabbed-pane is the flex
item that absorbs the card's spare height, so the grid can be 100%. */
.home-page .detail-page-body > .tabbed-pane {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.home-page .detail-page-body > .tabbed-pane > .k-grid,
.home-page .detail-page-body > .tabbed-pane > .k-treelist {
height: 100%;
}
/* Tabs on the left, toolbar on the right. React .aa-tabs-row — the 1px rule
lives here rather than on .portal-tabs so it spans the toolbar too. */
.home-page .aa-tabs-row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #d9d9d9;
}
.home-page .aa-tabs-row .portal-tabs {
border-bottom: none;
}
.home-page .aa-tabs-actions {
display: flex;
align-items: center;
gap: 4.8px;
}
.home-page .aa-filter-toggle {
display: flex;
align-items: center;
height: 22.4px;
padding: 0 8px;
border: none;
border-radius: 3.2px;
background: #eae8e5;
font-family: inherit;
font-size: 9.6px;
font-weight: 500;
color: #999;
cursor: pointer;
transition: all 0.2s;
}
.home-page .aa-filter-toggle-icon {
width: 9.6px;
height: 9.6px;
object-fit: contain;
margin-right: 4px;
vertical-align: -1px;
opacity: 0.4;
}
/* --- Telerik grids inside the two panels ----------------------------------
React renders both with .wp2-table: a #eae8e5 header band at 9.6px/600 #222
over #e0e0e0 hairlines. Retargeted at Telerik's DOM; the app-wide
`table th` rules force 11px/700 + white borders, hence the !important. */
.home-page .k-grid,
.home-page .k-treelist {
border: none;
font-size: 9.6px;
}
.home-page .k-grid .k-grid-header,
.home-page .k-treelist .k-grid-header {
border-bottom: none;
}
.home-page .k-table-th {
background-color: #eae8e5 !important;
color: #222 !important;
padding: 4.8px 9.6px !important;
vertical-align: middle;
border-left: none !important;
border-right: 1.6px solid #e0e0e0 !important;
border-top: 1.6px solid #e0e0e0 !important;
border-bottom: 1.6px solid #e0e0e0 !important;
}
/* The title sits in a nested .k-cell-inner > .k-link > .k-column-title that
keeps the app's 11px scale AND adds its own padding — force React's
9.6px/600 and strip the inner padding, or the header row renders 35px
instead of React's 28. */
.home-page .k-table-th,
.home-page .k-table-th .k-cell-inner,
.home-page .k-table-th .k-link,
.home-page .k-table-th .k-column-title {
font-size: 9.6px !important;
font-weight: 600 !important;
}
.home-page .k-table-th .k-cell-inner,
.home-page .k-table-th .k-link {
padding: 0 !important;
margin: 0 !important;
}
.home-page .k-table-th:last-child {
border-right: none !important;
}
/* NOTE: the header band measures 35.6px against React's 28.2px, and the data
rows 35.6 against React's ~32. Both come from the grids' Telerik
RowHeight="35" param, not from CSS — pinning a height here instead makes it
WORSE (Telerik adds its borders on top, giving 39.8). Changing RowHeight
moves the header and the rows together, so it needs a decision on which of
the two to match; left as-is. */
.home-page .k-table-td {
font-size: 8.8px !important;
color: #333;
padding: 3.2px 9.6px !important;
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid #e0e0e0;
}
/* --- Grid header icons + row link badges ----------------------------------
React only puts an icon on the leading utility columns (`.aa-header-icon-wrap`
holding a 12.8px black PNG); every other header is plain text. All 62 of the
old `