hash deep links */
body.admin-app.admin-v2 .v2-bill-row.v2-highlight {
background: var(--v2-unlock-ring) !important;
box-shadow: inset 3px 0 0 0 var(--v2-unlock-border);
}
body.admin-app.admin-v2 .v2-apt-row.v2-highlight {
background: var(--v2-unlock-ring) !important;
box-shadow: inset 3px 0 0 0 var(--v2-unlock-border);
}
/* Mobile card fallback for the Properties list.
The table still renders, but on very small screens we
hide it and show a stack of cards instead. */
body.admin-app.admin-v2 .v2-prop-cards { display: none; }
@media (max-width: 640px) {
body.admin-app.admin-v2 .v2-prop-table-wrap { display: none; }
body.admin-app.admin-v2 .v2-prop-cards { display: flex; flex-direction: column; gap: var(--v2-gap-sm); }
}
body.admin-app.admin-v2 .v2-prop-card {
border: 1px solid var(--admin-border, #e2e8f0);
border-radius: 10px;
padding: var(--v2-pad-md);
background: var(--admin-card, #fff);
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--v2-gap-sm);
cursor: pointer;
}
body.admin-app.admin-v2 .v2-prop-card:hover {
border-color: var(--v2-unlock-border);
}
body.admin-app.admin-v2 .v2-prop-card img {
width: 72px; height: 72px;
border-radius: 8px;
object-fit: cover;
}
/* Filter bar for the Properties list */
body.admin-app.admin-v2 .v2-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--v2-gap-sm);
padding: var(--v2-pad-sm);
border: 1px solid var(--admin-border, #e2e8f0);
border-radius: 10px;
background: var(--admin-card, #fff);
margin-bottom: var(--v2-gap-md);
}
body.admin-app.admin-v2 .v2-filter-bar input,
body.admin-app.admin-v2 .v2-filter-bar select {
font-size: var(--v2-fs-md);
padding: 8px 12px;
border: 1px solid var(--admin-border, #e2e8f0);
border-radius: 6px;
background: var(--admin-card, #fff);
color: var(--admin-text, #0f172a);
}
body.admin-app.admin-v2 .v2-filter-bar .spacer { flex: 1; }
body.admin-app.admin-v2 .v2-btn-primary {
font-size: var(--v2-fs-md);
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
padding: 9px 16px;
border-radius: 6px;
background: var(--v2-unlock-border);
color: #fff;
border: 1px solid var(--v2-unlock-border);
cursor: pointer;
}
body.admin-app.admin-v2 .v2-btn-primary:hover {
filter: brightness(1.08);
}
body.admin-app.admin-v2 .v2-btn-ghost {
font-size: var(--v2-fs-md);
font-weight: 600;
letter-spacing: .03em;
padding: 8px 14px;
border-radius: 6px;
background: transparent;
color: var(--admin-text-soft, #475569);
border: 1px solid var(--admin-border, #e2e8f0);
cursor: pointer;
}
body.admin-app.admin-v2 .v2-btn-ghost:hover {
color: var(--v2-unlock-border);
border-color: var(--v2-unlock-border);
}
/* Dense property-list cell image */
body.admin-app.admin-v2 .v2-table td .v2-addr-cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
body.admin-app.admin-v2 .v2-table td .v2-addr-cell img {
width: 180px;
height: 100px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
body.admin-app.admin-v2 .v2-table td.v2-right { text-align: right; }
body.admin-app.admin-v2 .v2-table td.v2-center { text-align: center; }
/* Billing sub-tabs — same font weight + size as the left sidebar (16px)
so the typography reads as one cohesive nav system. Per Vick 2026-04-09. */
body.admin-app.admin-v2 .v2-billing-tabs {
gap: 8px;
padding: 10px 12px;
}
body.admin-app.admin-v2 .v2-billing-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--admin-border, #e2e8f0);
border-radius: 8px;
background: var(--admin-card, #fff);
color: var(--admin-text-soft, #475569);
font-size: 16px !important;
font-weight: 600;
letter-spacing: .02em;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: all .12s ease;
}
body.admin-app.admin-v2 .v2-billing-tab .v2-billing-tab-icon {
font-size: 18px !important;
line-height: 1;
}
body.admin-app.admin-v2 .v2-billing-tab .v2-billing-tab-label {
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
}
body.admin-app.admin-v2 .v2-billing-tab:hover {
background: var(--admin-card-soft, #f8fafc);
color: var(--admin-text, #0f172a);
border-color: var(--v2-unlock-border);
}
body.admin-app.admin-v2 .v2-billing-tab-active,
body.admin-app.admin-v2 .v2-billing-tab-active:hover {
background: rgba(8, 145, 178, 0.12);
color: #0e7490;
border-color: #06b6d4;
box-shadow: inset 0 0 0 1px #06b6d4;
}
/* Small count badge after labels */
body.admin-app.admin-v2 .v2-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
padding: 2px 8px;
height: 20px;
border-radius: 9999px;
background: var(--admin-card-soft, #f1f5f9);
color: var(--admin-text-soft, #475569);
font-size: var(--v2-fs-sm);
font-weight: 700;
letter-spacing: .02em;
margin-left: 6px;
}
/* ============================================================
SECTION 14 — Sidebar: refined, compact, professional
Revision 2 (2026-04-09). Previous version had per-menu color
stripes + gradient glow active states that looked like a
playful dashboard. This version follows the Stripe / Linear /
Notion / Vercel pattern: monochrome idle, subtle white/5 hover,
single cyan accent on active with a thin inset left stripe.
============================================================ */
/* Sidebar container — slightly narrower for density */
body.admin-app.admin-v2 aside.bg-slate-900 {
width: 15rem;
}
body.admin-app.admin-v2 #sidebar-nav {
padding: 0.6rem 0.45rem !important;
gap: 0.1rem;
}
/* All sidebar buttons (top list + pinned footer) — refined.
Sized 16px per Vick 2026-04-09 (he said "menu fan size 14pt"). */
body.admin-app.admin-v2 aside .sidebar-menu-item button,
body.admin-app.admin-v2 aside > div:last-child > button {
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
padding: 0.75rem 0.95rem !important;
border: none !important;
border-radius: 8px !important;
color: rgba(226, 232, 240, 0.78) !important;
background: transparent !important;
box-shadow: none !important;
position: relative;
transition: background-color 0.12s ease, color 0.12s ease;
}
/* Drag handle — hidden until row hover, subtle */
body.admin-app.admin-v2 .sidebar-menu-item .drag-handle {
opacity: 0;
font-size: 0.7rem !important;
transition: opacity 0.15s ease;
}
body.admin-app.admin-v2 .sidebar-menu-item:hover .drag-handle {
opacity: 0.35;
}
/* Icons — bumped to match the larger label */
body.admin-app.admin-v2 .sidebar-menu-item button > span:nth-child(2),
body.admin-app.admin-v2 aside > div:last-child > button > span:first-child {
font-size: 18px !important;
line-height: 1;
display: inline-flex;
width: 1.45rem;
justify-content: center;
filter: none !important;
transform: none !important;
opacity: 0.85;
}
/* Labels — 16px, no uppercase shoutiness */
body.admin-app.admin-v2 .sidebar-menu-item button > span:last-child,
body.admin-app.admin-v2 aside > div:last-child > button > span:last-child {
font-size: 16px !important;
letter-spacing: 0.02em !important;
font-weight: 600 !important;
text-transform: none !important;
}
/* Hover — subtle white tint, no glow, no shadow */
body.admin-app.admin-v2 aside .sidebar-menu-item button:hover,
body.admin-app.admin-v2 aside > div:last-child > button:hover {
background: rgba(255, 255, 255, 0.05) !important;
color: rgba(241, 245, 249, 0.95) !important;
box-shadow: none !important;
}
body.admin-app.admin-v2 aside .sidebar-menu-item button:hover > span:nth-child(2),
body.admin-app.admin-v2 aside > div:last-child > button:hover > span:first-child {
opacity: 1;
}
/* Active — single refined cyan: background tint + thin inset left stripe.
Relies on the `.bg-cyan-600` class Alpine toggles on the active item. */
body.admin-app.admin-v2 aside .sidebar-menu-item button.bg-cyan-600,
body.admin-app.admin-v2 aside > div:last-child > button.bg-cyan-600 {
background: rgba(8, 145, 178, 0.18) !important;
color: #a5f3fc !important;
box-shadow: inset 2px 0 0 #06b6d4 !important;
font-weight: 700 !important;
}
body.admin-app.admin-v2 aside .sidebar-menu-item button.bg-cyan-600 > span:nth-child(2),
body.admin-app.admin-v2 aside > div:last-child > button.bg-cyan-600 > span:first-child {
opacity: 1;
color: #67e8f9;
}
body.admin-app.admin-v2 aside .sidebar-menu-item button.bg-cyan-600 > span:last-child,
body.admin-app.admin-v2 aside > div:last-child > button.bg-cyan-600 > span:last-child {
color: #a5f3fc !important;
}
/* Pinned LOGS + SETTINGS footer — just a subtle top border, same styling */
body.admin-app.admin-v2 aside > div:last-child {
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
background: transparent !important;
padding: 0.35rem 0.45rem 0.5rem !important;
}
/* Sidebar logo plate — tighter padding, less shouty */
body.admin-app.admin-v2 aside > div:first-child {
padding: 1.1rem 0.75rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.admin-app.admin-v2 aside > div:first-child img {
max-height: 56px !important;
}
/* ============================================================
SECTION 15 — Status pill color coding (vivid, semantic)
============================================================ */
body.admin-app.admin-v2 .status-pill,
body.admin-app.admin-v2 .v2-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.75rem !important;
border-radius: 9999px !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
border: 1px solid transparent;
white-space: nowrap;
}
/* Property / unit status */
body.admin-app.admin-v2 .status-available,
body.admin-app.admin-v2 .v2-pill-available { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.4); }
body.admin-app.admin-v2 .status-rented,
body.admin-app.admin-v2 .v2-pill-rented { background: rgba(6,182,212,0.18) !important; color: #67e8f9 !important; border-color: rgba(6,182,212,0.4); }
body.admin-app.admin-v2 .status-offline,
body.admin-app.admin-v2 .v2-pill-offline { background: rgba(100,116,139,0.18) !important; color: #94a3b8 !important; border-color: rgba(100,116,139,0.4); }
body.admin-app.admin-v2 .status-vacant,
body.admin-app.admin-v2 .v2-pill-vacant { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.4); }
/* Customer lifecycle status */
body.admin-app.admin-v2 .v2-pill-active,
body.admin-app.admin-v2 .status-active { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.4); }
body.admin-app.admin-v2 .v2-pill-potential,
body.admin-app.admin-v2 .status-potential { background: rgba(59,130,246,0.18) !important; color: #93c5fd !important; border-color: rgba(59,130,246,0.4); }
body.admin-app.admin-v2 .v2-pill-past,
body.admin-app.admin-v2 .status-past { background: rgba(100,116,139,0.18) !important; color: #94a3b8 !important; border-color: rgba(100,116,139,0.4); }
body.admin-app.admin-v2 .v2-pill-disabled,
body.admin-app.admin-v2 .status-disabled { background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,0.4); }
/* Invoice / payment status */
body.admin-app.admin-v2 .v2-pill-paid,
body.admin-app.admin-v2 .status-paid { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.4); }
body.admin-app.admin-v2 .v2-pill-overdue,
body.admin-app.admin-v2 .status-overdue { background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,0.4); }
body.admin-app.admin-v2 .v2-pill-grace,
body.admin-app.admin-v2 .status-grace { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.4); }
body.admin-app.admin-v2 .v2-pill-pending,
body.admin-app.admin-v2 .status-pending { background: rgba(168,85,247,0.18) !important; color: #d8b4fe !important; border-color: rgba(168,85,247,0.4); }
body.admin-app.admin-v2 .v2-pill-draft,
body.admin-app.admin-v2 .status-draft { background: rgba(100,116,139,0.18) !important; color: #94a3b8 !important; border-color: rgba(100,116,139,0.4); }
/* ============================================================
SECTION 16 — Brand badges (per-company color coding)
============================================================ */
body.admin-app.admin-v2 .company-badge {
font-size: 0.7rem !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
padding: 0.35rem 0.85rem !important;
border-radius: 9999px !important;
border: 1px solid transparent;
text-transform: uppercase;
}
/* Per-brand color tints by company name (case-insensitive via attribute) */
body.admin-app.admin-v2 .company-badge[data-brand="schetoora"],
body.admin-app.admin-v2 .company-badge[title*="CHETOORA" i] {
background: rgba(6,182,212,0.20) !important;
color: #67e8f9 !important;
border-color: rgba(6,182,212,0.5);
}
body.admin-app.admin-v2 .company-badge[data-brand="rnvn"],
body.admin-app.admin-v2 .company-badge[title*="RNVN" i] {
background: rgba(16,185,129,0.20) !important;
color: #6ee7b7 !important;
border-color: rgba(16,185,129,0.5);
}
body.admin-app.admin-v2 .company-badge[data-brand="northeast"],
body.admin-app.admin-v2 .company-badge[title*="NORTH EAST" i],
body.admin-app.admin-v2 .company-badge[title*="NORTHEAST" i] {
background: rgba(239,68,68,0.20) !important;
color: #fca5a5 !important;
border-color: rgba(239,68,68,0.5);
}
/* Brand short codes shown in the Properties table BRAND column.
Driven by `v2-brand-{slug}` class binding in admin/index.html (where the slug
is the lowercase company short code from propertiesToTableRows). */
body.admin-app.admin-v2 .v2-brand-scllc,
body.admin-app.admin-v2 .v2-brand-sc {
background: rgba(6,182,212,0.22) !important;
color: #67e8f9 !important;
border: 1px solid rgba(6,182,212,0.55) !important;
font-weight: 800 !important;
letter-spacing: 0.10em !important;
}
body.admin-app.admin-v2 .v2-brand-rnvn {
background: rgba(16,185,129,0.22) !important;
color: #6ee7b7 !important;
border: 1px solid rgba(16,185,129,0.55) !important;
font-weight: 800 !important;
letter-spacing: 0.10em !important;
}
body.admin-app.admin-v2 .v2-brand-rrusa,
body.admin-app.admin-v2 .v2-brand-mmusa {
background: rgba(239,68,68,0.22) !important;
color: #fca5a5 !important;
border: 1px solid rgba(239,68,68,0.55) !important;
font-weight: 800 !important;
letter-spacing: 0.10em !important;
}
/* ============================================================
SECTION 17 — Rent Collection row tinting (dark-mode aware)
2026-04-09: per Vick — green=paid on time, yellow=2-5th unpaid,
red=after 5th unpaid. Uses semi-transparent rgba so the same
tint works on light AND dark backgrounds without being washed out.
============================================================ */
body.admin-app.admin-v2 tr.rent-row {
transition: background-color 0.2s ease;
border-left: 4px solid transparent;
}
/* Paid — emerald green */
body.admin-app.admin-v2 tr.rent-row-paid,
body.admin-app.admin-v2 tr.rent-row-on_time {
background-color: rgba(16, 185, 129, 0.10) !important;
border-left-color: #10b981 !important;
}
body.admin-app.admin-v2 tr.rent-row-paid:hover,
body.admin-app.admin-v2 tr.rent-row-on_time:hover {
background-color: rgba(16, 185, 129, 0.18) !important;
}
/* Grace period (2nd-5th of month, unpaid) — amber/yellow */
body.admin-app.admin-v2 tr.rent-row-warning {
background-color: rgba(245, 158, 11, 0.12) !important;
border-left-color: #f59e0b !important;
}
body.admin-app.admin-v2 tr.rent-row-warning:hover {
background-color: rgba(245, 158, 11, 0.20) !important;
}
/* Late (>5th of month, unpaid) — red */
body.admin-app.admin-v2 tr.rent-row-late {
background-color: rgba(239, 68, 68, 0.12) !important;
border-left-color: #ef4444 !important;
}
body.admin-app.admin-v2 tr.rent-row-late:hover {
background-color: rgba(239, 68, 68, 0.20) !important;
}
/* Neutral / draft / void — no tint */
body.admin-app.admin-v2 tr.rent-row-neutral {
background-color: transparent;
border-left-color: transparent;
}
/* ============================================================
SECTION 18 — Typography + table baseline (cleaned 2026-04-10)
Removed: global h1-h4 size overrides, global input 11px override,
table-layout:fixed, 6px padding — all superseded by Section 20.
Kept: right-align numeric cells, zebra striping, hover.
============================================================ */
/* Right-align all numeric + currency cells */
body.admin-app.admin-v2 .v2-table th.v2-right,
body.admin-app.admin-v2 .v2-table td.v2-right {
text-align: right !important;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
/* Zebra striping for easier row tracking */
body.admin-app.admin-v2 .v2-table tbody tr:nth-child(even) {
background: rgba(148, 163, 184, 0.04);
}
/* ============================================================
Per-column widths (explicit) — sums to 100% of the fixed-layout
table. Status gets enough room so "AVAILABLE" pill never truncates.
Address gets only what it needs; recovered space goes to Tenant + Status.
============================================================ */
/* Default column widths — sums to 100% for the 11-col visible layout:
Status(4) + Address(15) + Brand(7) + Apts(5) + Tenant(15) + Rent(9)
+ Value(10) + CityTax(8) + SchoolTax(8) + Insurance(8) + Assessed(8) + Gear(3) = 100%
Value column added 2026-04-09 per Vick (Recommended market value). */
body.admin-app.admin-v2 .v2-table th.v2-col-address,
body.admin-app.admin-v2 .v2-table td.v2-col-address { width: 15%; max-width: 0; padding-left: 4px !important; padding-right: 4px !important; }
body.admin-app.admin-v2 .v2-table th.v2-col-company,
body.admin-app.admin-v2 .v2-table td.v2-col-company { width: 7%; }
body.admin-app.admin-v2 .v2-table th.v2-col-units,
body.admin-app.admin-v2 .v2-table td.v2-col-units { width: 5%; }
body.admin-app.admin-v2 .v2-table th.v2-col-tenant,
body.admin-app.admin-v2 .v2-table td.v2-col-tenant { width: 15%; max-width: 0; }
body.admin-app.admin-v2 .v2-table th.v2-col-rent_actual,
body.admin-app.admin-v2 .v2-table td.v2-col-rent_actual { width: 9%; }
body.admin-app.admin-v2 .v2-table th.v2-col-rent_potential,
body.admin-app.admin-v2 .v2-table td.v2-col-rent_potential { width: 9%; }
body.admin-app.admin-v2 .v2-table th.v2-col-market_value,
body.admin-app.admin-v2 .v2-table td.v2-col-market_value { width: 10%; }
body.admin-app.admin-v2 .v2-table th.v2-col-city_tax,
body.admin-app.admin-v2 .v2-table td.v2-col-city_tax { width: 8%; }
body.admin-app.admin-v2 .v2-table th.v2-col-school_tax,
body.admin-app.admin-v2 .v2-table td.v2-col-school_tax { width: 8%; }
body.admin-app.admin-v2 .v2-table th.v2-col-insurance,
body.admin-app.admin-v2 .v2-table td.v2-col-insurance { width: 8%; }
body.admin-app.admin-v2 .v2-table th.v2-col-assessment,
body.admin-app.admin-v2 .v2-table td.v2-col-assessment { width: 8%; }
body.admin-app.admin-v2 .v2-table th.v2-col-occupancy_pct,
body.admin-app.admin-v2 .v2-table td.v2-col-occupancy_pct { width: 6%; }
body.admin-app.admin-v2 .v2-table th.v2-col-net_ytd,
body.admin-app.admin-v2 .v2-table td.v2-col-net_ytd { width: 10%; }
body.admin-app.admin-v2 .v2-table th.v2-col-status,
body.admin-app.admin-v2 .v2-table td.v2-col-status { width: 11%; min-width: 105px; overflow: visible !important; }
/* Gear column — absolute 32px. Ensures it doesn't steal width from data columns. */
body.admin-app.admin-v2 .v2-table thead th:last-child,
body.admin-app.admin-v2 .v2-table tbody td:last-child {
width: 32px;
padding: 6px 4px !important;
}
/* ============================================================
Excel-style column resize (2026-04-09)
A 4px handle on the right edge of each th. Drag to resize.
============================================================ */
body.admin-app.admin-v2 .v2-table th {
position: relative;
}
body.admin-app.admin-v2 .v2-col-resizer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 5px;
cursor: col-resize;
user-select: none;
background: transparent;
transition: background 0.15s ease;
z-index: 2;
}
body.admin-app.admin-v2 .v2-col-resizer:hover {
background: rgba(6, 182, 212, 0.55);
}
body.admin-app.admin-v2.v2-resizing,
body.admin-app.admin-v2.v2-resizing * {
cursor: col-resize !important;
user-select: none !important;
}
/* ============================================================
Status as a small colored dot — 2026-04-09 per Vick
Semantics (inverted from the default):
GREEN = rented (tenant in, rent coming in — good)
RED = vacant / available (no tenant paying — bad)
GRAY = offline (not listed / maintenance)
With a CSS hover popover showing the status text.
============================================================ */
body.admin-app.admin-v2 .v2-status-wrap {
position: relative;
display: inline-block;
line-height: 0;
}
body.admin-app.admin-v2 .v2-status-dot {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.45);
cursor: pointer;
vertical-align: middle;
transition: transform 0.15s ease;
}
body.admin-app.admin-v2 .v2-status-dot:hover {
transform: scale(1.3);
}
/* Green — rented (good) */
body.admin-app.admin-v2 .v2-status-dot-rented {
background: #10b981;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.75);
}
/* Red — available / vacant (no tenant) */
body.admin-app.admin-v2 .v2-status-dot-available,
body.admin-app.admin-v2 .v2-status-dot-vacant {
background: #ef4444;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.75);
}
/* Gray — offline */
body.admin-app.admin-v2 .v2-status-dot-offline {
background: #64748b;
}
/* ============================================================
Status hover card — full info panel, not a tiny tooltip.
Shows status, address, apartment count, lead tenant, rent.
2026-04-09 per Vick: "it's just a little box that you cannot
see anything" → redesigned as a proper info card.
============================================================ */
body.admin-app.admin-v2 .v2-status-card {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px) scale(0.96);
width: 280px;
background: #0f172a;
color: #e2e8f0;
border-radius: 10px;
border: 1px solid rgba(165, 243, 252, 0.35);
padding: 12px 14px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 10000;
box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(165, 243, 252, 0.12);
text-align: left;
font-family: 'Inter', system-ui, sans-serif;
}
body.admin-app.admin-v2 .v2-status-wrap:hover .v2-status-card {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
/* Arrow pointing down to the dot */
body.admin-app.admin-v2 .v2-status-card::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #0f172a;
filter: drop-shadow(0 1px 0 rgba(165, 243, 252, 0.35));
}
/* Title — RENTED / VACANT / OFFLINE with color */
body.admin-app.admin-v2 .v2-status-card-title {
margin: 0 0 4px;
font-family: 'Cinzel', Georgia, serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.18em;
line-height: 1.2;
}
body.admin-app.admin-v2 .v2-title-rented { color: #10b981; }
body.admin-app.admin-v2 .v2-title-vacant { color: #ef4444; }
body.admin-app.admin-v2 .v2-title-offline { color: #94a3b8; }
/* Address underneath */
body.admin-app.admin-v2 .v2-status-card-addr {
margin: 0 0 10px;
font-family: 'Cinzel', Georgia, serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
color: #f1f5f9;
line-height: 1.3;
}
/* Data rows */
body.admin-app.admin-v2 .v2-status-card-rows {
border-top: 1px solid rgba(148, 163, 184, 0.15);
padding-top: 8px;
}
body.admin-app.admin-v2 .v2-status-card-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
line-height: 1.6;
color: #94a3b8;
}
body.admin-app.admin-v2 .v2-status-card-val {
font-weight: 700;
color: #f1f5f9;
font-variant-numeric: tabular-nums;
}
body.admin-app.admin-v2 .v2-status-card-val.v2-rent-good {
color: #10b981;
}
body.admin-app.admin-v2 .v2-status-card-val.v2-cost-amber {
color: #f59e0b;
}
/* Second group inside the status card (taxes/insurance) */
body.admin-app.admin-v2 .v2-status-card-rows + .v2-status-card-rows {
margin-top: 6px;
border-top: 1px dashed rgba(148, 163, 184, 0.18);
}
/* Multi-tenant stack in the Tenant column — one BLOCK per unit (Upper / Lower).
Each block lists every occupant: lease holder first in bold + cyan, then any
co-occupants (husband/wife/roommate) underneath in lighter weight. */
body.admin-app.admin-v2 .v2-tenant-stack {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.2;
}
body.admin-app.admin-v2 .v2-tenant-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-width: 0;
}
body.admin-app.admin-v2 .v2-tenant-block + .v2-tenant-block {
border-top: 1px dashed rgba(148, 163, 184, 0.18);
padding-top: 3px;
}
body.admin-app.admin-v2 .v2-tenant-unit {
color: #94a3b8;
font-weight: 700;
font-size: 9px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
body.admin-app.admin-v2 .v2-tenant-name {
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
body.admin-app.admin-v2 .v2-tenant-primary {
font-weight: 700;
color: var(--admin-text, #0f172a);
}
body.admin-app.admin-v2 .v2-tenant-cooccupant {
font-weight: 500;
color: var(--admin-text-soft, #475569);
font-size: 9.5px;
padding-left: 8px;
}
/* Tenant column needs more vertical room for 2-3 lines of tenants */
body.admin-app.admin-v2 .v2-table td.v2-col-tenant {
padding-top: 5px !important;
padding-bottom: 5px !important;
white-space: normal;
}
body.admin-app.admin-v2 .v2-status-card-hint {
margin: 8px 0 0;
font-size: 9px;
color: rgba(148, 163, 184, 0.55);
text-align: center;
font-style: italic;
padding-top: 6px;
border-top: 1px dashed rgba(148, 163, 184, 0.15);
}
/* Status column now only needs ~40px (vs 105px for the pill) */
body.admin-app.admin-v2 .v2-table th.v2-col-status,
body.admin-app.admin-v2 .v2-table td.v2-col-status {
width: 4% !important;
min-width: 40px !important;
max-width: 56px !important;
text-align: center;
}
/* Dashboard sub-tab nav — STICKY at top of the page so owner always sees it
while scrolling long dashboard content. 2026-04-09 per Vick. */
body.admin-app.admin-v2 .dash-subnav {
position: sticky;
top: 0;
z-index: 20;
background: var(--admin-bg, #0a1424);
padding: 8px 0;
margin: -8px 0 16px !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
body.admin-app.admin-v2.dark .dash-subnav {
background: #0a1424;
}
body.admin-app.admin-v2:not(.dark) .dash-subnav {
background: #f8fafc;
}
/* Tenant column — allow ellipsis for long names */
body.admin-app.admin-v2 .v2-table td.v2-col-tenant .v2-link,
body.admin-app.admin-v2 .v2-table td.v2-col-tenant .v2-muted {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* Status column — ensure the pill has room to breathe */
body.admin-app.admin-v2 .v2-table td.v2-col-status .v2-pill {
max-width: 100%;
white-space: nowrap;
}
body.admin-app.admin-v2 .v2-addr-cell {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
max-width: 100%;
position: relative; /* popover anchor */
}
/* Thumbnail wrapper — the element that triggers the hover popover */
body.admin-app.admin-v2 .v2-thumb-wrap {
position: relative;
width: 42px;
height: 30px;
flex-shrink: 0;
border-radius: 3px;
overflow: visible;
}
body.admin-app.admin-v2 .v2-thumb-wrap > img {
width: 100%;
height: 100%;
border-radius: 3px;
object-fit: cover;
border: 1px solid rgba(148, 163, 184, 0.2);
display: block;
background: rgba(148, 163, 184, 0.08);
}
/* Hover popover — bigger preview + address caption.
Only visible when the thumb wrapper is hovered. */
body.admin-app.admin-v2 .v2-thumb-popover {
position: absolute;
top: 50%;
left: calc(100% + 12px);
transform: translateY(-50%) scale(0.94);
width: 340px;
background: var(--admin-card, #0f172a);
border: 1px solid rgba(165, 243, 252, 0.35);
border-radius: 8px;
padding: 6px;
box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(165, 243, 252, 0.15);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 9999;
}
body.admin-app.admin-v2 .v2-thumb-popover > img {
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 5px;
display: block;
}
body.admin-app.admin-v2 .v2-thumb-popover-addr {
margin: 6px 4px 2px;
font-family: 'Cinzel', Georgia, serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #a5f3fc;
text-align: center;
}
body.admin-app.admin-v2 .v2-thumb-wrap:hover .v2-thumb-popover {
opacity: 1;
transform: translateY(-50%) scale(1);
}
/* Address text — UPPERCASE, tabular-friendly, truncated with ellipsis */
body.admin-app.admin-v2 .v2-addr-text {
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.02em !important;
text-transform: uppercase;
white-space: normal !important;
overflow: visible !important;
word-break: normal !important;
color: var(--admin-text, #0f172a) !important;
min-width: 0;
flex: 1 1 auto;
color: #f1f5f9;
}
body.admin-app.admin-v2 .v2-addr-text:hover {
color: #67e8f9;
}
/* Column width allocation — sums to ~100% of the available main-content width.
Optimized for MacBook Air 13" (~1200px after the 240px sidebar). */
body.admin-app.admin-v2 .v2-table th[class*="v2-sortable"]:has(span:contains("Brand")) { width: 8%; }
/* Can't use :has with text — use nth-child-agnostic approach via column ID.
Instead, let Address claim 22% and let the remaining 9 columns split 78%
evenly via the default table-layout:fixed distribution. That's ~8.6% each
which is ~105px per column at 1200px. Tight but readable. */
/* Drag handle on each row — appears at start of Address cell */
body.admin-app.admin-v2 .prop-row-grip {
display: inline-block;
font-size: 10px;
color: rgba(148, 163, 184, 0.5);
cursor: grab;
user-select: none;
padding: 0 2px;
}
body.admin-app.admin-v2 .prop-row-grip:active { cursor: grabbing; }
body.admin-app.admin-v2 .prop-row.sortable-ghost {
opacity: 0.35;
background: rgba(6, 182, 212, 0.12) !important;
}
body.admin-app.admin-v2 .prop-row.sortable-chosen {
background: rgba(6, 182, 212, 0.08) !important;
}
/* Semantic color coding for money cells (C15 — consistent color grading) */
body.admin-app.admin-v2 .v2-money-pos { color: #10b981 !important; font-weight: 600; }
body.admin-app.admin-v2 .v2-money-pos a,
body.admin-app.admin-v2 .v2-money-pos .v2-link { color: #10b981 !important; }
body.admin-app.admin-v2 .v2-money-neg { color: #ef4444 !important; font-weight: 600; }
body.admin-app.admin-v2 .v2-money-neg a,
body.admin-app.admin-v2 .v2-money-neg .v2-link { color: #ef4444 !important; }
body.admin-app.admin-v2 .v2-money-cost { color: #f59e0b !important; }
body.admin-app.admin-v2 .v2-money-cost .v2-link { color: #f59e0b !important; }
body.admin-app.admin-v2 .v2-money-neutral { color: #94a3b8; }
body.admin-app.admin-v2 .v2-money-neutral .v2-link { color: #94a3b8 !important; }
body.admin-app.admin-v2 .v2-muted { color: rgba(148, 163, 184, 0.5); }
/* ----- Flat table variant — sits directly on the page background (no card border).
Per Vick 2026-04-09: "should be directly on the website page" — the bordered card
wrapper made the table look like it was floating in an iframe. ----- */
body.admin-app.admin-v2 .v2-table-flat {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.admin-app.admin-v2 .v2-table-flat thead th {
background: transparent !important;
border-top: none !important;
}
body.admin-app.admin-v2 .v2-table-flat tbody tr {
background: transparent !important;
}
body.admin-app.admin-v2 .v2-table-flat tbody tr:nth-child(even) {
background: rgba(148, 163, 184, 0.06) !important;
}
body.admin-app.admin-v2 .v2-table-flat tbody tr:hover {
background: rgba(6, 182, 212, 0.10) !important;
}
body.admin-app.admin-v2 .v2-table-flat tbody td {
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
/* ----- Column totals row (tfoot) — sums for $ columns, avg for %, count for address ----- */
body.admin-app.admin-v2 .v2-table-totals {
position: sticky;
bottom: 0;
z-index: 2;
}
body.admin-app.admin-v2 .v2-table-totals tr {
background: #f1f5f9 !important;
}
body.admin-app.admin-v2.dark .v2-table-totals tr {
background: #1e293b !important;
}
body.admin-app.admin-v2 .v2-table-totals td {
padding: 12px 12px !important;
font-weight: 700 !important;
font-size: var(--v2-fs-md, 14px) !important;
border-top: 2px solid #cbd5e1 !important;
border-bottom: none !important;
color: #0f172a !important;
background: #f1f5f9 !important;
box-sizing: border-box;
}
body.admin-app.admin-v2.dark .v2-table-totals td {
background: #1e293b !important;
color: #f1f5f9 !important;
border-top-color: #334155 !important;
}
body.admin-app.admin-v2 .v2-table-totals .v2-totals-label-cell {
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569 !important;
font-size: var(--v2-fs-sm, 13px) !important;
}
body.admin-app.admin-v2.dark .v2-table-totals .v2-totals-label-cell {
color: #94a3b8 !important;
}
/* Money columns in the totals row inherit the column color so the eye can scan */
body.admin-app.admin-v2 .v2-table-totals .v2-col-rent_actual { color: #059669 !important; }
body.admin-app.admin-v2 .v2-table-totals .v2-col-city_tax,
body.admin-app.admin-v2 .v2-table-totals .v2-col-school_tax,
body.admin-app.admin-v2 .v2-table-totals .v2-col-insurance { color: #d97706 !important; }
body.admin-app.admin-v2 .v2-table-totals .v2-col-assessment { color: #0f172a !important; }
body.admin-app.admin-v2.dark .v2-table-totals .v2-col-assessment { color: #f1f5f9 !important; }
/* ============================================================
SECTION 18 — Unified Page Layout System
Standard layout: .page-header → .page-stats → .page-tabs → content
All pages use these classes for consistent look.
============================================================ */
/* --- Page header (title + subtitle + action buttons) --- */
body.admin-app.admin-v2 .page-header {
display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;
}
body.admin-app.admin-v2 .page-header-title {
font-size:22px !important; font-weight:700; color:var(--admin-text,#0f172a); margin:0; letter-spacing:-.3px;
}
body.admin-app.admin-v2 .page-header-sub {
font-size:14px !important; color:var(--admin-text-muted,#64748b); margin:4px 0 0;
}
body.admin-app.admin-v2 .page-header-actions { display:flex; gap:10px; align-items:center; }
/* --- Stat cards row --- */
body.admin-app.admin-v2 .page-stats {
display:grid; gap:14px; margin-bottom:20px;
}
body.admin-app.admin-v2 .page-stats.cols-4 { grid-template-columns:repeat(4,1fr); }
body.admin-app.admin-v2 .page-stats.cols-5 { grid-template-columns:repeat(5,1fr); }
@media (max-width:900px) { body.admin-app.admin-v2 .page-stats.cols-4, body.admin-app.admin-v2 .page-stats.cols-5 { grid-template-columns:repeat(2,1fr); } }
body.admin-app.admin-v2 .page-stat {
background:var(--admin-card,#fff); border-radius:12px; padding:18px 20px;
box-shadow:0 1px 4px rgba(0,0,0,.06); border:1px solid var(--admin-border,#f1f5f9);
transition:all .15s;
}
body.admin-app.admin-v2 .page-stat:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); }
body.admin-app.admin-v2 .page-stat-label {
font-size:12px !important; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
margin:0 0 8px; color:var(--admin-text-muted,#64748b);
}
body.admin-app.admin-v2 .page-stat-value {
font-size:28px !important; font-weight:800; margin:0; line-height:1; color:var(--admin-text,#0f172a);
}
body.admin-app.admin-v2 .page-stat-sub {
font-size:11px !important; color:var(--admin-text-muted,#94a3b8); margin:6px 0 0;
}
/* --- Page tabs (standard for all pages) ---
Matches the billing tab style: 16px, bordered cards, capitalize.
Use: