. The first pass hid
".nav-link-toggle", which does not exist in this build — so the chevrons
survived, hung off the right edge and got clipped, and flex-fill kept the
icons pinned left instead of centred. */
.vq-sidebar-collapsed .navbar-vertical .nav-link-arrow,
.vq-sidebar-collapsed .navbar-vertical .navbar-brand-text,
/* :not(.navbar-collapse) matters — the whole nav list lives in a
div.collapse.navbar-collapse, so a bare .collapse rule hides the sidebar's
entire contents and leaves a dark empty strip. */
.vq-sidebar-collapsed .navbar-vertical .collapse:not(.navbar-collapse),
.vq-sidebar-collapsed .navbar-vertical .collapsing:not(.navbar-collapse) { display: none !important; }
.vq-sidebar-collapsed .navbar-vertical .nav-item > .d-flex { justify-content: center; }
.vq-sidebar-collapsed .navbar-vertical .nav-link {
flex: none !important;
width: 44px; height: 40px;
padding: 0 !important;
margin: 0 auto;
justify-content: center;
border-radius: 11px;
}
.vq-sidebar-collapsed .navbar-vertical .navbar-brand { justify-content: center; padding-inline: 0 !important; }
.vq-sidebar-collapsed .navbar-vertical { padding-inline: 12px !important; }
/* The grip stays reachable while collapsed, so the sidebar can be dragged back
out as well as reopened from the toggle. */
.vq-sidebar-collapsed .vq-grip { right: -4px; width: 8px; }
/* ── Card header ─────────────────────────────────────────────────────────── */
/* " Families" — the single space collapses
against the glyph box, so the icon reads as touching the title. */
.card-title > i:first-child,
.card-header > i:first-child,
.page-title > i:first-child { margin-right: 9px; }
/* Tabs sitting in a card header rode over the card's own top border. Segmented
pills inside the header instead — no border to cross. */
.card .nav-tabs, .card .nav-tabs .nav-item { border: 0 !important; }
.card .nav-tabs { gap: 4px; margin: 0 !important; }
.card .nav-tabs .nav-link {
border: 0 !important; border-radius: 9px !important;
padding: 6px 12px !important; font-size: 13px; font-weight: 600;
color: #64748b !important; background: transparent !important;
}
.card .nav-tabs .nav-link:hover { background: #f1f5f9 !important; color: var(--ink) !important; }
.card .nav-tabs .nav-link.active { background: #e7efff !important; color: #2563eb !important; }
/* ── DataTables chrome ───────────────────────────────────────────────────── */
/* DataTables 2 pins .dt-column-order to the right edge of the header cell, so
on a wide column its two solid triangles float halfway to the NEXT heading
and read as a column of their own. Muted by default, brand-blue only on the
column actually sorted. */
.dt-column-order::before, .dt-column-order::after {
opacity: .3 !important; font-size: .62em !important; color: var(--soft) !important;
}
th.dt-ordering-asc .dt-column-order::before,
th.dt-ordering-desc .dt-column-order::after { opacity: 1 !important; color: var(--blue) !important; }
.dt-column-header { gap: 6px; }
.dt-search label, .dt-length label {
display: flex; align-items: center; gap: 8px; margin: 0;
font-size: 12px; font-weight: 600; color: var(--soft);
text-transform: uppercase; letter-spacing: .06em;
}
.dt-search input, .dt-length select {
border-radius: 9px !important; border: 1px solid var(--line) !important;
background: #fbfcff !important; font-size: 13px !important; color: var(--ink) !important;
}
.dt-info { font-size: 12.5px; color: var(--soft); }
.dt-paging .page-link {
border: 0 !important; border-radius: 9px !important;
font-weight: 700; font-size: 12.5px; color: var(--muted) !important; min-width: 32px; text-align: center;
}
.dt-paging .page-item.active .page-link { background: var(--blue) !important; color: #fff !important; }
.dt-paging .page-item.disabled .page-link { opacity: .35; }
/* ── Listing tables: nothing overflows its column ────────────────────────── */
/* DataTables hands out percentage widths that leave a long name or a formatted
phone number spilling past its cell. Cells wrap, long unbroken tokens break,
and the two columns that carry the most characters get a floor width so the
layout algorithm cannot squeeze them below readable. */
/* break-word, NOT anywhere: `anywhere` also shrinks a cell's min-content width
to about one character, and with table-layout:auto the browser then happily
squeezed Name to 186px and Phone to 124px — it was the wrapping, not the
cure. break-word only breaks a token that genuinely cannot fit. */
.card .table td { white-space: normal; overflow-wrap: break-word; }
/* Name and phone stay on one line. Tagged by theme.js rather than matched with
:has(): Chrome re-evaluates a :has() rule on every DOM mutation in its scope,
and with `.table:has(...)` on a page DataTables builds row by row that took
/people/list from 2.7s to 23.5s. Measured — neutering these seven rules alone
brought it back to 3.6s. The JS tags once per draw instead.
Previously: matched by what the cell CONTAINS rather
than by index — column order differs per listing. No min-width: the auto
layout already gives these columns what they need once `anywhere` is gone,
and a hard floor pushed the table wide enough that DataTables Responsive
collapsed the Actions column into a child row. */
.card .table td.vq-nowrap-cell { white-space: nowrap !important; }
/* ── Sidebar scrolls when the open sub-menus outrun the viewport ─────────── */
/* overflow:visible was set on the panel so the drag grip could hang past its
right edge — and that also removed the only scroll container, so with two or
three groups expanded the bottom of the nav simply could not be reached. The
panel keeps its visible overflow; the nav list inside it does the scrolling. */
.navbar-vertical { display: flex !important; flex-direction: column; }
.navbar-vertical > .container-fluid {
display: flex; flex-direction: column;
flex: 1 1 auto; min-height: 0;
}
.navbar-vertical .navbar-collapse {
flex: 1 1 auto; min-height: 0;
overflow-y: auto; overflow-x: hidden;
/* clears the collapse toggle pinned at the bottom of the panel */
padding-bottom: 46px;
}
.navbar-vertical .navbar-collapse::-webkit-scrollbar { width: 8px; }
.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.16); border-radius: 99px;
border: 2px solid transparent; background-clip: content-box;
}
.navbar-vertical .navbar-collapse::-webkit-scrollbar-track { background: transparent; }
/* ── DataTables chrome, second pass ──────────────────────────────────────── */
/* The label and the input are SIBLINGS inside .dt-search, so flexing the label
did nothing and the field dropped onto its own line. Flex the wrapper. */
.dt-search, .dt-length { display: flex; align-items: center; gap: 8px; }
.dt-search label, .dt-length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.dt-search input { min-width: 220px; }
/* Header cells never wrap — "Actions" was breaking to "ACTI / ONS" once body
cells were allowed to wrap. Only the data wraps. */
.card .table th, .card .table thead th { white-space: nowrap !important; }
/* Pull the sort control up against its own column title. DataTables absolutely
positions it at the cell's right edge, which on a wide column parks it
halfway to the next heading and reads as a column of arrows. */
.dt-column-header { display: flex !important; align-items: center; gap: 6px; }
/* relative, NOT static: DataTables draws the two triangles as absolutely
positioned ::before/::after. With the box set to static they resolved
against the nearest positioned ancestor instead — the .card — and all eight
columns' arrows stacked into one stray glyph at the card's left edge. */
.dt-column-order {
position: relative !important;
inset: auto !important;
width: 10px !important; height: 1em;
flex: none; display: inline-block;
}
/* DataTables lets the title box flex to fill the cell, which parked the sort
control at the far end of a wide column — the pairs of arrows sitting
halfway between two headings. !important because its own rule is more
specific than a bare class. */
.dt-column-title { flex: 0 0 auto !important; }
.dt-column-header { justify-content: flex-start !important; }
.dt-column-header:has(.dt-column-title) { width: auto; }
th.text-end .dt-column-header, th.dt-right .dt-column-header { justify-content: flex-end; }
/* ── DataTables sits inside the card's own inset ─────────────────────────── */
/* The DataTables container is dropped into a bare, unpadded div in the card,
and its layout rows carry Bootstrap's negative gutter — so Search, the info
line and the pager all rendered hard against the card border while the table
text sat 20px in. Rows get the card's inset; the table itself stays
full-bleed because its cells already carry that 20px. */
.card .dt-container > .row { margin-inline: 0 !important; padding-inline: 20px; }
.card .dt-container > .row > [class*="col-"] { padding-inline: 0 !important; }
.card .dt-container > .row.dt-layout-table { padding-inline: 0; }
/* Vertical rhythm: mt-2 (8px) put the search row against the card title and
the pager against the last data row. */
.card .dt-container > .row:first-child { margin-top: 4px !important; margin-bottom: 14px !important; }
.card .dt-container > .row:last-of-type { margin-top: 14px !important; }
.card .dt-container > .row.dt-layout-table { margin-top: 0 !important; }
/* ── Page title and the cards under it share one left edge ───────────────── */
/* Some views (PropertyList, the custom-field editors) wrap their content in a
second .container-fluid inside the page's .container-xl. That nested
container adds its own 16px gutter, so the card sat 16px right of the page
title while other views lined up. */
.page-body .container-xl .container-fluid,
.page-body .container-xl .container { padding-inline: 0 !important; }
/* ── Calendar fits the window ────────────────────────────────────────────── */
/* This build of FullCalendar ships hashed class names (fc-forma-b7K …), so the
documented v6 hooks do not exist. What is stable is the ARIA structure —
role=grid / rowgroup / row — plus the fc- class prefix, which every build
keeps. The month grid is pinned to what is left of the viewport and the six
week rows share it instead of each taking their inline flex-basis:130px. */
.page-body [class*="fc-"][role="grid"] {
height: calc(100vh - 465px) !important;
min-height: 400px;
}
/* The chain grid → body → rowgroup has to be flex columns that pass the height
down, or the week rows — freed from their inline flex-basis — collapse to
1px. The header rowgroup is left alone: only the group whose rows carry an
inline flex-basis is the week grid. */
.page-body [class*="fc-"][role="grid"] { display: flex; flex-direction: column; }
.page-body [class*="fc-"][role="grid"] > * { flex: 0 0 auto; min-height: 0; }
.page-body [class*="fc-"][role="grid"] > *:has([role="rowgroup"] > [role="row"][style*="flex-basis"]),
.page-body [class*="fc-"] [role="rowgroup"]:has(> [role="row"][style*="flex-basis"]) {
flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column;
}
.page-body [class*="fc-"] [role="rowgroup"] > [role="row"][style*="flex-basis"] {
flex: 1 1 0 !important;
min-height: 0 !important;
}
/* Day cells clip a busy day rather than pushing the grid taller. */
.page-body [class*="fc-"] [role="gridcell"] { overflow: hidden; }
/* Toolbar in the product's own type rather than FullCalendar's defaults. */
.page-body [class*="fc-"] [role="heading"] { font-size: 1.05rem !important; font-weight: 700; color: var(--ink); }
.page-body [class*="fc-"] button:not(.btn) {
border-radius: 9px !important; border: 1px solid var(--line) !important;
background: #fff !important; color: var(--muted) !important;
font: 700 12.5px/1.2 'Plus Jakarta Sans', system-ui, sans-serif !important;
padding: 8px 14px !important; box-shadow: none !important;
}
.page-body [class*="fc-"] button[aria-selected="true"],
.page-body [class*="fc-"] button[aria-pressed="true"] {
background: #e7efff !important; color: var(--blue) !important; border-color: #cddcfb !important;
}
/* ============================================================================
PASS 3 — design-rule enforcement, applied globally
The 8px grid: 8px between controls in a row, 16px between groups, 24px
between sections. Labels 6px above their field. Nothing paints over a card
corner. Nothing in the dark sidebar drops below readable contrast.
============================================================================ */
/* ── Form labels sit clear of their field ────────────────────────────────── */
.form-label, label.form-label, .form-group > label, .mb-3 > label:not(.form-check-label) {
margin-bottom: 6px !important;
display: block;
}
.form-group, .mb-3 { margin-bottom: 16px !important; }
.form-check { margin-top: 4px; }
/* ── Card corners stay intact ────────────────────────────────────────────── */
/* A full-bleed table, footer or list painted a square background over the
card's 18px corner, so the grey border vanished at the bottom of the card.
Outer children inherit the radius instead of clipping the card, which would
also clip the ⋮ action menus. */
.card > :first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.card > :last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.card > .table-responsive, .card > .table-responsive > .table,
.card > .table, .card > .list-group, .card > .card-footer, .card > .dt-container,
.card > .card-body:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.card .table > tbody > tr:last-child > td:first-child,
.card .list-group-flush > .list-group-item:last-child { border-end-start-radius: 17px; }
.card .table > tbody > tr:last-child > td:last-child { border-end-end-radius: 17px; }
/* The last row's own rule doubled the card border at the foot. */
.card .table > tbody > tr:last-child > td,
.card .table > tbody > tr:last-child > th { border-bottom: 0 !important; }
.card .list-group-flush > .list-group-item:last-child { border-bottom: 0 !important; }
.card-footer { background: transparent !important; border-top: 1px solid var(--line) !important; }
/* ── Sidebar count badges: every variant readable on the dark panel ──────── */
/* The Calendar row carries three badges in three Tabler colours; the
secondary one inherited the page's muted grey and disappeared into the
panel. One treatment for all of them. */
.navbar-vertical .badge, .navbar-vertical .badge *,
.navbar-vertical .badge.bg-secondary, .navbar-vertical .badge.text-secondary,
.navbar-vertical .badge.bg-secondary-lt, .navbar-vertical .badge[class*="bg-"] {
background: rgba(59, 130, 246, .2) !important;
color: #bfdbfe !important;
font-weight: 700 !important;
min-width: 20px; text-align: center;
}
.navbar-vertical .badge + .badge { margin-left: 4px; }
/* ── Button rows: 8px between buttons, always ────────────────────────────── */
.btn-list, .btn-group-flex, .card-actions, .page-title-actions,
.d-flex:has(> .btn + .btn), .btn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-list > .btn, .btn-list > .dropdown { margin: 0 !important; }
.btn + .btn:not(.btn-group > .btn) { margin-left: 8px; }
.d-flex:has(> .btn + .btn) > .btn + .btn { margin-left: 0; }
/* ── Calendar toolbar and sizing ─────────────────────────────────────────── */
/* Month / Week / Day / List sat flush; prev / next / today too. And the grid
can take more room than the strict fit gave it. */
.page-body [class*="fc-"] [role="tablist"],
.page-body [class*="fc-"] [role="toolbar"] > *,
.page-body [class*="fc-"] .crm-fc-head > * { display: flex; gap: 8px; align-items: center; }
.page-body [class*="fc-"] .crm-fc-head { gap: 16px; flex-wrap: wrap; row-gap: 12px; margin-bottom: 16px; }
.page-body [class*="fc-"][role="grid"] {
height: max(600px, calc(100vh - 465px)) !important;
}
.page-body [class*="fc-"] [role="gridcell"] { padding: 4px; }
/* ── Grids of equal cards centre and space evenly ────────────────────────── */
.page-body .row.row-cards, .page-body .row.g-3, .page-body .row.g-4 { --tblr-gutter-x: 24px; --tblr-gutter-y: 24px; }
.page-body .row > [class*="col-"] > .card:only-child { height: 100%; }
/* .mb-3 is also on cards and rows; the 16px form-group rule above must not
pull those down from the 24px section gap. */
.card.mb-3, .row.mb-3, .page-body > .mb-3 { margin-bottom: 1.5rem !important; }
/* ── Dashboard Birthdays: name starts at the card edge ───────────────────── */
/* MainDashboard.js gives the Birthdays table a leading 40px column that renders
an empty string (a photo slot that is never filled — the avatar is drawn
inside the Name cell instead). Empty column + its 20px edge padding pushed
every name ~90px in from the card. */
#PersonBirthdayDashboardItem th:first-child,
#PersonBirthdayDashboardItem td:first-child { display: none; }
#PersonBirthdayDashboardItem th:nth-child(2),
#PersonBirthdayDashboardItem td:nth-child(2) { padding-left: 20px !important; }
/* ── Full-bleed card bodies stay full-bleed ──────────────────────────────── */
/* Tabler marks a card body that holds a table with .p-0 so the table can run
edge to edge and let its cells carry the inset. The blanket
`.card-body { padding: 20px !important }` beat that utility, so every such
table was indented 20px on top of its own 20px cell padding — the Birthdays
names on the dashboard sat 40px right of the card title. */
.card-body.p-0 { padding: 0 !important; }
.card-body.px-0 { padding-inline: 0 !important; }
.card-body.py-0 { padding-block: 0 !important; }
/* DataTables built with the legacy `dom` option wraps the table in a plain
.row (no dt-layout-table class), so the 20px row inset meant for the
search/pager rows was landing on the table as well. */
.card .dt-container > .row:has(> [class*="col-"] > table),
.card .dt-container > .row:has(> [class*="col-"] > .table-responsive) { padding-inline: 0 !important; }
/* ── AUDIT: GROUPS+EVENTS ── */
/* Groups, Sunday School, Events and the Calendar. Measured at 1440×1000
through the preview proxy; each rule names the page and the defect. */
/* ── Card footers (group view About/Properties, event check-in) ──────────── */
/* The verbatim-spec footer had 0 top padding, so once the footer grew a
border-top the Email Export line and the Assign row sat 2–6px under the
rule. 16px above, the same as any group gap. */
.card-footer { padding: 16px 20px 20px !important; }
/* Group view Properties footer: a .form-select-sm next to a btn-sm primary
was 41px against 35px — Tabler's -sm select still took the full-size input
padding. Match the button beside it. */
.card-footer .d-flex > .form-select-sm,
.card-footer .d-flex > .form-control-sm {
height: 35px; min-height: 35px !important; padding-block: 0 !important;
font-size: 13px !important; line-height: 33px;
}
/* ── Card headers that are an
(groups dashboard "Add New Group",
"Groups"; group types "Add New Group Type", "Existing Options") ────── */
/* These views skip .card-title and drop a bare h5 in the header, so the title
rendered at 13px/500 with the icon glyph touching the text. Same type as
every other card title, icon 9px off the word. */
.card-header > h5, .card-header > h4 {
font-size: 1rem !important; font-weight: 600 !important; color: var(--ink) !important;
display: flex; align-items: center; gap: 9px; margin: 0;
}
.card-header > h5 > i, .card-header > h4 > i { margin-right: 0 !important; }
/* ── Sunday School dashboard: .table-bordered inside a card ─────────────── */
/* Both DataTables there are .table-bordered, the only listing tables in the
product with vertical rules between cells. Horizontal rules only, like every
other list. */
.card .table-bordered,
.card .table-bordered > :not(caption) > * > * { border-left: 0 !important; border-right: 0 !important; }
.card .table-bordered > :not(caption) > thead > * > * { border-top: 0 !important; }
/* ── Event Types: sort control on the numeric "Events" column ───────────── */
/* DataTables flips .dt-type-numeric headers to row-reverse, which parked the
arrows BEFORE the label — the one header out of seven reading backwards.
text-center columns also centre their header over the centred values. */
th.dt-type-numeric .dt-column-header { flex-direction: row !important; }
th.text-center .dt-column-header { justify-content: center !important; }
/* ── PropertyList (Type=g): Person / Family / Group filter ──────────────── */
/* A .btn-group of three outline buttons: touching, and the active one drew
exactly like the others so the current tab was invisible. Pills with the
8px control gap and the same active tint the Members tabs use. */
.btn-group:not(.dropdown):not(:has(> .dropdown-toggle)) { display: inline-flex; gap: 8px; }
.btn-group:not(:has(> .dropdown-toggle)) > .btn { border-radius: 9px !important; margin-left: 0 !important; }
.btn-group > .btn.active, .btn-group > .btn.active:hover {
background: #e7efff !important; color: var(--blue) !important; border-color: #cddcfb !important;
}
/* ── Event editor ───────────────────────────────────────────────────────── */
/* The title input is form-control-lg.border-0.border-bottom.rounded-0.px-0:
with the global #fbfcff input fill that became a borderless grey slab and
its label was the only muted label on the form. A regular field, and the
label matches its neighbours. */
.form-control.border-0.border-bottom {
border: 1px solid var(--line) !important; border-radius: 10px !important;
padding: .58rem .85rem !important; background: #fbfcff !important;
font-size: 15px !important; font-weight: 600; color: var(--ink);
}
label.form-label.text-muted { color: var(--ink) !important; font-size: .8rem !important; }
/* Tom Select: the single (Event Type, 38px) and multi (Pinned Calendars, 42px)
controls sat on either side of the 40px native fields in the same row. */
.ts-wrapper.form-select:not(.form-select-sm) { min-height: 40px !important; height: auto !important; padding: 0 !important; }
.ts-wrapper.form-select:not(.form-select-sm) > .ts-control {
min-height: 40px !important; padding: 7px 12px !important; align-items: center;
border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fbfcff !important;
}
.ts-wrapper.multi > .ts-control > .item { margin: 0 4px 0 0 !important; }
/* Quill's placeholder is absolutely positioned; without a positioned editor it
resolved against the card and hung 4px outside the editor's left edge. */
.ql-container { position: relative; }
.ql-editor { position: relative; }
/* ── Calendar (/event/calendars) ────────────────────────────────────────── */
/* The earlier toolbar rule targeted .crm-fc-head; the class ChurchCRM
actually sets is .crm-fc-header-toolbar, so nothing about the toolbar had
landed except the tablist gap. */
.crm-fc-header-toolbar {
display: flex !important; align-items: center; gap: 16px !important;
padding: 20px 20px 16px !important; margin: 0 !important;
}
/* Three equal sections so the month title is centred on the card, not on
whatever is left between a 179px left group and a 263px right group. */
.crm-fc-header-toolbar > div { flex: 1 1 0 !important; display: flex; align-items: center; gap: 16px !important; min-width: 0; }
.crm-fc-header-toolbar > div:nth-child(1) { justify-content: flex-start; }
.crm-fc-header-toolbar > div:nth-child(2) { justify-content: center; }
.crm-fc-header-toolbar > div:nth-child(3) { justify-content: flex-end; }
/* prev / next were fused (a 50×38 pair beside 33px-tall buttons). 8px apart,
square, and the same height as the quiet buttons around them. */
.crm-fc-header-toolbar > div > div { display: flex; gap: 8px; align-items: center; }
.crm-fc-header-toolbar button[aria-label="Previous Month"],
.crm-fc-header-toolbar button[aria-label="Next Month"],
.crm-fc-header-toolbar button[aria-label^="Previous"],
.crm-fc-header-toolbar button[aria-label^="Next"] {
width: 33px !important; height: 33px !important; padding: 0 !important;
display: inline-grid !important; place-items: center;
}
.crm-fc-header-toolbar button svg { width: 16px; height: 16px; }
.crm-fc-header-toolbar button:disabled { opacity: .55; }
.crm-fc-header-toolbar [role="heading"] {
font-size: 18px !important; font-weight: 700 !important; color: var(--ink) !important;
letter-spacing: -0.015em; white-space: nowrap;
}
/* The grid drew its own 1px #e0e0e0 frame inside the card border (a card
within a card) and painted a square white background that hid the card's
bottom corners. No frame, transparent, bottom corners rounded on the last
row's outer cells (the only cells that paint a background there). */
.page-body [class*="fc-"][role="grid"] { border: 0 !important; background: transparent !important; border-radius: 0 !important; }
.page-body [class*="fc-"][role="grid"] > * { background: transparent !important; }
.page-body [class*="fc-"] [role="rowgroup"] > [role="row"]:last-child > [role="gridcell"]:first-child { border-end-start-radius: 17px; }
.page-body [class*="fc-"] [role="rowgroup"] > [role="row"]:last-child > [role="gridcell"]:last-child { border-end-end-radius: 17px; }
/* Rules between cells in the product's line colour rather than FullCalendar's. */
.page-body [class*="fc-"] [role="row"],
.page-body [class*="fc-"] [role="gridcell"],
.page-body [class*="fc-"] [role="columnheader"],
.page-body [class*="fc-"][role="grid"] > * > * { border-color: var(--line) !important; }
/* Bigger: 780px gives six 124px week rows, which is a day number plus four
event chips without clipping. The page scrolls ~130px at 1000px tall, which
was accepted. */
.page-body [class*="fc-"][role="grid"] { height: max(780px, calc(100vh - 330px)) !important; }
/* Day-name header: 16px/400 body text became the heaviest thing on the grid.
Same treatment as a table header. */
.page-body [class*="fc-"] [role="columnheader"],
.page-body [class*="fc-"] [role="columnheader"] * {
font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em;
text-transform: uppercase; color: var(--soft) !important;
}
.page-body [class*="fc-"] [role="columnheader"] > div > div { padding: 10px 8px !important; }
/* Day numbers: 14px/400 near-black → readable weight in the ink colour. */
.page-body [class*="fc-"] [role="gridcell"] > div:first-child > [aria-hidden="true"] {
font-size: 13px !important; font-weight: 600 !important; color: var(--ink);
padding: 6px 8px !important; font-variant-numeric: tabular-nums;
}
/* Today and weekends: subtle tints. Other-month days keep FullCalendar's grey. */
.page-body [class*="fc-"] [role="gridcell"][aria-current="date"] { background: #eef4ff !important; }
.page-body [class*="fc-"] [role="row"] > [role="gridcell"]:first-child:not([aria-current="date"]),
.page-body [class*="fc-"] [role="row"] > [role="gridcell"]:last-child:not([aria-current="date"]) { background-color: rgba(15, 23, 42, .022); }
/* Event chips. The per-calendar colour arrives as --fc-event-color (#0000FF,
#00AA00 …) and was used raw: a 6px pure-blue bar on a saturated fill, 16px
box with a 12px label clipped mid-word. Soft tint of the calendar colour,
3px bar, ellipsis on the label. */
.page-body [role="gridcell"] a[style*="--fc-event-color"] {
font-size: 12px !important; border-radius: 6px !important;
margin: 0 4px 2px 4px !important; padding: 1px 2px !important;
color: var(--ink) !important; min-width: 0;
}
.page-body [role="gridcell"] a[style*="--fc-event-color"][class*="fc-"]:not(:has(> div:first-child:empty)) {
background: color-mix(in srgb, var(--fc-event-color) 12%, #fff) !important;
border-left-width: 3px !important;
border-left-color: color-mix(in srgb, var(--fc-event-color) 70%, #fff) !important;
}
.page-body [role="gridcell"] a[style*="--fc-event-color"] div {
font-size: 12px !important; text-overflow: ellipsis !important; min-width: 0;
}
.page-body [role="gridcell"] a[style*="--fc-event-color"] > div:first-child:empty {
background: color-mix(in srgb, var(--fc-event-color) 75%, #fff) !important;
width: 8px !important; height: 8px !important; flex: none;
}
.page-body [role="gridcell"] a[style*="--fc-event-color"]:hover { filter: brightness(.97); }
/* First chip sits 4px under the day number, not flush against it. */
.page-body [class*="fc-"] [role="gridcell"] > div:first-child { padding-bottom: 2px; }
/* ── AUDIT: FINANCE+COMMS ── */
/* Finance, Fundraiser, Communication, Data/Reports, the logged-out login page
and the 390px dashboard. Every rule names the page it was measured on. */
/* [mobile /v2/dashboard] The sidebar width and the page offset were written
without a breakpoint, so at 390px the panel stayed 252px wide, the page was
pushed 252px right and every card was 49–122px wide. Tabler only makes the
sidebar vertical from xl (1200px); below that it is a top bar. */
@media (max-width: 1199.98px) {
.navbar-vertical {
width: auto !important; min-width: 0 !important; max-width: none !important;
position: relative !important; padding: 10px 12px !important;
}
.page-wrapper { margin-inline-start: 0 !important; }
.vq-grip, .vq-collapse { display: none !important; }
/* the theme stacked toggler / brand / nav as a column; the top bar is a row */
.navbar-vertical > .container-fluid {
flex-direction: row !important; flex-wrap: wrap !important;
align-items: center !important; justify-content: space-between !important;
min-height: 0 !important;
}
.navbar-vertical .navbar-brand { padding: 0 !important; margin: 0 !important; }
.navbar-vertical .navbar-collapse {
flex: 1 1 100% !important; overflow: visible !important; padding-bottom: 0 !important;
}
.navbar-vertical .navbar-collapse.show { padding-top: 8px; }
.page-title { font-size: 1.6rem !important; }
}
/* [all pages] The floating Add Person / Add Family buttons sat fixed over the
bottom-right corner, covering the Deposit Statistics card and the Run button
on the last Query Listing rows. On desktop the only dead space on screen is
the foot of the sidebar, beside the collapse toggle — they live there now as
quiet chips in the sidebar's own vocabulary. */
@media (min-width: 1200px) {
#fab-container {
right: auto !important; left: 12px !important; bottom: 12px !important;
flex-direction: row !important; align-items: center !important; gap: 8px !important;
}
.vq-sidebar-collapsed #fab-container { flex-direction: column !important; bottom: 52px !important; }
.fab-button, .fab-button.fab-family {
width: 28px !important; height: 28px !important; border-radius: 8px !important;
background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important;
color: #cbd5e1 !important; box-shadow: none !important;
}
.fab-button:hover, .fab-button.fab-family:hover {
background: rgba(255,255,255,.14) !important; color: #fff !important; transform: none !important;
}
.fab-button .fab-icon { font-size: 12px !important; }
/* the nav list must be able to scroll clear of the chips */
.navbar-vertical .navbar-collapse { padding-bottom: 56px !important; }
.vq-sidebar-collapsed .navbar-vertical .navbar-collapse { padding-bottom: 140px !important; }
}
/* [mobile] below xl the FABs stay bottom-right; the grey menu toggle and the
green family button become brand/ink so no raw Bootstrap grey or off-brand
green floats over the page. */
@media (max-width: 1199.98px) {
.fab-button.fab-family { background-color: var(--blue) !important; box-shadow: 0 4px 12px rgba(37,99,235,.3) !important; }
.fab-menu-toggle { background-color: var(--ink) !important; box-shadow: 0 4px 12px rgba(15,23,42,.3) !important; }
}
/* [/finance/deposit/search, /finance/funds] A second .container-xl nested in
the page's .container-xl added its own 16px gutter — cards sat at x=284
under a title at x=268. Same fix the theme already applies to nested
.container-fluid. */
.page-body .container-xl .container-xl { padding-inline: 0 !important; }
/* [/finance/reports] Card rows were 76px apart: 24px card margin + 24px .mb-4
on the column + 24px row-gap. Cards already carry the 24px; the column and
row contribute nothing. */
.page-body .row:has(> [class*="col-"] > .card) { row-gap: 0 !important; --tblr-gutter-y: 0; }
.page-body .row:has(> [class*="col-"] > .card) > [class*="col-"] { margin-bottom: 0 !important; }
/* [/finance/reports] Card titles were
rather than .card-title: Tabler's
h5 is 12px, h6 is 10px — the "Membership Reports" header was white-on-white
(bg-dark text-white with the theme's transparent header) and every icon sat
flush against its title. Any heading in a card header is a card title. */
.card-header > :is(h1,h2,h3,h4,h5,h6) {
font-size: 1rem !important; font-weight: 600 !important; color: var(--ink) !important;
margin: 0; display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em;
}
.card-header > :is(h1,h2,h3,h4,h5,h6) > i:first-child { margin-right: 0 !important; }
.card-header.text-white, .card-header.text-white > *, .card-header.bg-dark > * { color: var(--ink) !important; }
.card-header.bg-dark, .card-header.bg-light, .card-header[class*="bg-"] { background: transparent !important; }
h5, .h5 { font-size: .9375rem; }
h6, .h6 { font-size: .8rem; }
.card-body h6:has(> i:first-child) { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
/* [/finance/, /finance/reports, /finance/funds] Text floor is 12px: badges
were 11.52px, table headers and DataTables column titles 10.72px, the
page pretitle 10.9px. */
.badge { font-size: 12px !important; }
.table thead th, .dt-column-title { font-size: 12px !important; letter-spacing: .06em; }
.page-pretitle, .subheader { font-size: 12px !important; }
/* [/finance/reports helper text, /finance/ Fiscal Year, DataTables labels]
--soft (#8591a2) on white is 3.6:1. #64748b is 4.8:1 and still reads as
secondary. */
.text-muted, .text-secondary, small, .small, .page-pretitle, .subheader,
.dt-info, .dt-search label, .dt-length label, .dt-column-order,
.text-body-secondary, .form-text, .help-block, .empty-subtitle { color: #64748b !important; }
.dt-column-order::before, .dt-column-order::after { color: #64748b !important; }
/* [/finance/deposit/search] Numeric and date columns had their sort arrows
BEFORE the title (DataTables flips them to row-reverse) while the theme
left-packed the header — "▼ ID" against a right-aligned column. */
th.dt-type-numeric .dt-column-header, th.dt-type-date .dt-column-header {
flex-direction: row !important; justify-content: flex-end !important;
}
/* [/finance/ "No Active Deposit"] The empty-state glyph was Bootstrap grey. */
.empty-icon, .empty-icon > i, .empty-icon > svg { color: var(--blue) !important; }
.empty-title { color: var(--ink) !important; font-weight: 600; }
/* [/finance/funds "Active", /finance/ checklist] Soft badge variants Tabler
spells -lt were falling through to the default blue tint. Colour means
status here, so it stays. */
.badge.bg-success-lt, .badge.bg-green-lt, .badge.bg-teal-lt { background: #e6f6ed !important; color: #1f8a55 !important; }
.badge.bg-warning-lt, .badge.bg-orange-lt, .badge.bg-yellow-lt { background: #fdf1de !important; color: #b06d13 !important; }
.badge.bg-danger-lt, .badge.bg-red-lt { background: #fdeaea !important; color: #c2403c !important; }
.badge.bg-warning.text-dark { color: #b06d13 !important; }
/* [/v2/email/dashboard, /v2/text/dashboard, /finance/pledge/dashboard]
Alerts were raw Bootstrap tints with a 0px gap between the copy and the
button inside them ("newsletters" ran into "Plugin Settings"). One soft
tint per meaning, the design radius, and 16px between text and action. */
.alert {
border-radius: 12px !important; padding: 14px 16px !important;
border: 1px solid var(--line) !important; background: #f8fafc !important; color: var(--ink) !important;
}
.alert-success { background: #effaf3 !important; border-color: #cdebd9 !important; }
.alert-warning { background: #fff7ec !important; border-color: #f6dfbd !important; }
.alert-danger { background: #fdf0f0 !important; border-color: #f3cfcf !important; }
.alert-info { background: #eef4ff !important; border-color: #cfdcf9 !important; }
.alert-secondary, .alert-light { background: #f8fafc !important; border-color: var(--line) !important; }
.alert .d-flex { gap: 12px; }
.alert .d-flex > .btn { flex: none; margin-left: auto; }
.alert .d-flex > .btn + .btn { margin-left: 0; }
.alert > i:first-child, .alert .d-flex > i:first-child { flex: none; }
.alert .text-body-secondary, .alert .text-muted, .alert small { color: #64748b !important; }
/* [/QueryView.php, /finance/pledge/dashboard] Bare