— grow=1 absorbs leftover row width;
basis=280px sets the natural wrap threshold so auto tiles wrap to
the next row when there isn't room for a readable tile. */
flex: 1 1 280px;
min-width: 280px;
}
.dash-grid.grid-mode-flex > .dash-tile.tile-w-full {
flex: 0 0 100%;
}
.dash-grid.grid-mode-flex > .dash-tile.tile-w-half {
flex: 0 0 calc(50% - 0.5rem);
min-width: 0;
}
.dash-grid.grid-mode-flex > .dash-tile.tile-w-third {
flex: 0 0 calc(33.3333% - 0.6667rem);
min-width: 0;
}
.dash-grid.grid-mode-flex > .dash-tile.tile-w-quarter {
flex: 0 0 calc(25% - 0.75rem);
min-width: 0;
}
.dash-grid.grid-mode-flex > .dash-tile.tile-w-fifth {
flex: 0 0 calc(20% - 0.8rem);
min-width: 0;
}
/* Wide tiles (catalog-flagged) always span the full row regardless of
the user's saved width pref. The selector specificity matches the
per-tile width rules above so it doesn't lose the cascade. */
.dash-grid.grid-mode-flex > .dash-tile.dash-tile-wide {
flex: 0 0 100%;
}
@media (max-width: 1080px) {
/* Only collapse fixed mode — flex mode is already responsive via
flex-wrap + the auto tiles' 280px basis floor. */
.dash-grid:not(.grid-mode-flex) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile / phone-sized override: at viewports ≤820px every tile renders
full width regardless of saved grid_mode + per-tile width prefs. Covers
phones in any orientation (incl. Pro Max in landscape ~896px → no, that
falls back to desktop layout — but the typical phone in landscape is
≤820px) AND iPad in portrait (~768-820px). The user's saved preferences
stay intact in the DB; this is purely a render-time override so they
come back when the device viewport widens. */
@media (max-width: 820px) {
.dash-grid:not(.grid-mode-flex) { grid-template-columns: 1fr; }
.dash-grid.grid-mode-flex > .dash-tile { flex: 0 0 100%; min-width: 0; }
}
/* Tablet-in-portrait override: touch-first devices (pointer: coarse)
held vertically often have viewport widths >820px (iPad Pro portrait
is ~1024px) but the multi-column dashboard feels cramped + each tile
chart becomes hard to read. Force full-width tiles in this case too
without changing the saved prefs. Landscape tablets / desktops with
a touch screen are NOT affected — they keep the user's chosen layout. */
@media (pointer: coarse) and (orientation: portrait) {
.dash-grid:not(.grid-mode-flex) { grid-template-columns: 1fr; }
.dash-grid.grid-mode-flex > .dash-tile { flex: 0 0 100%; min-width: 0; }
}
/* Wide-tile modifier — spans the full row of the dash grid. Used by
tiles whose body is a wide multi-column table that won't fit a
single 1/3-width slot (e.g. Occupancy Snapshot's 9-column table). */
.dash-tile.dash-tile-wide { grid-column: 1 / -1; }
/* The drilldown link wraps the tile body + chart ONLY — the header
stays outside so the dropdown menu can be interacted with without
navigating. The link still fills the remaining vertical space
inside the tile (flex:1) so the click target is generous. */
.dash-tile-link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.dash-tile-link:hover { text-decoration: none; }
.dash-tile {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 0.85rem 1rem 0.95rem;
display: flex;
flex-direction: column;
min-height: 380px;
position: relative; /* anchor for .dash-tile-close absolute positioning */
transition: border-color 0.15s ease, box-shadow 0.15s ease,
transform 0.15s ease;
}
/* Per-tile hide button. Floats in the upper-right corner of the tile,
above the header but outside the drilldown anchor. Hidden until the
user hovers the tile so it doesn't compete with the content visually.
Click handler removes the tile (same as unchecking it in the
Settings modal). */
.dash-tile-close {
position: absolute;
top: 0.4rem;
right: 0.45rem;
width: 1.35rem;
height: 1.35rem;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: #94a3b8; /* slate-400 — quiet until hovered */
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
z-index: 2; /* sit above the .dash-tile-link anchor */
}
.dash-tile:hover .dash-tile-close,
.dash-tile-close:focus-visible {
opacity: 1;
}
.dash-tile-close:hover {
background: #fee2e2; /* red-100 */
color: #b91c1c; /* red-700 */
}
/* Hover on the LINK area (body + chart) is the primary affordance —
lift the parent tile so the user gets visual feedback that the
region is clickable. Hovering the header alone (where the dropdown
lives) does NOT trigger the lift, matching the click semantics. */
.dash-tile:has(.dash-tile-link:hover) {
border-color: var(--brand-navy-light, #2A6FA0);
box-shadow: 0 4px 12px rgba(27, 79, 118, 0.10);
transform: translateY(-1px);
}
.dash-tile-header {
display: flex;
align-items: center;
justify-content: space-between;
/* Pull the band out through the tile's own padding so it spans the
full tile width — mirrors the Operations / Financials section-
header band (light bluish-grey on light, deep navy on dark) and
visually labels the area as the drag-handle region (NOT the
drilldown click target, which lives below). */
margin: -0.85rem -1rem 0.65rem -1rem;
padding: 0.55rem 1rem;
background: var(--info-bg);
border-bottom: 1px solid var(--border-strong);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: grab; /* SortableJS handle — grab anywhere on the header */
user-select: none; /* prevent the title turning into a selection mid-drag */
}
.dash-tile-header:active { cursor: grabbing; }
.dash-tile-header h2 {
margin: 0;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-navy, #1B4F76);
}
.dash-tile-controls {
display: flex;
gap: 0.25rem;
/* Controls keep the default arrow / pointer cursor so users know
these stay clickable even though the surrounding header is draggable. */
cursor: default;
/* Reserve clearance for the absolute-positioned × close button on the
right edge of the tile. Without this, the X (which has z-index: 2
and fades in on tile hover) sits directly on top of the dropdown's
chevron — clicks the user thinks are landing on the dropdown
actually hit the close button and hide the tile. */
margin-right: 1.6rem;
}
/* Live-drag feedback on the dashboard grid: ghost = the placeholder
where the tile will land; chosen = the picked-up tile; drag = the
floating clone under the cursor. Mirrors mktsvy-ish visual. */
.dash-tile-ghost {
opacity: 0.35;
background: rgba(27, 79, 118, 0.06);
}
.dash-tile-chosen { cursor: grabbing; }
.dash-tile-drag {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
transform: rotate(-0.5deg);
}
.dash-tile-dropdown {
font-size: 0.75rem;
padding: 0.15rem 0.35rem;
border: 1px solid #d1d5db;
border-radius: 4px;
background: white;
cursor: pointer;
color: #1f2937;
}
.dash-tile-dropdown:hover { border-color: var(--brand-navy-light, #2A6FA0); }
.dash-tile-body {
font-size: 0.8rem;
/* Don't let the body steal vertical space from the chart — it
should size to its content so the chart can flex-grow to fill
whatever's left in the tile. */
flex: 0 0 auto;
}
.dash-tile-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
}
.dash-tile-table th, .dash-tile-table td {
padding: 0.22rem 0.3rem;
text-align: left;
border: none;
}
.dash-tile-table thead th {
font-weight: 500;
font-size: 0.7rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.03em;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 0.2rem;
}
.dash-tile-table tbody th {
font-weight: 500;
color: #374151;
}
.dash-tile-table td.num, .dash-tile-table th.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.dash-tile-table td.muted { color: #9ca3af; }
.dash-tile-table td.delta-positive { color: #16a34a; font-weight: 500; }
.dash-tile-table td.delta-negative { color: #dc2626; font-weight: 500; }
.dash-tile-table td.delta-neutral { color: #6b7280; }
/* Period caption shown above the BS Changes and Expense Comparison
tile tables — "May 2026 vs Apr 2026" reading. Same hierarchy as
the tile sub-headers: muted color, slightly smaller, modest margin
so it doesn't crowd the table below. */
.dash-tile-period {
font-size: 0.85em;
color: var(--text-muted, #6b7280);
margin: 0 0 6px 0;
letter-spacing: 0.01em;
}
.dash-tile-period .muted { color: #9ca3af; }
/* Sub-header row that splits a multi-section table (e.g. "Current Month"
vs "YTD" in T-12 Financials). Reads as a section divider, not a data
row, so the same Actual/Budget/Var headers can serve both blocks. */
.dash-tile-table tr.dash-tile-subhead th {
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-navy, #1B4F76);
background: rgba(27, 79, 118, 0.05);
padding-top: 0.45rem;
padding-bottom: 0.2rem;
}
/* Occupancy Snapshot table — uses chip badges in numeric cells, so
the default text-align:right via .num isn't enough (badges need
center-align for the colored pill to read cleanly). Portfolio row
gets a top border + subtle background to read as a totals band,
matching the Operations page convention. */
.dash-occ-snapshot-table tbody td.num,
.dash-occ-snapshot-table thead th.num { text-align: center; }
.dash-occ-snapshot-table tbody td:first-child,
.dash-occ-snapshot-table thead th:first-child { text-align: left; }
.dash-occ-snapshot-table tbody tr.dash-tile-subtotal td {
border-top: 1px solid var(--brand-navy, #1B4F76);
background: rgba(27, 79, 118, 0.04);
padding-top: 0.32rem;
padding-bottom: 0.32rem;
}
[data-theme="dark"] .dash-occ-snapshot-table tbody tr.dash-tile-subtotal td {
background: rgba(255, 255, 255, 0.04);
}
/* Snapshot scroll wrapper — lets the 9-column table live inside a
1/3-width tile by scrolling horizontally when content overflows.
table-layout:auto + nowrap on cells keeps each column at its
natural width rather than letting the browser shrink Property
names to fit. The scrollbar appears only when needed. */
.dash-occ-snapshot-scroll {
overflow-x: auto;
max-width: 100%;
}
.dash-occ-snapshot-table {
table-layout: auto;
}
.dash-occ-snapshot-table th,
.dash-occ-snapshot-table td { white-space: nowrap; }
/* ----------------------------------------------------------------
Per-column widths for the shared OCC_COLUMN_REGISTRY. Applies to
BOTH the Operations Occupancy Trend table (.occupancy-table) and
the Dashboard Occupancy Snapshot tile (.dash-occ-snapshot-table)
so a user resizing one stays consistent with the other. Keyed on
the data-col attribute, NOT positional nth-child, so the gear-
icon picker's reorder + hide operations keep widths attached to
the logical column rather than the slot.
Sizing target: every column claims enough horizontal space for
its widest realistic value WITHOUT stealing from neighbors. Text
columns nowrap + ellipsis past max-width; numeric columns are
sized to "100.0%" / "$12,345,678" / "2026-06-30" etc.
---------------------------------------------------------------- */
.occupancy-table th[data-col="name"],
.occupancy-table td[data-col="name"],
.dash-occ-snapshot-table th[data-col="name"],
.dash-occ-snapshot-table td[data-col="name"] {
min-width: 170px;
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.occupancy-table th[data-col="units"],
.occupancy-table td[data-col="units"],
.dash-occ-snapshot-table th[data-col="units"],
.dash-occ-snapshot-table td[data-col="units"] { min-width: 56px; white-space: nowrap; }
.occupancy-table th[data-col="occupied"],
.occupancy-table td[data-col="occupied"],
.dash-occ-snapshot-table th[data-col="occupied"],
.dash-occ-snapshot-table td[data-col="occupied"] { min-width: 72px; white-space: nowrap; }
.occupancy-table th[data-col="available"],
.occupancy-table td[data-col="available"],
.dash-occ-snapshot-table th[data-col="available"],
.dash-occ-snapshot-table td[data-col="available"] { min-width: 56px; white-space: nowrap; }
.occupancy-table th[data-col="occ_pct"],
.occupancy-table td[data-col="occ_pct"],
.dash-occ-snapshot-table th[data-col="occ_pct"],
.dash-occ-snapshot-table td[data-col="occ_pct"] { min-width: 66px; white-space: nowrap; }
.occupancy-table th[data-col="avail_pct"],
.occupancy-table td[data-col="avail_pct"],
.dash-occ-snapshot-table th[data-col="avail_pct"],
.dash-occ-snapshot-table td[data-col="avail_pct"] { min-width: 66px; white-space: nowrap; }
/* Projection % + movement chips — narrow because they pair up. */
.occupancy-table th[data-col^="proj_"][data-col$="0"],
.occupancy-table td[data-col^="proj_"][data-col$="0"],
.dash-occ-snapshot-table th[data-col^="proj_"][data-col$="0"],
.dash-occ-snapshot-table td[data-col^="proj_"][data-col$="0"] { min-width: 60px; white-space: nowrap; }
.occupancy-table th[data-col$="_mov"],
.occupancy-table td[data-col$="_mov"],
.dash-occ-snapshot-table th[data-col$="_mov"],
.dash-occ-snapshot-table td[data-col$="_mov"] { min-width: 48px; white-space: nowrap; }
.occupancy-table th[data-col="avg_rent"],
.occupancy-table td[data-col="avg_rent"],
.dash-occ-snapshot-table th[data-col="avg_rent"],
.dash-occ-snapshot-table td[data-col="avg_rent"] { min-width: 76px; white-space: nowrap; }
/* Subsidy count + percentage are 1-2 digit values; keep them tight. */
.occupancy-table th[data-col="sub_count"],
.occupancy-table td[data-col="sub_count"],
.dash-occ-snapshot-table th[data-col="sub_count"],
.dash-occ-snapshot-table td[data-col="sub_count"] { min-width: 44px; white-space: nowrap; }
.occupancy-table th[data-col="sub_pct"],
.occupancy-table td[data-col="sub_pct"],
.dash-occ-snapshot-table th[data-col="sub_pct"],
.dash-occ-snapshot-table td[data-col="sub_pct"] { min-width: 56px; white-space: nowrap; }
.occupancy-table th[data-col="recent"],
.occupancy-table td[data-col="recent"],
.dash-occ-snapshot-table th[data-col="recent"],
.dash-occ-snapshot-table td[data-col="recent"] { min-width: 64px; }
.occupancy-table th[data-col="pms"],
.occupancy-table td[data-col="pms"],
.dash-occ-snapshot-table th[data-col="pms"],
.dash-occ-snapshot-table td[data-col="pms"] { min-width: 74px; white-space: nowrap; }
.occupancy-table th[data-col="as_of"],
.occupancy-table td[data-col="as_of"],
.dash-occ-snapshot-table th[data-col="as_of"],
.dash-occ-snapshot-table td[data-col="as_of"] { min-width: 92px; white-space: nowrap; }
/* ---- Extended (default-hidden) columns ---- */
.occupancy-table th[data-col="street_address"],
.occupancy-table td[data-col="street_address"],
.dash-occ-snapshot-table th[data-col="street_address"],
.dash-occ-snapshot-table td[data-col="street_address"] {
min-width: 180px; max-width: 240px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.occupancy-table th[data-col="city"],
.occupancy-table td[data-col="city"],
.dash-occ-snapshot-table th[data-col="city"],
.dash-occ-snapshot-table td[data-col="city"] {
/* Longest commonly-seen city: "North Chesterfield", "Virginia Beach". */
min-width: 120px; white-space: nowrap;
}
.occupancy-table th[data-col="state"],
.occupancy-table td[data-col="state"],
.dash-occ-snapshot-table th[data-col="state"],
.dash-occ-snapshot-table td[data-col="state"] { min-width: 44px; white-space: nowrap; }
.occupancy-table th[data-col="asset_manager"],
.occupancy-table td[data-col="asset_manager"],
.dash-occ-snapshot-table th[data-col="asset_manager"],
.dash-occ-snapshot-table td[data-col="asset_manager"] {
min-width: 130px; max-width: 180px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.occupancy-table th[data-col="mgmt_company"],
.occupancy-table td[data-col="mgmt_company"],
.dash-occ-snapshot-table th[data-col="mgmt_company"],
.dash-occ-snapshot-table td[data-col="mgmt_company"] {
min-width: 150px; max-width: 220px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.occupancy-table th[data-col="year_built"],
.occupancy-table td[data-col="year_built"],
.dash-occ-snapshot-table th[data-col="year_built"],
.dash-occ-snapshot-table td[data-col="year_built"] { min-width: 60px; white-space: nowrap; }
.occupancy-table th[data-col="close_date"],
.occupancy-table td[data-col="close_date"],
.dash-occ-snapshot-table th[data-col="close_date"],
.dash-occ-snapshot-table td[data-col="close_date"] { min-width: 92px; white-space: nowrap; }
/* Big-dollar columns — fit "$12,345,678" + a little breathing room. */
.occupancy-table th[data-col="purchase_price"],
.occupancy-table td[data-col="purchase_price"],
.occupancy-table th[data-col="all_in_cost"],
.occupancy-table td[data-col="all_in_cost"],
.occupancy-table th[data-col="equity"],
.occupancy-table td[data-col="equity"],
.occupancy-table th[data-col="initial_debt"],
.occupancy-table td[data-col="initial_debt"],
.occupancy-table th[data-col="current_debt"],
.occupancy-table td[data-col="current_debt"],
.occupancy-table th[data-col="t12_noi"],
.occupancy-table td[data-col="t12_noi"],
.dash-occ-snapshot-table th[data-col="purchase_price"],
.dash-occ-snapshot-table td[data-col="purchase_price"],
.dash-occ-snapshot-table th[data-col="all_in_cost"],
.dash-occ-snapshot-table td[data-col="all_in_cost"],
.dash-occ-snapshot-table th[data-col="equity"],
.dash-occ-snapshot-table td[data-col="equity"],
.dash-occ-snapshot-table th[data-col="initial_debt"],
.dash-occ-snapshot-table td[data-col="initial_debt"],
.dash-occ-snapshot-table th[data-col="current_debt"],
.dash-occ-snapshot-table td[data-col="current_debt"],
.dash-occ-snapshot-table th[data-col="t12_noi"],
.dash-occ-snapshot-table td[data-col="t12_noi"] { min-width: 108px; white-space: nowrap; }
.occupancy-table th[data-col="interest_rate"],
.occupancy-table td[data-col="interest_rate"],
.dash-occ-snapshot-table th[data-col="interest_rate"],
.dash-occ-snapshot-table td[data-col="interest_rate"] { min-width: 80px; white-space: nowrap; }
.occupancy-table th[data-col="maturity_date"],
.occupancy-table td[data-col="maturity_date"],
.dash-occ-snapshot-table th[data-col="maturity_date"],
.dash-occ-snapshot-table td[data-col="maturity_date"] { min-width: 92px; white-space: nowrap; }
.occupancy-table th[data-col="lender"],
.occupancy-table td[data-col="lender"],
.dash-occ-snapshot-table th[data-col="lender"],
.dash-occ-snapshot-table td[data-col="lender"] {
min-width: 130px; max-width: 200px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.occupancy-table th[data-col="loan_type"],
.occupancy-table td[data-col="loan_type"],
.dash-occ-snapshot-table th[data-col="loan_type"],
.dash-occ-snapshot-table td[data-col="loan_type"] { min-width: 100px; white-space: nowrap; }
.occupancy-table th[data-col="econ_occ"],
.occupancy-table td[data-col="econ_occ"],
.dash-occ-snapshot-table th[data-col="econ_occ"],
.dash-occ-snapshot-table td[data-col="econ_occ"] { min-width: 70px; white-space: nowrap; }
.occupancy-table th[data-col="t12_as_of"],
.occupancy-table td[data-col="t12_as_of"],
.dash-occ-snapshot-table th[data-col="t12_as_of"],
.dash-occ-snapshot-table td[data-col="t12_as_of"] { min-width: 92px; white-space: nowrap; }
/* Management Company tile — small wrapped grey footnote listing
the properties under each PM firm. The hover tooltip carries the
full list verbatim too (we duplicate it on the parent via the
`title` attribute) so the reader can scan in either mode. */
.dash-mgmt-co-table td .dash-pm-properties {
font-size: 0.66rem;
font-weight: 400;
color: #6b7280;
line-height: 1.3;
margin-top: 0.15rem;
/* Allow the property list to wrap inside the cell; without this
the nowrap from .dash-occ-snapshot-table-style would flow it
into one very wide line. */
white-space: normal;
max-width: 18rem;
}
[data-theme="dark"] .dash-mgmt-co-table td .dash-pm-properties { color: #9ca3af; }
/* Thin divider between each PM-company row (mirrors the AM tile's
row separator on the dashboard). First body row has no top
border so it sits flush under the header line. The grand-total
row already has a stronger navy border via .dash-tile-subtotal,
which wins specificity here. */
.dash-mgmt-co-table tbody tr + tr td {
border-top: 1px solid #f3f4f6;
}
[data-theme="dark"] .dash-mgmt-co-table tbody tr + tr td {
border-top-color: rgba(255, 255, 255, 0.07);
}
/* Sortable header indicators — mirror the .data-table.sortable
styling on the Operations page so click-to-sort affordances read
the same on both surfaces (subtle ⇅ at rest, ▲/▼ tinted when
active, pointer cursor on hover). Scoped to .dash-tile-table so
the headers in the regular AM / Financials kv-tables stay plain. */
.dash-tile-table.sortable thead th.sortable {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 0.9rem;
}
.dash-tile-table.sortable thead th.sortable::after {
content: '⇅';
position: absolute;
right: 0.2rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.7em;
opacity: 0.35;
}
.dash-tile-table.sortable thead th.sortable.sort-asc::after {
content: '▲';
opacity: 1;
color: var(--brand-navy, #1B4F76);
}
.dash-tile-table.sortable thead th.sortable.sort-desc::after {
content: '▼';
opacity: 1;
color: var(--brand-navy, #1B4F76);
}
.dash-tile-table.sortable thead th.sortable:hover {
color: var(--brand-navy, #1B4F76);
}
[data-theme="dark"] .dash-tile-table tr.dash-tile-subhead th {
color: #cbd5e1;
background: rgba(255, 255, 255, 0.05);
}
/* Occupancy Snapshot row click → property focus.
Each row carries data-property-code. Hover gets a subtle background
tint + cursor:pointer to signal clickability. The currently focused
row (server-rendered with .dash-row-focused) gets a stronger tint
plus a 3px navy left edge so the user can see at a glance which
property is driving the rest of the dashboard. The PORTFOLIO TOTAL
row keeps its existing subtotal styling but inherits the cursor
pointer + tooltip so the "click to clear" affordance is discoverable. */
.dash-occ-snapshot-table tbody tr[data-property-code] {
cursor: pointer;
transition: background-color 0.12s ease;
}
.dash-occ-snapshot-table tbody tr[data-property-code]:hover {
background: rgba(27, 79, 118, 0.05);
}
.dash-occ-snapshot-table tbody tr.dash-row-focused {
background: rgba(27, 79, 118, 0.10);
}
.dash-occ-snapshot-table tbody tr.dash-row-focused td:first-child {
/* 3px navy edge in lieu of a noisy box-shadow / outline. inset-box-
shadow keeps the border off the layout box so column widths stay
locked across focused / unfocused state — important because the
other tiles' widths cascade from the snapshot table's column
sizing on the same row. */
box-shadow: inset 3px 0 0 0 var(--brand-navy, #1B4F76);
}
.dash-occ-snapshot-table tbody tr.dash-row-focused:hover {
background: rgba(27, 79, 118, 0.14);
}
[data-theme="dark"] .dash-occ-snapshot-table tbody tr[data-property-code]:hover {
background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .dash-occ-snapshot-table tbody tr.dash-row-focused {
background: rgba(111, 168, 214, 0.10);
}
[data-theme="dark"] .dash-occ-snapshot-table tbody tr.dash-row-focused td:first-child {
box-shadow: inset 3px 0 0 0 var(--brand-navy-light, #6FA8D6);
}
.dash-tile-chart {
margin-top: 0.6rem;
/* Flex-grow to fill any remaining tile height — so when an
adjacent tile (e.g. Lease Expirations) is taller, the chart in
this tile stretches to match instead of leaving white space at
the bottom. min-height guards small-tile aesthetics. */
flex: 1 1 auto;
min-height: 145px;
position: relative;
}
.dash-tile-chart canvas {
position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
}
.dash-empty {
font-size: 0.78rem;
color: #9ca3af;
font-style: italic;
padding: 1rem 0;
}
/* Tile 3 has a 3-up sub-grid */
.dash-tile-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
/* Tile 6 — Asset Management single-header table layout.
One header at the top (Actual / Budget / Δ $ / Δ %), then sections:
ALL ASSET MANAGERS first (brand-navy emphasis), then individual AMs
below as compact 2-line blocks. Name rows visually distinct from
metric rows so the eye can group them at a glance. */
.dash-am-table {
font-size: 0.76rem;
}
.dash-am-name-row th {
padding-top: 0.55rem !important;
padding-bottom: 0.15rem !important;
font-weight: 600;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #374151;
border-top: 1px solid #f3f4f6;
text-align: left;
}
.dash-am-table tbody tr:first-child .dash-am-name-row th,
.dash-am-table tbody tr:first-child th {
border-top: none;
padding-top: 0.1rem !important;
}
.dash-am-name-row .muted {
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-size: 0.7rem;
color: #9ca3af;
}
.dash-am-total-label {
color: var(--brand-navy, #1B4F76) !important;
font-weight: 700 !important;
}
.dash-am-metric-label {
padding-left: 0.7rem !important;
font-weight: 400;
color: #4b5563;
}
/* ============================================================
Logo swap — show black wordmark in light mode, white in dark.
Both ![]() tags are emitted in base.html and toggled here.
Selectors mirror the depth of `.topbar .brand-logo img` higher
up in the file so they win the specificity match — otherwise
the generic .brand-logo img display rule keeps both visible.
============================================================ */
.topbar .brand-logo img.brand-logo-dark { display: none; }
[data-theme="dark"] .topbar .brand-logo img.brand-logo-light { display: none; }
[data-theme="dark"] .topbar .brand-logo img.brand-logo-dark { display: block; }
/* ============================================================
Dark-mode adjustments for the landing dashboard tiles.
The base [data-theme="dark"] block defines surface / text /
border tokens; this block redresses the dash-* components
so they pick up the dark palette instead of staying white.
============================================================ */
[data-theme="dark"] .dash-tile {
background: var(--surface, #1E293B);
border-color: var(--border, #2A3852);
color: var(--text, #E5EAF1);
}
[data-theme="dark"] .dash-tile-header {
border-bottom-color: var(--border, #2A3852);
}
[data-theme="dark"] .dash-tile-header h2 {
/* Use the soft brand-navy on a dark background it still pops
well, mirroring the section-title color used elsewhere. */
color: #6FA8D6;
}
[data-theme="dark"] .dash-tile-body { color: var(--text, #E5EAF1); }
[data-theme="dark"] .dash-tile-table thead th {
color: var(--text-muted, #7F8BA3);
border-bottom-color: var(--border, #2A3852);
}
[data-theme="dark"] .dash-tile-table tbody th {
color: var(--text-soft, #B4BFD0);
}
[data-theme="dark"] .dash-tile-table td { color: var(--text, #E5EAF1); }
[data-theme="dark"] .dash-tile-table td.muted { color: var(--text-muted, #7F8BA3); }
[data-theme="dark"] .dash-tile-table td.delta-neutral { color: var(--text-muted, #7F8BA3); }
[data-theme="dark"] .dash-empty { color: var(--text-muted, #7F8BA3); }
[data-theme="dark"] .dash-tile-dropdown {
background: var(--surface-alt, #182238);
border-color: var(--border, #2A3852);
color: var(--text, #E5EAF1);
}
[data-theme="dark"] .dash-tile-dropdown:hover {
border-color: var(--border-strong, #3D4F6E);
}
/* AM tile section dividers + per-AM labels */
[data-theme="dark"] .dash-am-name-row th {
color: var(--text-soft, #B4BFD0);
border-top-color: var(--border, #2A3852);
}
[data-theme="dark"] .dash-am-name-row .muted {
color: var(--text-muted, #7F8BA3);
}
[data-theme="dark"] .dash-am-total-label { color: #6FA8D6 !important; }
[data-theme="dark"] .dash-am-metric-label { color: var(--text-soft, #B4BFD0); }
/* Settings modal — same palette + dark card */
[data-theme="dark"] .dash-settings-card {
background: var(--surface, #1E293B);
color: var(--text, #E5EAF1);
}
[data-theme="dark"] .dash-settings-header {
border-bottom-color: var(--border, #2A3852);
}
[data-theme="dark"] .dash-settings-header h2 { color: #6FA8D6; }
[data-theme="dark"] .dash-settings-close { color: var(--text-muted, #7F8BA3); }
[data-theme="dark"] .dash-settings-close:hover { color: var(--text, #E5EAF1); }
[data-theme="dark"] .dash-settings-hint { color: var(--text-muted, #7F8BA3); }
[data-theme="dark"] .dash-settings-row {
background: var(--surface-alt, #182238);
border-color: var(--border, #2A3852);
}
[data-theme="dark"] .dash-settings-row:hover {
border-color: var(--border-strong, #3D4F6E);
}
[data-theme="dark"] .dash-settings-handle { color: var(--text-muted, #7F8BA3); }
[data-theme="dark"] .dash-settings-label { color: var(--text, #E5EAF1); }
[data-theme="dark"] .dash-settings-ghost {
background: var(--surface-hover, #243248);
}
[data-theme="dark"] .dash-settings-footer {
border-top-color: var(--border, #2A3852);
}
[data-theme="dark"] .dash-settings-reset {
background: var(--surface-alt, #182238);
border-color: var(--border, #2A3852);
color: var(--text-soft, #B4BFD0);
}
[data-theme="dark"] .dash-settings-reset:hover {
border-color: var(--border-strong, #3D4F6E);
}
[data-theme="dark"] .dash-settings-modal {
background: rgba(0, 0, 0, 0.65);
}
/* ============================================================
Dashboard Settings modal — gear-icon-triggered overlay that
lets the user show/hide tiles and reorder them via drag.
Plays nicely with SortableJS handle classes.
============================================================ */
.dash-settings-modal {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.dash-settings-modal[hidden] { display: none; }
.dash-settings-card {
background: white;
border-radius: 8px;
width: min(420px, 92vw);
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.dash-settings-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.dash-settings-header h2 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--brand-navy, #1B4F76);
letter-spacing: 0.02em;
}
.dash-settings-close {
background: none;
border: none;
font-size: 1.4rem;
color: #6b7280;
cursor: pointer;
padding: 0 0.25rem;
line-height: 1;
}
.dash-settings-close:hover { color: #111827; }
.dash-settings-body {
padding: 0.85rem 1rem;
overflow-y: auto;
flex: 1 1 auto;
}
.dash-settings-hint {
margin: 0 0 0.6rem;
font-size: 0.78rem;
color: #6b7280;
}
.dash-settings-list {
list-style: none;
padding: 0;
margin: 0;
}
.dash-settings-row {
display: flex;
align-items: center;
padding: 0.5rem 0.6rem;
border: 1px solid #e5e7eb;
border-radius: 6px;
margin-bottom: 0.4rem;
background: white;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dash-settings-row:hover {
border-color: var(--brand-navy-light, #2A6FA0);
}
.dash-settings-handle {
cursor: grab;
color: #9ca3af;
font-size: 1.1rem;
letter-spacing: -3px;
margin-right: 0.6rem;
user-select: none;
font-weight: 700;
}
.dash-settings-handle:active { cursor: grabbing; }
.dash-settings-label {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.85rem;
}
.dash-settings-label input[type=checkbox] {
accent-color: var(--brand-navy, #1B4F76);
width: 1rem;
height: 1rem;
cursor: pointer;
}
/* Per-tile width dropdown in the Settings modal. Sits at the right
edge of each row. Greyed via .is-muted when the user has Fixed grid
mode selected (the saved value persists but has no visible effect
until they switch back to Flexible). Wide-locked tiles get the
native :disabled state since their full-width is structural, not a
user-pref. */
.dash-settings-width {
flex: 0 0 auto;
margin-left: 0.5rem;
padding: 0.18rem 0.4rem;
font-size: 0.78rem;
border: 1px solid #d1d5db;
border-radius: 4px;
background: white;
color: #374151;
cursor: pointer;
min-width: 4.5rem;
}
.dash-settings-width:hover { border-color: #9ca3af; }
.dash-settings-width:focus {
outline: 2px solid var(--brand-navy, #1B4F76);
outline-offset: 1px;
}
.dash-settings-width.is-muted {
opacity: 0.55;
cursor: not-allowed;
}
.dash-settings-width:disabled {
background: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
}
[data-theme="dark"] .dash-settings-width {
background: var(--surface-alt, #182238);
border-color: var(--border, #2A3852);
color: var(--text, #E5EAF1);
}
[data-theme="dark"] .dash-settings-width:disabled {
background: rgba(255,255,255,0.04);
color: var(--text-muted, #7F8BA3);
}
.dash-settings-ghost {
opacity: 0.35;
background: #f3f4f6;
}
/* Tile-width / grid-mode toggle. Sits below the draggable tile list
inside the same Settings modal body. Visually a fieldset with two
stacked radio options; pattern mirrors .dash-settings-row spacing so
the modal reads as one cohesive list. */
.dash-settings-gridmode {
margin: 0.9rem 0 0.2rem;
padding: 0.55rem 0.7rem 0.65rem;
border: 1px solid #e5e7eb;
border-radius: 6px;
background: white;
}
.dash-settings-gridmode legend {
padding: 0 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dash-settings-gridmode-opt {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.1rem;
font-size: 0.85rem;
cursor: pointer;
}
.dash-settings-gridmode-opt input[type=radio] {
accent-color: var(--brand-navy, #1B4F76);
width: 1rem;
height: 1rem;
cursor: pointer;
margin: 0;
}
.dash-settings-gridmode-opt .muted {
color: #6b7280;
font-weight: 400;
}
[data-theme="dark"] .dash-settings-gridmode {
background: var(--surface-alt, #182238);
border-color: var(--border, #2A3852);
}
[data-theme="dark"] .dash-settings-gridmode legend { color: var(--text, #E5EAF1); }
[data-theme="dark"] .dash-settings-gridmode-opt .muted { color: var(--text-muted, #7F8BA3); }
/* Behavior toggles fieldset — checkbox sibling to dash-settings-gridmode.
Visually identical card so the modal reads as one cohesive list of
user-level configuration sections (Grid Mode / Behavior / …). */
.dash-settings-behavior {
margin: 0.6rem 0 0.2rem;
padding: 0.55rem 0.7rem 0.65rem;
border: 1px solid #e5e7eb;
border-radius: 6px;
background: white;
}
.dash-settings-behavior legend {
padding: 0 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dash-settings-behavior-opt {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.35rem 0.1rem;
font-size: 0.85rem;
cursor: pointer;
}
.dash-settings-behavior-opt input[type=checkbox] {
accent-color: var(--brand-navy, #1B4F76);
width: 1rem;
height: 1rem;
cursor: pointer;
margin: 0.15rem 0 0 0; /* nudge to align with first text line */
}
.dash-settings-behavior-opt .muted {
color: #6b7280;
font-weight: 400;
}
[data-theme="dark"] .dash-settings-behavior {
background: var(--surface-alt, #182238);
border-color: var(--border, #2A3852);
}
[data-theme="dark"] .dash-settings-behavior legend { color: var(--text, #E5EAF1); }
[data-theme="dark"] .dash-settings-behavior-opt .muted { color: var(--text-muted, #7F8BA3); }
/* ============================================================
Lease Expirations drill-down modal — opens when the user clicks
a bar in the Lease Expirations tile. Lists every resident whose
lease ends in that month, segmented by Renewed / Unknown / NTV /
Eviction. Modeled on dash-settings-modal so the two overlay
surfaces feel like a matched pair.
============================================================ */
.dash-drill-modal {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.dash-drill-modal[hidden] { display: none; }
.dash-drill-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
width: min(95vw, 1100px);
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.dash-drill-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1rem 1.25rem 0.5rem;
border-bottom: 1px solid #e5e7eb;
}
.dash-drill-header h2 {
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #1B4F76;
}
.dash-drill-subtitle {
font-size: 0.95rem;
color: #6b7280;
margin-top: 0.15rem;
font-weight: 500;
}
.dash-drill-close {
background: none;
border: 0;
font-size: 1.4rem;
cursor: pointer;
color: #6b7280;
padding: 0 0.25rem;
line-height: 1;
}
.dash-drill-close:hover { color: #111827; }
.dash-drill-totals {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #f3f4f6;
background: #fafbfc;
}
.expir-drill-total-chip {
display: inline-flex;
flex-direction: column;
padding: 0.35rem 0.75rem 0.35rem 0.6rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
min-width: 80px;
font-variant-numeric: tabular-nums;
}
.expir-drill-total-chip strong {
font-size: 1.1rem;
font-weight: 700;
color: #111827;
}
.expir-drill-total-chip .muted {
font-size: 0.7rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.expir-drill-total-chip.expir-drill-total-all {
border-left: 3px solid #1B4F76;
}
.dash-drill-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0.75rem 1.25rem 1.25rem;
}
.dash-drill-loading, .dash-drill-empty, .dash-drill-error {
text-align: center;
color: #6b7280;
padding: 2rem 1rem;
font-size: 0.9rem;
}
.dash-drill-error { color: #b91c1c; }
.expir-drill-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.expir-drill-table th {
text-align: left;
padding: 0.5rem 0.6rem;
font-size: 0.7rem;
font-weight: 600;
color: #4b5563;
text-transform: uppercase;
letter-spacing: 0.04em;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
}
.expir-drill-table th.num,
.expir-drill-table td.num { text-align: right; }
.expir-drill-table tbody td {
padding: 0.45rem 0.6rem;
border-bottom: 1px solid #f3f4f6;
color: #1f2937;
}
.expir-drill-table tbody tr:hover { background: #f9fafb; }
.expir-drill-seg-chip {
display: inline-block;
padding: 0.1rem 0.5rem;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
}
[data-theme="dark"] .dash-drill-card { background: #1E293B; color: #E5EAF1; }
[data-theme="dark"] .dash-drill-header { border-bottom-color: #2A3852; }
[data-theme="dark"] .dash-drill-header h2 { color: #6FA8D6; }
[data-theme="dark"] .dash-drill-subtitle { color: #7F8BA3; }
[data-theme="dark"] .dash-drill-close { color: #7F8BA3; }
[data-theme="dark"] .dash-drill-close:hover { color: #E5EAF1; }
[data-theme="dark"] .dash-drill-totals { background: #182238; border-bottom-color: #2A3852; }
[data-theme="dark"] .expir-drill-total-chip {
background: #1E293B; border-color: #2A3852;
}
[data-theme="dark"] .expir-drill-total-chip strong { color: #E5EAF1; }
[data-theme="dark"] .expir-drill-total-chip .muted { color: #7F8BA3; }
[data-theme="dark"] .expir-drill-table th {
background: #182238; color: #B9C2D2; border-bottom-color: #2A3852;
}
[data-theme="dark"] .expir-drill-table tbody td {
color: #E5EAF1; border-bottom-color: #2A3852;
}
[data-theme="dark"] .expir-drill-table tbody tr:hover { background: #182238; }
.dash-settings-footer {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-top: 1px solid #e5e7eb;
}
.dash-settings-reset,
.dash-settings-save {
font-size: 0.82rem;
padding: 0.4rem 0.8rem;
border-radius: 5px;
border: 1px solid #d1d5db;
background: white;
cursor: pointer;
color: #374151;
}
.dash-settings-reset:hover { border-color: #9ca3af; }
.dash-settings-save {
background: var(--brand-navy, #1B4F76);
border-color: var(--brand-navy, #1B4F76);
color: white;
font-weight: 500;
}
.dash-settings-save:hover {
background: var(--brand-navy-dark, #143958);
border-color: var(--brand-navy-dark, #143958);
}
/* ──────── /help page ────────
Renders the markdown-converted system-overview doc. Constrains
line length for readable prose, gives headings clear hierarchy,
styles tables to match the rest of the app. */
.help-page {
max-width: 920px;
margin: 1rem auto 4rem;
padding: 0 1.2rem;
}
.help-header h1 {
font-size: 1.4rem;
font-weight: 700;
color: var(--brand-navy, #1B4F76);
margin: 0.5rem 0 0.25rem;
letter-spacing: 0.01em;
}
.help-header p {
margin: 0 0 1rem;
font-size: 0.85rem;
}
.help-body {
font-size: 0.92rem;
line-height: 1.65;
color: #1F2937;
}
.help-body h1 { display: none; } /* doc's own H1 is the page header */
.help-body h2 {
font-size: 1.15rem;
font-weight: 700;
color: var(--brand-navy, #1B4F76);
border-bottom: 1px solid #E5E7EB;
padding-bottom: 0.3rem;
margin: 2.2rem 0 0.9rem;
scroll-margin-top: 70px; /* offset for sticky topbar on anchor jump */
}
.help-body h3 {
font-size: 1rem;
font-weight: 600;
color: var(--brand-navy, #1B4F76);
margin: 1.4rem 0 0.55rem;
scroll-margin-top: 70px;
}
.help-body h4 {
font-size: 0.92rem;
font-weight: 600;
margin: 1rem 0 0.45rem;
color: #374151;
}
.help-body p { margin: 0.55rem 0; }
.help-body ul, .help-body ol { padding-left: 1.4rem; }
.help-body li { margin: 0.25rem 0; }
.help-body code {
background: #F3F4F6;
border-radius: 3px;
padding: 0.05rem 0.35rem;
font-size: 0.85em;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color: #B91C1C;
}
.help-body pre {
background: #F8FAFC;
border: 1px solid #E5E7EB;
border-radius: 6px;
padding: 0.7rem 0.9rem;
overflow-x: auto;
font-size: 0.82rem;
line-height: 1.5;
}
.help-body pre code {
background: transparent;
padding: 0;
color: #1F2937;
}
.help-body blockquote {
margin: 0.6rem 0;
padding: 0.4rem 0.9rem;
border-left: 3px solid var(--brand-navy, #1B4F76);
background: rgba(27, 79, 118, 0.04);
color: #374151;
font-style: italic;
}
.help-body table {
border-collapse: collapse;
width: 100%;
margin: 0.9rem 0;
font-size: 0.85rem;
}
.help-body th, .help-body td {
border-bottom: 1px solid #E5E7EB;
padding: 0.45rem 0.65rem;
text-align: left;
vertical-align: top;
}
.help-body th {
background: var(--info-bg, #E3EEF7);
font-weight: 600;
color: var(--brand-navy, #1B4F76);
}
.help-body hr {
border: none;
border-top: 1px solid #E5E7EB;
margin: 2rem 0;
}
.help-body a {
color: var(--accent, #2563EB);
text-decoration: none;
border-bottom: 1px dotted currentColor;
}
.help-body a:hover { border-bottom-style: solid; }
/* Dark-mode variant for /help. */
[data-theme="dark"] .help-body { color: #E2E8F0; }
[data-theme="dark"] .help-body h2,
[data-theme="dark"] .help-body h3 {
color: #6FA8D6;
border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .help-body code {
background: rgba(255,255,255,0.06);
color: #FCA5A5;
}
[data-theme="dark"] .help-body pre {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .help-body pre code { color: #E2E8F0; }
[data-theme="dark"] .help-body blockquote {
background: rgba(255,255,255,0.04);
color: #CBD5E1;
}
[data-theme="dark"] .help-body th {
background: #1E3252;
color: #CBD5E1;
}
[data-theme="dark"] .help-body th,
[data-theme="dark"] .help-body td,
[data-theme="dark"] .help-body hr {
border-color: rgba(255,255,255,0.08);
}
|