/* Copyright (c) 2026 eewzoo.com. SPDX-License-Identifier: MIT */ /* =========================================================================== site.css – a small amount of custom styling on top of Bootstrap. Most styling comes from Bootstrap's classes; we only add what Bootstrap doesn't give us (the sidebar layout and a couple of tweaks). =========================================================================== */ /* --------------------------------------------------------------------------- BUTTONS: TWO TONES, AND RED FOR THE ONES YOU CANNOT UNDO. There is no CSS below for this — it is a rule about which Bootstrap classes a view may use, and it is written here because this is where somebody looks when a button looks wrong. btn-primary SOLID BLUE. The primary action, and there is ONE PER ENCLOSURE — one in the page header, and one in each form or card that can be submitted. Two blues inside the same box means one of them is lying. In a header that is CREATE on a list ("New tenant") and EDIT on a record ("Edit tenant"). Edit earns it because that is what you came to the record to do; the rest of that header only navigates, and a header of nothing but grey reads as unfinished. A row-level Edit inside a table stays grey — it is one of many, and blueing them all would make a page of blue. Inside a form it is the commit: Save, Post, Approve, Pay, Invite. btn-outline-secondary GREY OUTLINE. Everything else — Open, Edit, Back, Cancel, Filter, Print, View, Add, Reopen. btn-outline-danger RED OUTLINE. Only what cannot be undone: Delete, Void, Revoke, Write off. btn-link A link that happens to sit among buttons ("+ Add a pet"). Not a tone — a shape. NOT ALLOWED: btn-success, btn-info, btn-warning, btn-outline-primary and friends. They are why this rule exists — "Approve" was green on one page and cyan on the next, "Filter" was styled four ways, and btn-outline-primary had no meaning at all, covering Filter, Save, Open, View, Print, Add, Refresh and Reopen between them. SIZE IS CONTEXT, NOT EMPHASIS: btn-sm inside a table row or a card's inline form, the default size in a page header or a form footer. Never py-0 — it made a third height, so one page carried buttons at 37px, 30px and 22px. A SELECTED FILTER IS A STATE, NOT AN ACTION: .active on an outline button (with aria-pressed, or aria-current for a link), never the primary blue. THE ONE EXCEPTION: a button sitting ON a solid-coloured bar — the navbar, or a card-header bg-primary — uses the LIGHT variant instead. The tones above are drawn against the page background; on a blue bar the grey outline measured 2.46:1. There are two such buttons in the whole app and each says so where it sits. Write the classes in this order: btn, btn-sm, then the tone. --------------------------------------------------------------------------- */ html, body { min-height: 100vh; } /* --------------------------------------------------------------------------- ...AND THE TWO OUTLINE TONES HAVE TO BE TOLD WHICH THEME THEY ARE IN. Bootstrap 5.3 re-scopes its TEXT and BACKGROUND utilities for a dark theme but not its OUTLINE BUTTONS: .btn-outline-secondary paints #6c757d and .btn-outline-danger #dc3545 whatever theme is loaded. Both were chosen against a white page. On the dark page they measure 3.29:1 and 3.41:1, under the 4.5:1 a reader needs — which is why the grey buttons looked washed out and half-there. It is the same defect the badges had, one layer down: a fixed colour on a background that moved. So they are re-pointed at the THEME'S OWN tokens. Every Bootswatch dark theme (Darkly, Cyborg, Slate, Superhero, Solar, Vapor) then supplies its own values and none of them is named here — the only way this keeps working when a theme is added. These are Bootstrap's own button variables, so hover, focus, active and disabled keep working; what changes is the colours they resolve to, not the mechanism. NOT FIXED HERE, because it is the Bootswatch palettes' own choice and not ours: btn-primary is 4.5:1 in the default themes but fails in Cyborg (2.99), Solar (3.21) and Superhero (3.40), and several light Bootswatch themes are worse still (Minty is ~2.1 across the board). Those are brand colours, and overriding them would be redesigning twenty themes rather than fixing a bug. --------------------------------------------------------------------------- */ /* The grey one is fixed in BOTH themes, not just dark: grey has no identity to lose by getting darker, and in light mode the stock #6c757d lands at 4.43:1 once the button sits on a tinted surface (a card header, a striped row) — under the line by a hair. On the theme's own token it is 8.6:1 either way. */ .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: var(--bs-secondary-color); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-emphasis-color); /* Selected filter chips use .active, so it has to read as chosen rather than merely hovered: invert it, the way light mode already does. */ --bs-btn-active-color: var(--bs-body-bg); --bs-btn-active-bg: var(--bs-secondary-color); --bs-btn-active-border-color: var(--bs-secondary-color); --bs-btn-disabled-color: var(--bs-tertiary-color); --bs-btn-disabled-border-color: var(--bs-border-color); } /* The red one is fixed in DARK ONLY, and that asymmetry is deliberate. In dark it fails outright (3.41:1) and the emphasis token is a lighter red, so it both passes and still reads as red. In LIGHT the same token is #58151c — a maroon so dark it stops saying "danger", which is the one thing this tone exists to say. Bootstrap's stock red there measures 4.53:1 on the page and 4.28:1 on a tinted surface: a hair under on some rows, and the price of keeping it red. #b02a37 (Bootstrap's own red-600) would give 6.5:1 and stay red, if the marginal case ever matters more than matching stock. */ [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-border-color: var(--bs-danger-text-emphasis); --bs-btn-disabled-color: var(--bs-danger-text-emphasis); --bs-btn-disabled-border-color: var(--bs-danger-border-subtle); } /* The left navigation column. Bootstrap has no built-in sidebar, so we make a simple fixed-width one and let the main content fill the rest. */ .sidebar { width: 230px; min-height: calc(100vh - 56px); /* full height minus the navbar */ background-color: var(--bs-tertiary-bg); flex-shrink: 0; } .sidebar .nav-link { color: var(--bs-body-color); /* full-strength text, never muted/grey */ font-weight: 500; border-radius: .375rem; margin-bottom: .15rem; } /* Hover / focus / current page: a theme-aware primary TINT with emphasized primary text. Bootstrap defines --bs-primary-bg-subtle and --bs-primary-text-emphasis as a readable PAIR for both light and dark modes, so this never becomes white-on-a-pale-colour — which the old rule ("primary background + #fff text") did on light themes like Minty/Sandstone. */ .sidebar .nav-link:hover, .sidebar .nav-link:focus, .sidebar .nav-link.active { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } .sidebar .nav-link.active { font-weight: 600; } .sidebar .nav-link i { width: 1.4rem; display: inline-block; text-align: center; } /* Collapsible sidebar groups (e.g. the Property section). The child links are indented and slightly smaller; a left border shows they belong to the group. */ .sidebar-subnav { margin-left: .65rem; padding-left: .35rem; border-left: 2px solid var(--bs-border-color); } .sidebar-subnav .nav-link { font-size: .9rem; } /* The caret on a group header points down when open and right when collapsed. Bootstrap adds the ".collapsed" class to the toggle link while it's closed. */ .sidebar-caret { transition: transform .15s ease; } .sidebar .nav-link.collapsed .sidebar-caret { transform: rotate(-90deg); } /* Property-operational sidebar groups are greyed out + inert while the user is in the Corporate scope (the company isn't a property — no tenants, leases, etc.). Applied conditionally in _Layout.cshtml via the .rm-op-disabled class. */ .rm-op-disabled { opacity: .4; pointer-events: none; cursor: default; } /* On small screens the sidebar sits above the content instead of beside it. */ @media (max-width: 768px) { .sidebar { width: 100%; min-height: auto; } } /* Dashboard stat cards: make the big number stand out. */ .stat-number { font-size: 2rem; font-weight: 600; line-height: 1; } /* Settings hub: clickable tiles lift slightly on hover; "coming soon" tiles get a dashed border so they read as not-yet-available. */ .setting-card { transition: box-shadow .12s ease, transform .12s ease; } .setting-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.1); transform: translateY(-2px); } .border-dashed { border-style: dashed !important; } /* --------------------------------------------------------------------------- Readable muted text on every theme. Bootstrap's default "muted"/"secondary" greys are quite low-contrast: pale grey on white and dark grey on black are both hard to read. We re-derive them from the ACTIVE theme's own text colour (--bs-body-color) at a strong alpha, so secondary text stays legible on light AND dark themes (including Bootswatch dark themes like Darkly/Cyborg that keep data-bs-theme="light"). --------------------------------------------------------------------------- */ [data-bs-theme] { --bs-secondary-color: rgba(var(--bs-body-color-rgb), 0.82); --bs-tertiary-color: rgba(var(--bs-body-color-rgb), 0.68); } .text-muted, .text-body-secondary, .text-secondary { color: rgba(var(--bs-body-color-rgb), 0.82) !important; } small.text-muted, .small.text-muted { opacity: 1; } /* --------------------------------------------------------------------------- App panels (the accordion — see TagHelpers/PanelTagHelper.cs). These panels REPLACED plain cards whose header was "bg-primary text-white", and every other card header in the app still looks like that — so the panel headers have to as well, or a page stops matching the rest of the app. Bootstrap's own accordion is deliberately quiet (a pale tint when open), so we re-point its variables at the ACTIVE THEME's primary colour rather than hard-coding blue: the app ships 16 Bootswatch themes (see theme.js) and each one carries its own --bs-primary. Scoped to .app-panels — opt-in, so a plain Bootstrap accordion used elsewhere keeps its quieter default. The chevron is a background-image SVG with its colour baked in, so an open AND a closed one both need a white-filled copy to show up on the bar. --------------------------------------------------------------------------- */ .app-panels { --bs-accordion-btn-bg: var(--bs-primary); --bs-accordion-btn-color: #fff; --bs-accordion-active-bg: var(--bs-primary); --bs-accordion-active-color: #fff; --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .4); } /* An open panel keeps the header square-bottomed against its body, exactly as a card header sits on a card body. Bootstrap otherwise rounds it while closed. */ .app-panels .accordion-button:not(.collapsed) { box-shadow: none; } /* A bar that carries ACTIONS is a flex row, because a