, so the same
geometry comes from fixed column widths. */
/* ⚠ SCOPED TO `.ff-afp`. This block is the Consultant/Contractor AFP's FOUR-column
info table (label | value | label | value — its first row carries two empty
spacer | s to establish the column model). It was originally written
unscoped, as `.flyout-form-doc .ff-info-table`, which applied it to the CRF,
BTF and PCF as well — and those are TWO-column tables, so
`td:nth-child(2) { width: calc((100% - 168px) / 2) }` reserved room for a
second label column that does not exist and halved their value column, while
`table-layout: fixed` then locked long labels ("Contract Assignment:") into an
80px cell they overflow. Keep any new rule here scoped the same way. */
.flyout-form-doc.ff-afp .ff-info-table {
table-layout: fixed;
width: 100%;
}
/* React's info grid is `80px minmax(0,1fr) 88px minmax(0,1fr)`. Reproducing that
in a table means putting the widths on the FIRST ROW'S CELLS, which is what
table-layout:fixed reads. A looks like the natural home but does not
work here: Chrome gave the whole remainder to the first auto and 0 to the
second (collapsing Application # / Invoice #), and calc() on a does not
resolve at all. On cells it does. */
.flyout-form-doc.ff-afp .ff-info-table > tr:first-child > td:nth-child(1) {
width: 80px;
}
.flyout-form-doc.ff-afp .ff-info-table > tr:first-child > td:nth-child(3) {
width: 88px;
}
.flyout-form-doc.ff-afp .ff-info-table > tr:first-child > td:nth-child(2),
.flyout-form-doc.ff-afp .ff-info-table > tr:first-child > td:nth-child(4) {
width: calc((100% - 168px) / 2);
}
/* Billing period: both dates on one row with a "to" between them. */
.flyout-form-doc .afp-period-fields {
display: flex;
align-items: center;
gap: 6.4px;
}
.flyout-form-doc .afp-date-sep {
color: #555;
font-size: 10.5px;
}
/* ---- Statement of Contract (right panel) -------------------------------- */
.flyout-form-doc .afp-statement-body {
display: flex;
flex-direction: column;
/* 24px rows + 6px gap so each row sits at the same vertical position as the
info-panel row beside it; the 12.6px bottom keeps the space under the last
divider equal to the header-to-first-row space. */
gap: 6px;
padding-bottom: 12.6px;
}
.flyout-form-doc .afp-statement-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9.6px;
min-height: 24px;
font-size: 10.5px;
position: relative;
}
/* Hairline centred in the 6px gap below the row, not a border hugging the text. */
.flyout-form-doc .afp-statement-row::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -3px;
border-top: 1px solid #ececec;
}
.flyout-form-doc .afp-statement-row:last-child::after {
display: none;
}
/* A marked group break is darker and shows even on the last row. */
.flyout-form-doc .afp-statement-row.afp-statement-row-divider::after {
display: block;
border-top: 1px solid #222;
}
.flyout-form-doc .afp-statement-label {
flex: 1 1 auto;
color: #555;
font-weight: 500;
}
/* Fixed width so AcctSlots (width:100%) pins the `$` left and right-aligns the
digits, matching the SOV money cells rather than a compact "$1,234.00". */
.flyout-form-doc .afp-statement-amount {
flex: 0 0 160px;
font-variant-numeric: tabular-nums;
}
/* Total rows: the dark divider sits ABOVE each (from the preceding row). */
.flyout-form-doc .afp-statement-row-strong .afp-statement-label {
font-weight: 600;
color: #222;
}
.flyout-form-doc .afp-statement-row-strong .afp-statement-amount .ft-acct,
.flyout-form-doc .afp-statement-row-strong .afp-statement-amount .ft-acct-sym,
.flyout-form-doc .afp-statement-row-strong .afp-statement-amount .ft-acct-num {
font-weight: 600;
color: #222;
}
.flyout-form-doc .afp-statement-row-strong::after {
display: none;
}
.flyout-form-doc .afp-statement-spacer {
height: 9.6px;
}
/* Right-hand labels of the paired rows (Application #, Invoice #) are
right-aligned in React so the colon sits flush against the col-4 input. */
.flyout-form-doc .ff-info-table tr > td:nth-child(3) {
text-align: right;
padding-left: 0;
}
/* "Add" (subcontract) — React .afp-add-subcontract-btn: grey and not-allowed
while disabled, accent-filled when live. The accent is the project's
SECONDARY color (React's --brand-hover). */
.flyout-form-doc .afp-add-subcontract-btn.k-button {
height: 24px;
padding: 0 9.6px;
border: 1px solid #ccc;
border-radius: 2.4px;
background: #ccc;
background-image: none;
color: #999;
font-size: 9.6px;
font-weight: 500;
white-space: nowrap;
cursor: not-allowed;
box-shadow: none;
}
/* Telerik owns .k-disabled / .k-button-solid-base painting, so the grey and the
accent fill both have to be forced. */
.flyout-form-doc .afp-add-subcontract-btn.k-button.k-disabled,
.flyout-form-doc .afp-add-subcontract-btn.k-button:disabled {
background: #ccc !important;
background-image: none !important;
border-color: #ccc !important;
color: #999 !important;
opacity: 1;
}
.flyout-form-doc .afp-add-subcontract-btn.k-button:not(:disabled):not(.k-disabled) {
background: var(--projectrac-secondary-color, #5b9bd5) !important;
background-image: none !important;
border-color: var(--projectrac-secondary-color, #5b9bd5) !important;
color: #ffffff !important;
cursor: pointer;
}
.flyout-form-doc .afp-add-subcontract-btn.k-button:not(:disabled):not(.k-disabled):hover {
filter: brightness(0.92);
}
/* ---- AFP info panel: one right edge ------------------------------------
In React every control in this panel fills its grid column, so they all end
at the same x; Contract # is the one that stretches, sharing its column with
the Add button. The Blazor controls carried fixed pixel widths, which left a
ragged right edge. */
.flyout-form-doc .ff-info-table .ff-readonly,
.flyout-form-doc .ff-info-table .k-textbox,
.flyout-form-doc .ff-info-table .k-input,
.flyout-form-doc .ff-info-table .k-picker,
.flyout-form-doc .ff-info-table .k-textarea,
.flyout-form-doc .ff-info-table .gate-awaiting {
width: 100%;
box-sizing: border-box;
}
/* Contract # shares its cell with Add: the select takes the slack. */
.flyout-form-doc .ff-info-table .afp-contract-row {
display: flex;
gap: 6.4px;
align-items: center;
}
.flyout-form-doc .ff-info-table .afp-contract-row .k-picker,
.flyout-form-doc .ff-info-table .afp-contract-row .k-combobox {
flex: 1 1 auto;
min-width: 0;
}
.flyout-form-doc .ff-info-table .afp-contract-row .afp-add-subcontract-btn.k-button {
flex: 0 0 auto;
width: auto;
}
/* The two dates split the value column around a centred "to", as React does. */
.flyout-form-doc .afp-period-fields > .k-datepicker {
flex: 1 1 0;
min-width: 0;
}
/* Description is the one full-height control. */
.flyout-form-doc .ff-info-table .k-textarea {
height: auto;
}
|