html, body {
height: 100%;
}
app {
display: block;
height: 100%;
}
.header-logo {
flex-shrink: 0;
background-image: url('../images/axcces-logo.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 140px;
height: 22px;
}
#blazor-error-ui {
background: inherit;
bottom: 0;
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 100001;
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 9999px;
font-size: .75rem;
line-height: 1.2;
margin: 2px 4px 2px 0;
color: #fff;
white-space: nowrap;
}
.badge-mobility {
background-color: #0ea5e9;
}
/* cyan */
.badge-visionhearing {
background-color: #8b5cf6;
}
/* purple */
.badge-cb {
background-color: #22c55e;
}
/* green */
.badge-general {
background-color: #64748b;
}
/* slate */
.badge-other {
background-color: #ef4444;
}
/* red */
/* Pastel chips that read well on XAF grids */
.badge.chip {
padding: .20rem .55rem;
border-radius: 999px;
font-weight: 600;
border: 1px solid transparent;
}
/* Soft green */
.chip-green {
background: #EAF7EE;
color: #1F7A3D;
border-color: #BFE6CA;
}
/* Soft amber (warning) */
.chip-amber {
background: #FFF4E5;
color: #915F00;
border-color: #FFD59F;
}
/* Soft red */
.chip-red {
background: #FDECEC;
color: #A12622;
border-color: #F5B5B2;
}
/* Soft blue (info) */
.chip-blue {
background: #E9F2FF;
color: #1D5BBF;
border-color: #B7D0FF;
}
/* Soft gray (neutral) */
.chip-gray {
background: #F2F3F5;
color: #3F4B57;
border-color: #E1E4E8;
}
.chip-purple {
background: #F3E9FF;
color: #6B2FB9;
border-color: #D9C2FF;
}
.chip-pink {
background: #FFEAF3;
color: #B12C6A;
border-color: #FFBDD6;
}
.chip-teal {
background: #E6FAF8;
color: #1E8A83;
border-color: #B9EFEA;
}
.chip-indigo-list {
background: #ECEEFF;
color: #3949AB;
border-color: #C4CBFF;
}
.chip-yellow {
background: #FFFBE5;
color: #8A7B00;
border-color: #FFF2A8;
}
.chip-orange {
background: #FFEDE5;
color: #B64A00;
border-color: #FFCCB3;
}
.chip-cyan-list {
background: #E7FBFF;
color: #057F9A;
border-color: #B9EFF8;
}
.chip-lime {
background: #F2FFE5;
color: #628A10;
border-color: #D9F7A8;
}
/* "Expecting" tag. Copied value-for-value from the tenant portal's own badge
(axcces-hub, .phc-expecting in HouseholdProfile.css: #ec4899 on #ffe9f0, 999px,
0.7rem/600 with a leading pram glyph) so a manager and a resident see the same thing.
The glyph is inline SVG - this app ships no icon font. */
.chip-expecting {
background: #FFE9F0;
color: #EC4899;
border-color: #FFC9DC;
font-size: 0.7rem;
font-weight: 600;
}
.badge.chip.chip-expecting {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
}
.badge.chip.chip-expecting .chip-icon {
width: 12px;
height: 12px;
flex: 0 0 auto;
}
/* "Needs Review" tag on the Lease-Up applications grid's Next Step column: an additional-document
request the applicant has answered and nobody has acted on yet. Amber because it is a call to
action, not a status. Structure mirrors .chip-expecting above -- inline-flex plus a gap so the
leading SVG bell sits on the text baseline. */
.chip-review {
background: #FEF3C7;
color: #B45309;
border-color: #FDE68A;
font-size: 0.7rem;
font-weight: 600;
}
.badge.chip.chip-review {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
}
.badge.chip.chip-review .chip-icon {
width: 12px;
height: 12px;
flex: 0 0 auto;
}
/* "Offer Expired" tag on the same Next Step column: a unit offer the applicant never answered within
the Offer Review step's Accept Offer business days. Red rather than amber -- the window has already
closed. Same structure as .chip-review, with a leading SVG clock. */
.chip-expired {
background: #FEE2E2;
color: #B91C1C;
border-color: #FECACA;
font-size: 0.7rem;
font-weight: 600;
}
.badge.chip.chip-expired {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
}
.badge.chip.chip-expired .chip-icon {
width: 12px;
height: 12px;
flex: 0 0 auto;
}
/* Lease-Up Action Center chips on the Applications grid's Attention column. "Needs Attention": the
manager has something to act on -- the brand orange, the strongest call to action on the row.
"Updated": the applicant changed something since a manager last opened the application -- blue,
informational. "Overdue" reuses .chip-expired. Same structure as .chip-review. */
.chip-attention {
background: #FFEDD5;
color: #C2410C;
border-color: #FED7AA;
font-size: 0.7rem;
font-weight: 600;
}
.chip-updated {
background: #DBEAFE;
color: #1D4ED8;
border-color: #BFDBFE;
font-size: 0.7rem;
font-weight: 600;
}
.badge.chip.chip-attention,
.badge.chip.chip-updated {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
}
.badge.chip.chip-attention .chip-icon,
.badge.chip.chip-updated .chip-icon {
width: 12px;
height: 12px;
flex: 0 0 auto;
}
.chip-magenta {
background: #FFE5FE;
color: #A0228A;
border-color: #F7B3EF;
}
/* XAF/DevExpress dialog, not popup */
.dxbs-dialog .modal-dialog {
width: 96vw !important;
max-width: 96vw !important;
margin: 1vh auto !important; /* optional – reduce side margins */
}
.dxbs-dialog .modal-content {
height: 92vh !important;
width: 100% !important;
}
.dxbs-dialog .modal-body {
padding: 0 !important; /* lets the viewer touch the edges */
height: calc(92vh - 56px) !important; /* adjust if your header/footer differ */
}
/* keep the popup override too, if you use popups elsewhere */
.dxbs-popup .modal-dialog {
width: 96vw !important;
max-width: 96vw !important;
}
.dxbs-popup .modal-content {
height: 92vh !important;
}
.dxbs-popup .modal-body {
padding: 0 !important;
}
/* Limit Documents grid height so it scrolls internally */
.all-docs-grid-height {
max-height: 420px; /* tweak until it fits nicely under the tab header */
}
/* ────────────────────────────────────────────────────────────────────────────
Grid-row list-view tab-strip filter (LeaseUp + ReRental)
----------------------------------------------------------------------------
Each list view's XAF controller exposes one SimpleAction per tab whose Execute
event applies the matching filter. site.js (createTabController) HIDES those
actions from the toolbar and renders a real tab strip above the grid; clicks
on the strip invoke the hidden actions via .click().
Each strip element carries a unique identity class (.leaseup-tabs-strip /
.rerental-tabs-strip) used only for find/remove, plus the generic .axtab-strip
class that all the styling below targets — so one rule set covers every grid.
──────────────────────────────────────────────────────────────────────────── */
/* The injected tab strip sits above the toolbar. */
.axtab-strip {
display: flex;
align-items: stretch;
gap: 2px;
padding: 0 4px;
margin: 4px 0 0 0;
border-bottom: 1px solid #e3e9f4;
background: transparent;
}
.axtab {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: #556887;
font-size: 14px;
font-weight: 600;
padding: 10px 18px;
cursor: pointer;
line-height: 1.2;
margin-bottom: -1px; /* overlap container border so the active underline aligns */
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.axtab:hover {
color: #27324a;
background: #fff4ec;
}
.axtab.is-active {
color: #f76707;
border-bottom-color: #f76707;
}
.axtab:focus-visible {
outline: 2px solid var(--app-warning-border);
outline-offset: -2px;
border-radius: 4px;
}
/* Lease-Up Applications: how many rows in each tab need attention (Action Center). A badge rather than
a tab of its own, so the log-order tabs stay the working structure. */
.axtab-badge {
display: inline-block;
min-width: 18px;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
background: var(--app-primary);
color: #ffffff;
font-size: 11px;
font-weight: 700;
line-height: 16px;
text-align: center;
vertical-align: 1px;
}
/* Lease-Up Acme V2 detail view: XAF's tabbed group (tagged acme-xaf-tabs in Model.xafml) is driven by the
card's own tab strip (LeaseUpCardSummaryAcmeV2, site.js axccesUi.acmeTabs). Its header row stays in the
page but is visually hidden, so the strip can click it; the group is hidden while the strip shows one
of the card's own sections. Theme tokens only. */
.acme-xaf-tabs.acme-xaf-tabs--driven {
border: 1px solid var(--app-border);
border-radius: 12px;
background: var(--app-surface);
padding: 12px 14px 14px;
}
/* No frame of DevExpress's own around the tab content inside that card. */
.acme-xaf-tabs.acme-xaf-tabs--driven .dxbl-tabs-content-panel {
border: none !important;
padding: 0 !important;
background: transparent !important;
}
.acme-xaf-tabs.acme-xaf-tabs--hidden {
display: none !important;
}
/* Until the card takes charge of the group it stays out of the page. Shown for that moment, it could take
XAF's auto-focus or scroll its own header into view, and once hidden behind the card's first section it
left the page scrolled to the bottom. */
.acme-xaf-tabs:not(.acme-xaf-tabs--driven) {
display: none !important;
}
.acme-xaf-tablist {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
/* Theme tokens, so the badges follow the user's DevExpress theme like the Lease-Up Briefing robot. */
.axtab:not(.is-active) .axtab-badge {
background: var(--app-primary-soft-strong);
color: color-mix(in srgb, var(--app-primary) 75%, var(--app-fg));
}
.pac-container {
z-index: 2147483647 !important;
}
.rerental-left-topgap {
margin-top: 16px !important;
}
/* Make the grid header sticky inside that scroll area (extra safety) */
.all-docs-grid-height .dxbl-grid-table-header thead tr {
position: sticky;
top: 0;
z-index: 5;
}
.rent-popup {
padding: 14px 16px;
}
.rent-popup__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.rent-popup__title {
font-size: 20px;
font-weight: 700;
}
.rent-popup__subtitle {
font-size: 12px;
opacity: .7;
margin-top: 2px;
}
.rent-popup__pill {
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(0,0,0,.03);
font-size: 12px;
}
.rent-popup__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.rent-card {
border: 1px solid rgba(0,0,0,.10);
border-radius: 14px;
padding: 12px;
background: white;
}
.rent-card__label {
font-size: 12px;
opacity: .7;
margin-bottom: 6px;
}
.rent-card__value {
font-size: 18px;
font-weight: 700;
}
.rent-popup__rentbox {
display: flex;
gap: 12px;
align-items: stretch;
border: 1px solid rgba(0,0,0,.10);
border-radius: 16px;
padding: 12px;
background: rgba(0,0,0,.02);
}
.rent-popup__rentbox-left {
flex: 1;
}
.rent-popup__hint {
font-size: 12px;
opacity: .7;
margin-bottom: 8px;
}
.rent-popup__spin {
width: 100%;
}
.rent-popup__rentbox-right {
width: 180px;
border-left: 1px dashed rgba(0,0,0,.15);
padding-left: 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
.rent-popup__big {
font-size: 28px;
font-weight: 800;
}
.rent-popup__small {
font-size: 12px;
opacity: .7;
}
.rent-popup__footer-note {
font-size: 12px;
opacity: .65;
}
/* ===== Card ===== */
.ref-card {
border: 1px solid rgba(0,0,0,.08);
border-radius: 16px;
padding: 16px;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
width: 100%;
box-sizing: border-box;
}
/* ===== Header ===== */
.ref-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 14px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.00));
border: 1px solid rgba(0,0,0,.06);
margin-bottom: 14px;
}
.ref-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.ref-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(0,0,0,.06);
border: 1px solid rgba(0,0,0,.08);
font-size: 18px;
}
.ref-title {
font-size: 16px;
font-weight: 800;
letter-spacing: .2px;
color: rgba(0,0,0,.90);
}
.ref-subtitle {
font-size: 12px;
color: rgba(0,0,0,.55);
margin-top: 2px;
}
/* ===== Chip ===== */
.ref-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(0,0,0,.04);
border: 1px solid rgba(0,0,0,.08);
}
.ref-chip-label {
font-size: 12px;
color: rgba(0,0,0,.60);
}
.ref-chip-value {
font-size: 13px;
font-weight: 800;
color: rgba(0,0,0,.90);
}
/* ===== Applicant tiles ===== */
.ref-grid2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 6px;
}
@media (max-width: 900px) {
.ref-grid2 {
grid-template-columns: 1fr;
}
.ref-tile-span {
grid-column: auto;
}
}
.ref-tile {
border: 1px solid rgba(0,0,0,.06);
background: rgba(0,0,0,.015);
border-radius: 14px;
padding: 12px 12px;
}
.ref-tile-span {
grid-column: span 2;
}
.ref-k {
font-size: 11px;
font-weight: 700;
letter-spacing: .35px;
text-transform: uppercase;
color: rgba(0,0,0,.55);
margin-bottom: 6px;
}
.ref-v {
font-size: 14px;
font-weight: 700;
color: rgba(0,0,0,.90);
line-height: 1.25;
}
/* ===== Links ===== */
.ref-link {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-weight: 800;
}
.ref-link:hover {
text-decoration: underline;
}
.ref-link-ic {
width: 22px;
height: 22px;
border-radius: 8px;
display: grid;
place-items: center;
background: rgba(0,0,0,.06);
border: 1px solid rgba(0,0,0,.08);
font-size: 12px;
}
/* ===== Sections ===== */
.ref-section {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(0,0,0,.06);
}
.ref-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.ref-section-title {
font-size: 13px;
font-weight: 900;
letter-spacing: .25px;
color: rgba(0,0,0,.88);
}
.ref-badge {
font-size: 12px;
font-weight: 800;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,.05);
border: 1px solid rgba(0,0,0,.08);
color: rgba(0,0,0,.78);
}
/* ===== Empty states ===== */
.ref-empty {
padding: 18px 8px;
text-align: center;
}
.ref-empty-title {
font-weight: 900;
margin-bottom: 4px;
color: rgba(0,0,0,.85);
}
.ref-empty-text,
.ref-empty-inline {
color: rgba(0,0,0,.60);
font-size: 13px;
}
.ref-empty-inline {
padding: 8px 2px;
}
/* ===== DxGrid polish ===== */
.ref-dxgrid {
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
/* Header row */
.ref-dxgrid .dxbs-grid-header-row,
.ref-dxgrid .dxbs-grid-header {
background: rgba(0,0,0,.03);
}
/* Header cell */
.ref-dxgrid .dxbs-grid-header-cell {
font-weight: 900;
font-size: 12px;
color: rgba(0,0,0,.75);
}
/* Zebra rows */
.ref-dxgrid .dxbs-grid-table > tbody > tr:nth-child(even) {
background: rgba(0,0,0,.015);
}
/* Row hover */
.ref-dxgrid .dxbs-grid-table > tbody > tr:hover {
background: rgba(0,0,0,.035);
}
/* ============================================================
GLOBAL XAF BLAZOR UI CUSTOMIZATIONS
------------------------------------------------------------
Purpose:
This stylesheet standardizes the appearance and behavior of
DevExpress XAF Blazor UI components across the application.
It works together with the following controllers:
- GlobalCardLayoutController
- ListViewGridLayoutController
- FreezeNestedGridColumnsController
The CSS classes applied by those controllers are styled here
to provide a consistent modern UI.
Major responsibilities of this stylesheet:
- Standardize field layout behavior
- Improve checkbox alignment
- Improve grid readability
- Fix DevExpress layout quirks
- Prevent nested grid overflow
- Disable lookup navigation
============================================================ */
/* ============================================================
FIELD LAYOUTS: LABELS ABOVE INPUT
------------------------------------------------------------
Fields tagged with `.custom-field-item` (via controller)
are displayed in a vertical layout:
Label
Input
This replaces the default DevExpress horizontal layout.
============================================================ */
.custom-field-item:has(.dxbl-fl-ctrl):not(:has(.dxbl-checkbox)) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.custom-field-item:has(.dxbl-fl-ctrl):not(:has(.dxbl-checkbox)) > .dxbl-fl-cpt {
width: 100% !important;
max-width: 100% !important;
text-align: left !important;
margin-bottom: 6px !important;
padding-bottom: 0 !important;
}
.custom-field-item:has(.dxbl-fl-ctrl):not(:has(.dxbl-checkbox)) > .dxbl-fl-ctrl {
width: 100% !important;
max-width: 100% !important;
}
/* ============================================================
CHECKBOX FIELD LAYOUT
------------------------------------------------------------
Boolean fields tagged with `.custom-checkbox-item`
display as:
Label Checkbox
instead of stacking vertically.
============================================================ */
.custom-checkbox-item {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
min-height: 42px;
border-bottom: 1px solid rgba(0,0,0,.04);
}
.custom-checkbox-item > .dxbl-fl-cpt {
width: auto !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.custom-checkbox-item > .dxbl-fl-ctrl {
width: auto !important;
display: flex !important;
justify-content: flex-end !important;
}
.custom-checkbox-item .dxbl-checkbox-check-element {
transform: scale(1.1);
margin-right: 4px;
}
/* ============================================================
REQUIRED FIELD LABEL EMPHASIS
------------------------------------------------------------
Fields marked as required receive a stronger label weight.
============================================================ */
.custom-required-item > .dxbl-fl-cpt {
font-weight: 700 !important;
}
/* ============================================================
ESCAPE HATCH: IGNORE GLOBAL FIELD LAYOUT
------------------------------------------------------------
Layout items tagged with `ignore` in the Model Editor
bypass the custom field layout rules.
============================================================ */
.dxbl-fl .dxbl-fl-item.ignore {
display: block !important;
flex-flow: unset !important;
align-items: initial !important;
}
/* ============================================================
BADGE / CHIP TEXT WRAPPING
------------------------------------------------------------
Allows long badge text (e.g. utility types) to wrap
instead of truncating.
============================================================ */
.dxbl-grid-table td .badge.chip {
white-space: normal !important;
height: auto !important;
line-height: 1.3 !important;
display: inline-block !important;
padding: 4px 8px !important;
text-align: center;
}
.dxbl-grid-table td .badge.chip.chip-expecting {
display: inline-flex !important;
padding: 2px 9px !important;
}
/* Not optional: the generic rule above forces display:inline-block !important on every chip in a
grid cell, which collapses the icon/text alignment. .chip-expecting needs this override for the
same reason. */
.dxbl-grid-table td .badge.chip.chip-review,
.dxbl-grid-table td .badge.chip.chip-expired {
display: inline-flex !important;
padding: 2px 9px !important;
}
/* ============================================================
GRID CELL ALIGNMENT
------------------------------------------------------------
Standardizes alignment of grid values and headers.
============================================================ */
.dxbl-grid .dxbl-grid-table td:not(.dxbl-grid-selection-cell) {
text-align: center !important;
}
.dxbl-grid .dxbl-grid-table th:not(.dxbl-grid-selection-cell) .dxbl-grid-header-content {
justify-content: center !important;
text-align: center !important;
}
/* Allow long grid header captions to wrap onto multiple lines instead of
forcing the column (and grid) wider. Pairs with ListViewGridLayoutController,
which no longer expands columns to fit the caption on a single line. */
.dxbl-grid .dxbl-grid-table th:not(.dxbl-grid-selection-cell) .dxbl-grid-header-content,
.dxbl-grid .dxbl-grid-table th:not(.dxbl-grid-selection-cell) .dxbl-grid-header-caption {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: anywhere;
}
/* ============================================================
GRID LOOKUP / COMBOBOX CELL ALIGNMENT
------------------------------------------------------------
Ensures lookup editors inside grid cells align properly.
============================================================ */
.dxbl-grid .dxbl-grid-table td .xaf-combobox-item {
justify-content: center !important;
text-align: center !important;
width: 100%;
}
.dxbl-grid .dxbl-grid-table td .xaf-combobox-item .xaf-wrap-ellipsis {
text-align: center !important;
display: block;
}
/* ============================================================
GROUP ROW ALIGNMENT
------------------------------------------------------------
Group rows should remain left-aligned to preserve hierarchy.
============================================================ */
.dxbl-grid .dxbl-grid-table tr.dxbl-grid-group-row td {
text-align: left !important;
}
/* ============================================================
NESTED GRID HEIGHT MANAGEMENT
------------------------------------------------------------
Nested grids inside DetailViews can grow excessively tall.
This rule:
- Allows small datasets to shrink naturally
- Caps large datasets to 65% of viewport height
============================================================ */
.nested-content dxbl-grid {
height: auto !important;
max-height: 65vh !important;
display: flex !important;
flex-direction: column !important;
}
.nested-content dxbl-grid .dxbl-scroll-viewer {
height: auto !important;
max-height: 100% !important;
flex-grow: 1 !important;
min-height: 0 !important;
}
/* ============================================================
DEVEXPRESS GRID FILLER COLUMN FIX
------------------------------------------------------------
DevExpress sometimes inserts a "filler column"
(dxbl-grid-empty-cell) when the grid container is wider
than the columns.
This rule prevents the column from becoming visible
when zooming or resizing the browser.
============================================================ */
.dxbl-grid-table th.dxbl-grid-empty-cell,
.dxbl-grid-table td.dxbl-grid-empty-cell {
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
.dxbl-grid-empty-cell {
background: transparent !important;
}
/* ============================================================
STACKED DETAIL CELLS
------------------------------------------------------------
Multi-line grid cells used by StackedDetailsPropertyEditor
(Recertification > Tenants grid: Tenant Details, Address,
Household Details). Lines stack vertically and are
left-aligned, overriding the grid's default centered cells.
============================================================ */
.dxbl-grid .dxbl-grid-table td .stacked-cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
text-align: left !important;
white-space: normal;
line-height: 1.35;
}
.stacked-cell .stacked-line {
white-space: normal;
word-break: break-word;
}
.stacked-cell .stacked-primary {
font-weight: 600;
color: var(--app-fg);
}
.stacked-cell .stacked-secondary {
color: var(--app-muted);
font-size: 0.85em;
}
.stacked-cell .stacked-badges {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
}
/* Color-free override for in-cell accessibility badges (e.g. Mobility,
Vision/Hearing). Scoped to .stacked-cell so the Recert Details column's
colored badges are unaffected. */
.stacked-cell .stacked-badges .badge {
background: transparent !important;
border: 1px solid var(--app-border) !important;
color: var(--app-muted) !important;
border-radius: 6px;
font-weight: 500;
transition: background-color 0.12s ease, color 0.12s ease;
}
.stacked-cell .stacked-badges .badge:hover {
background: var(--app-surface-hover) !important;
color: var(--app-fg) !important;
}
/* Exception to the colour-free rule above: the "Expecting" tag keeps the tenant portal's
pink pill. Mobility / Vision-Hearing stay colour-free by design. */
.stacked-cell .stacked-badges .badge.chip-expecting,
.stacked-cell .stacked-badges .badge.chip-expecting:hover {
background: #FFE9F0 !important;
border-color: #FFC9DC !important;
color: #EC4899 !important;
border-radius: 999px;
font-weight: 600;
}
/* ------------------------------------------------------------
DETAIL ROWS (monochrome)
Clean, color-free icon + text items used for the secondary
detail lines inside a stacked cell — Age, phone, email,
HH Size, HH Income, street, city/zip, account #.
The leading icon is the differentiator (no color coding);
each item gets an interactive hover affordance.
------------------------------------------------------------ */
.stacked-cell .detail-chip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
margin-top: 2px;
}
.stacked-cell .detail-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 1px 6px;
border-radius: 6px;
font-size: 0.8em;
font-weight: 500;
line-height: 1.5;
background: transparent;
color: var(--app-muted);
border: 1px solid transparent;
white-space: normal;
word-break: break-word;
cursor: default;
transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.stacked-cell .detail-chip:hover {
background: var(--app-surface-hover);
border-color: var(--app-border);
color: var(--app-fg);
}
.stacked-cell .detail-chip svg {
width: 13px;
height: 13px;
flex: 0 0 auto;
color: var(--app-muted);
transition: color 0.12s ease;
}
.stacked-cell .detail-chip:hover svg {
color: var(--app-fg);
}
.stacked-cell .detail-chip .detail-chip-text {
white-space: normal;
word-break: break-word;
}
/* Per-type rules kept as neutral no-ops so the data-driven class
names (chip-age, chip-phone, …) stay color-free. */
.stacked-cell .detail-chip.chip-age,
.stacked-cell .detail-chip.chip-phone,
.stacked-cell .detail-chip.chip-mail,
.stacked-cell .detail-chip.chip-size,
.stacked-cell .detail-chip.chip-income,
.stacked-cell .detail-chip.chip-preg,
.stacked-cell .detail-chip.chip-acct,
.stacked-cell .detail-chip.chip-home,
.stacked-cell .detail-chip.chip-pin,
.stacked-cell .detail-chip.chip-default {
background: transparent;
border-color: transparent;
color: var(--app-muted);
}
.stacked-cell .detail-chip.chip-age:hover,
.stacked-cell .detail-chip.chip-phone:hover,
.stacked-cell .detail-chip.chip-mail:hover,
.stacked-cell .detail-chip.chip-size:hover,
.stacked-cell .detail-chip.chip-income:hover,
.stacked-cell .detail-chip.chip-preg:hover,
.stacked-cell .detail-chip.chip-acct:hover,
.stacked-cell .detail-chip.chip-home:hover,
.stacked-cell .detail-chip.chip-pin:hover,
.stacked-cell .detail-chip.chip-default:hover {
background: var(--app-surface-hover);
border-color: var(--app-border);
color: var(--app-fg);
}
/* ============================================================
DISABLE LOOKUP NAVIGATION
------------------------------------------------------------
XAF reference properties render hyperlinks that navigate
to the referenced object's DetailView.
In this application navigation via lookup links is disabled
to prevent accidental context switching.
============================================================ */
a.grid-cell-object-link {
pointer-events: none !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
}
.xaf-combobox-item.xaf-action {
pointer-events: none !important;
cursor: default !important;
}
.combo-box-object-link {
text-decoration: none !important;
color: inherit !important;
}
/* ============================================================
PERSONALIZE MENU
------------------------------------------------------------
The "Personalize menu" action (NavigationPersonalizationController)
gets .ax-personalize from site.js, by its caption, and is drawn
as a labelled pill that matches the AI Mode toggle beside it.
XAF's own pencil image is swapped for a "list with a pen" icon
drawn in the text colour, so it follows the theme.
============================================================ */
.ax-personalize.ax-personalize {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 4px 14px 4px 11px !important;
border-radius: 999px !important;
border: 1px solid var(--app-border) !important;
background: var(--app-surface-soft) !important;
color: var(--app-fg) !important;
font-weight: 600;
font-size: 12px;
line-height: 1.1;
min-height: 28px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ax-personalize.ax-personalize img,
.ax-personalize.ax-personalize .dxbl-image,
.ax-personalize.ax-personalize svg {
display: none !important;
}
.ax-personalize.ax-personalize::before {
content: "";
width: 16px;
height: 16px;
flex: 0 0 16px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h11M4 12h7M4 18h5'/%3E%3Cpath d='M18.4 10.6a1.9 1.9 0 0 1 2.7 2.7L15 19.4l-3.5.9.9-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h11M4 12h7M4 18h5'/%3E%3Cpath d='M18.4 10.6a1.9 1.9 0 0 1 2.7 2.7L15 19.4l-3.5.9.9-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ax-personalize.ax-personalize:hover {
border-color: var(--app-primary-border) !important;
color: var(--app-primary) !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.ax-personalize.ax-personalize:focus-visible {
outline: 2px solid var(--app-primary-border);
outline-offset: 2px;
}
/* ============================================================
AI MODE TOGGLE
------------------------------------------------------------
The "AI Mode" SimpleAction (see ToggleAiModeController) is
decorated by site.js → decorateAiModeToggle(), which inspects
the caption ("AI Mode: On" / "AI Mode: Off") and applies
.ax-ai-toggle plus the matching --on / --off modifier.
These rules turn the standard DevExpress button into a
rounded pill with a switch track + knob rendered via
::before / ::after — no DOM rewriting, so Blazor's renderer
stays happy.
============================================================ */
.ax-ai-toggle.ax-ai-toggle {
position: relative !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 4px 14px !important;
border-radius: 999px !important;
border: 1px solid var(--app-border) !important;
background: var(--app-surface-soft) !important;
color: var(--app-fg) !important;
font-weight: 600;
font-size: 12px;
line-height: 1.1;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
min-height: 28px;
overflow: visible !important;
}
.ax-ai-toggle.ax-ai-toggle:hover {
border-color: var(--app-warning-border) !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.ax-ai-toggle.ax-ai-toggle:focus-visible {
outline: 2px solid var(--app-warning-border);
outline-offset: 2px;
}
/* ON state — the pill itself is the toggle: a warm orange wash + bold label
communicates state without a redundant inline switch. */
.ax-ai-toggle.ax-ai-toggle--on {
background: var(--app-warning-soft) !important;
border-color: var(--app-warning-border) !important;
color: var(--app-warning) !important;
box-shadow: 0 1px 4px rgba(247, 103, 7, 0.18);
}
.ax-ai-toggle.ax-ai-toggle--on:hover {
border-color: var(--app-warning) !important;
box-shadow: 0 2px 8px rgba(247, 103, 7, 0.28);
}
/* Icon sizing for the microphone glyph */
.ax-ai-toggle.ax-ai-toggle .dxbl-image,
.ax-ai-toggle.ax-ai-toggle .dxbl-btn-image,
.ax-ai-toggle.ax-ai-toggle img {
width: 14px !important;
height: 14px !important;
}
/* Tint the microphone icon to match the active state */
.ax-ai-toggle.ax-ai-toggle--on .dxbl-image {
color: var(--app-warning) !important;
fill: var(--app-warning) !important;
}
/* ============================================================
LEASE-UP BRIEFING — robot button beside AI Mode
------------------------------------------------------------
site.js (axccesUi.mountLeaseUpBriefing) places the host just
left of the AI Mode toggle; LeaseUpBriefingButton renders the
robot inside it. Same pill language as the toggle. The flyout
(LeaseUpBriefingPanel) carries its own styles.
Colors come only from the theme-bridge --app-* tokens, so the
robot follows the user's DevExpress theme (Fluent accent or
classic theme, light or dark).
============================================================ */
.lua-robot {
--lua-accent: var(--app-primary);
--lua-accent-soft: var(--app-primary-soft);
--lua-accent-border: var(--app-primary-border);
}
.lua-button-host {
display: inline-flex;
align-items: center;
align-self: center;
flex: 0 0 auto;
margin-right: 8px;
}
.lua-button-host:empty {
margin-right: 0;
}
.lua-button-host.is-parked {
display: none !important;
}
.lua-robot {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 999px;
border: 1px solid var(--app-border);
background: var(--app-surface-soft);
color: var(--app-fg);
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.lua-robot:hover {
border-color: var(--lua-accent-border);
color: var(--lua-accent);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.lua-robot:focus-visible {
outline: 2px solid var(--lua-accent-border);
outline-offset: 2px;
}
.lua-robot.is-open {
background: var(--lua-accent-soft);
border-color: var(--lua-accent-border);
color: var(--lua-accent);
}
.lua-robot svg {
width: 18px;
height: 18px;
}
.lua-robot__badge {
position: absolute;
top: -6px;
right: -7px;
min-width: 17px;
height: 17px;
padding: 0 5px;
border-radius: 999px;
background: var(--lua-accent);
color: #ffffff;
font-size: 10.5px;
font-weight: 700;
line-height: 17px;
text-align: center;
/* Cut out of whatever the header is painted with, light or dark. */
box-shadow: 0 0 0 2px var(--app-surface);
}
/* A soft ring while something needs the manager and the flyout is closed. */
.lua-robot.has-count:not(.is-open)::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--lua-accent) 45%, transparent);
animation: lua-robot-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes lua-robot-pulse {
0% { opacity: 0.9; transform: scale(0.92); }
70% { opacity: 0; transform: scale(1.18); }
100% { opacity: 0; transform: scale(1.18); }
}
/* While the background review is still going: a slowly turning ring — "working on it". */
.lua-robot.is-reviewing::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 999px;
border: 2px solid transparent;
border-top-color: var(--lua-accent);
border-right-color: color-mix(in srgb, var(--lua-accent) 35%, transparent);
animation: lua-robot-spin 1.1s linear infinite;
pointer-events: none;
}
@keyframes lua-robot-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.lua-robot.has-count:not(.is-open)::after {
animation: none;
opacity: 0.6;
}
.lua-robot.is-reviewing::after {
animation: none;
}
}
/* Lease-Up Applications: "Showing: Needs attention ×" while a Lease-Up Briefing summary line filters
the grid — at the end of the tab strip, or on its own row above the grid when there is no strip. */
.axtab-filter {
display: inline-flex;
align-items: center;
align-self: center;
gap: 2px;
margin-left: auto;
padding: 2px 3px 2px 10px;
border-radius: 999px;
border: 1px solid var(--app-primary-border);
background: var(--app-primary-soft);
color: color-mix(in srgb, var(--app-primary) 80%, var(--app-fg));
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.axtab-filter__clear {
border: none;
background: transparent;
color: inherit;
font-size: 15px;
line-height: 1;
padding: 1px 6px 2px 6px;
border-radius: 999px;
cursor: pointer;
}
.axtab-filter__clear:hover {
background: var(--app-primary-border);
}
.axtab-filter-row {
display: flex;
justify-content: flex-end;
padding: 6px 4px;
}
.xaf-nav-link,
.xaf-nav-link * {
text-decoration: none !important;
}
/* ============================================================
AI MODE — COLLAPSED NAVIGATION
------------------------------------------------------------
site.js stamps .ax-ai-mode-on onto from the AI Mode
toggle's caption. AI Mode is a focused, conversational
surface, so the navigation drawer is removed entirely rather
than just narrowed — the assistant drives navigation instead.
The drawer panel is collapsed to zero and taken out of the
layout, and the hamburger is hidden so the panel cannot be
reopened into a zero-width shell. Turning AI Mode off drops
the body class and every rule here stops applying, so the
navigation returns exactly as it was.
============================================================ */
/* XAF lays the shell out as .sidebar (270px) + .main. Both the base rule and the
.collapse-toggle override use display, so the override here has to win on both —
hence the doubled class for specificity plus !important. Width is zeroed as well so
nothing can reserve the gutter. */
body.ax-ai-mode-on.ax-ai-mode-on .sidebar,
body.ax-ai-mode-on.ax-ai-mode-on .collapse-toggle .sidebar,
body.ax-ai-mode-on.ax-ai-mode-on .sidebar-sm-shadow {
display: none !important;
min-width: 0 !important;
width: 0 !important;
}
body.ax-ai-mode-on .xaf-navmenu {
display: none !important;
}
/* Reclaim the gutter the sidebar occupied. */
body.ax-ai-mode-on .app .main,
body.ax-ai-mode-on .app .main-content {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Without this the hamburger reopens an empty shell. */
body.ax-ai-mode-on .xaf-ribbon-hamburger-tab,
body.ax-ai-mode-on .xaf-ribbon-hamburger-icon,
body.ax-ai-mode-on .header-left-side .dxbl-btn:first-child {
display: none !important;
}
/* ------------------------------------------------------------
Assistants launcher (AiModeAssistantLauncherController)
The way back to the assistants once the drawer is gone, so it
is styled as a peer of the AI Mode pill rather than a stray
toolbar button — same height, same radius, deliberately the
filled one of the pair since it is the actionable control.
------------------------------------------------------------ */
.ax-ai-assistants.ax-ai-assistants {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 4px 14px !important;
border-radius: 999px !important;
border: 1px solid var(--app-warning-border) !important;
background: var(--app-warning-soft) !important;
color: var(--app-warning) !important;
font-weight: 600;
font-size: 12px;
line-height: 1.1;
min-height: 28px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ax-ai-assistants.ax-ai-assistants:hover {
border-color: var(--app-warning) !important;
box-shadow: 0 2px 8px rgba(247, 103, 7, 0.24);
}
.ax-ai-assistants.ax-ai-assistants:focus-visible {
outline: 2px solid var(--app-warning-border);
outline-offset: 2px;
}
.ax-ai-assistants.ax-ai-assistants .dxbl-image {
color: var(--app-warning) !important;
fill: var(--app-warning) !important;
}
img.xaf-toolbar-item-icon[src*="IImageService/Bell?"],
img.dxbl-image[src*="IImageService/Bell?"] {
/* Replaced content is clipped to the content box, so this hides the served bitmap while
leaving the element itself (and therefore the mask) exactly where it was. */
object-fit: none;
object-position: -1000px -1000px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M27 23l-2.4-2.4V14c0-4.1-2.9-7.5-6.8-8.4V4.5C17.8 3.1 16.7 2 15.3 2S12.8 3.1 12.8 4.5v1.1C8.9 6.5 6 9.9 6 14v6.6L3.6 23c-.3.3-.4.7-.2 1.1s.5.6.9.6h7.2c.3 1.9 1.9 3.3 3.8 3.3s3.5-1.4 3.8-3.3h7.2c.4 0 .8-.2.9-.6s0-.8-.2-1.1zM15.3 26c-.8 0-1.5-.5-1.8-1.3h3.5c-.2.8-.9 1.3-1.7 1.3z'/%3e%3c/svg%3e") center / contain no-repeat;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M27 23l-2.4-2.4V14c0-4.1-2.9-7.5-6.8-8.4V4.5C17.8 3.1 16.7 2 15.3 2S12.8 3.1 12.8 4.5v1.1C8.9 6.5 6 9.9 6 14v6.6L3.6 23c-.3.3-.4.7-.2 1.1s.5.6.9.6h7.2c.3 1.9 1.9 3.3 3.8 3.3s3.5-1.4 3.8-3.3h7.2c.4 0 .8-.2.9-.6s0-.8-.2-1.1zM15.3 26c-.8 0-1.5-.5-1.8-1.3h3.5c-.2.8-.9 1.3-1.7 1.3z'/%3e%3c/svg%3e") center / contain no-repeat;
}
/* Deposit clarification pill in the documents grids (ClarificationStatusCell). */
.axc-clar-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 10px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 12px;
font-weight: 600;
line-height: 18px;
white-space: nowrap;
}
.axc-clar-badge--submitted {
color: #065f46;
background: #d1fae5;
border-color: #a7f3d0;
}
.axc-clar-badge--pending {
color: #92400e;
background: #fef3c7;
border-color: #fde68a;
}
.axc-clar-badge--muted {
color: #6b7280;
background: #f9fafb;
border-color: #e5e7eb;
}
.axc-clar-empty {
color: #9ca3af;
}
/* Report-wizard filename token drag-and-drop (2026-09-16) — see site.js. Highlights whatever
text input a {Token} chip is currently being dragged over. */
.axcces-token-drop-target {
outline: 2px dashed var(--bs-primary, #0d6efd) !important;
outline-offset: 1px;
}
/* Type-in column filter popup body (Components/Custom/GridColumnSearchFilterMenu.razor). */
.axc-cfm {
padding: 0.25rem 0;
min-width: 220px;
}
.axc-cfm-input {
width: 100%;
padding: 0.4rem 0.6rem;
border: 1px solid var(--app-border);
border-radius: 6px;
background: var(--app-surface);
color: var(--app-fg);
font: inherit;
}
.axc-cfm-input:focus {
outline: none;
border-color: var(--app-primary);
box-shadow: 0 0 0 2px var(--app-primary-soft);
}
.axc-cfm-hint {
margin-top: 0.4rem;
font-size: 0.75rem;
color: var(--app-muted);
}