html {
font-size: 14px;
}
/* Hide validation summary and field errors when there are no messages */
.validation-summary-valid,
.field-validation-valid {
display: none;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #20A59F;
}
html, body {
/* `height: 100%` (not Bootstrap's `min-vh-100`, deliberately omitted from in
_Layout.cshtml) was a first attempt at fixing the sticky-footer flex column being sized
taller than the actual visible viewport on mobile — turns out percentage heights resolve
against the *layout* viewport on iOS Safari/Chrome (the address-bar-hidden size) same as
`100vh` does, not the currently-visible one, so the same overscroll-past-the-footer bug
still showed up. `100dvh` is the unit actually built for this: it tracks the *visual*
viewport and shrinks/grows live as the address bar shows/hides. Kept as two declarations,
not a replacement, so a browser that doesn't understand `dvh` yet just ignores the second
line (an unsupported unit invalidates the whole declaration) and keeps the `100%` fallback
above it instead of ending up with no height rule at all. */
height: 100%;
height: 100dvh;
/* Stops mobile browsers' rubber-band bounce past the footer at the bottom of the page
(and the matching overscroll at the top) instead of letting the scroll gesture run
past the document's own content into blank space. */
overscroll-behavior-y: none;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
color: var(--bs-secondary-color);
text-align: start;
}
.season-row {
transition: box-shadow .1s ease-in-out;
}
/* Bootstrap 5.3 paints an opaque background-color (--bs-table-bg, defaulting to the body
background) on every | via its own `.table > :not(caption) > * > *` rule, which covers
whatever background-color is set directly on the | — a plain background-color here would
never be visible. Row highlighting has to go through the same --bs-table-accent-bg custom
property Bootstrap itself uses for .table-hover/.table-striped/.table-active: that rule reads
it into a `box-shadow: inset 0 0 0 9999px` on each cell, which paints on top of the cell's own
background instead of being painted under it. Same lesson as .list-group-item.active in
mhc-brand.css, applied to tables instead of custom properties on other component types. */
.season-row:hover {
--bs-table-accent-bg: rgba(0, 103, 106, 0.08);
}
.season-row.highlighted {
--bs-table-accent-bg: rgba(0, 103, 106, 0.12);
}
/* FCFS's Season Dates panel (access-request-season-info.js sets .season-row-fcfs there) picks
the same green as its available-period highlight (SEASON_HIGHLIGHT_COLOR in
fcfs-period-calendar.js, #198754) instead of the app-wide brand teal above, so the two
highlights on screen together read as one system. Keep the two hex values in sync. */
.season-row:hover.season-row-fcfs {
--bs-table-accent-bg: rgba(25, 135, 84, 0.08);
}
.season-row.highlighted.season-row-fcfs {
--bs-table-accent-bg: rgba(25, 135, 84, 0.14);
}
.sortable-th {
cursor: pointer;
user-select: none;
}
tr[data-href] {
cursor: pointer;
}
.sort-indicator {
display: inline-block;
width: 1em;
}
/* Popover for the "Provincial data" overlay-group ⓘ (Views/Shared/_ProvincialDataNotice.cshtml).
Wider than Bootstrap's 276px default so the two-sentence notice stays a short paragraph. */
.provincial-data-popover {
max-width: 340px;
}
/* Property Dashboard's place-search bar (icon + input + Search button). The 340px cap that
suits it once the Provincial Overlay Data checkboxes sit alongside it (md+) ate almost the
entire width of a phone screen below that, leaving the placeholder text cramped against the
button — let it use the full row on mobile instead. */
.place-search-group {
min-width: 0;
max-width: 100%;
}
@media (min-width: 768px) {
.place-search-group {
min-width: 220px;
max-width: 340px;
}
}
/* Property Dashboard filter form's Search/Clear pair: full `btn-lg` size at every breakpoint
read as excessively large on a typical desktop viewport, so both are only enlarged on a
narrow phone screen, where the normal size felt too small to tap confidently. "Clear" also
gets a bordered, button-like look there — a lone underlined link looked out of place next to
a large button — while staying the plain link it's always been at desktop/tablet widths. */
@media (max-width: 767.98px) {
.search-btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: var(--bs-btn-border-radius-lg, 0.5rem);
}
.clear-btn {
border: 1px solid var(--bs-secondary);
border-radius: var(--bs-btn-border-radius-lg, 0.5rem);
padding: 0.5rem 1rem;
font-size: 1.25rem;
text-decoration: none;
}
}
/* Property Dashboard map. A fixed 65vh suits most screens, but on a tall/xl desktop viewport
the filter controls above it take up relatively little of the available height, leaving a
large gap of blank page between the map and the footer. At xl (>=1200px) let the map grow to
fill the rest of (see _Layout.cshtml's "d-flex flex-column h-100") instead of stopping
at a fixed height — #mapSearchBar keeps its natural size (flex-shrink: 0) while #propertyMap
claims whatever's left. Left as a fixed height below xl on purpose (not requested, and an
arbitrarily tall map on a phone/tablet, where the toolbar can wrap across several lines
first, is a bigger change than was asked for).
*/
#propertyMap {
height: 65vh;
}
@media (min-width: 1200px) {
#mapPanel {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
#mapSearchBar {
flex-shrink: 0;
}
#propertyMap {
height: auto;
flex: 1 1 auto;
min-height: 0;
}
}
/* Tables app-wide (almost every admin/list view is a .table-responsive > table): round the
wrapper's corners so a table reads as a Bootstrap "card"-like control instead of a flat,
square-edged grid — matching the .card styling used everywhere else. Border-radius on the
wrapper, not the itself: with the default border-collapse: collapse, the table's own
cell borders ignore a radius set directly on it and poke past a rounded corner.
.table-responsive already sets overflow-x: auto for horizontal scrolling on a wide table;
overflow-y: hidden here doesn't take anything away (nothing here scrolls vertically on its
own — the page does) and is what actually clips the corners round. */
.table-responsive {
border-radius: var(--bs-border-radius, 0.375rem);
overflow: auto hidden;
}
/* Bootstrap's .table-sm (used for compactness on almost every one of these tables) cuts cell
padding to 0.25rem all round — fine for body rows, but cramped for the header row, especially
now that most headers are also sortable-th (a click target with a sort-indicator glyph
appended). Specificity here (.table > thead > tr > th) already beats .table-sm's own rule
without needing !important — see .table-sm>:not(caption)>*>* in bootstrap.min.css. */
.table > thead > tr > th {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/* My Permissions print view (see MyPermissions.cshtml / _PermissionGrantCard.cshtml): each
card's own d-print-none toggle decides *whether* it prints, this just keeps a printing card
from being split across a page break once it's included. */
@media print {
.permission-card {
break-inside: avoid;
}
}