(initials/icon
fallback) — object-fit only matters for the ![]()
case, and is
harmless on a
. */
.info-card-icon {
width: 56px;
height: 56px;
border-radius: 50%;
flex-shrink: 0;
margin-right: 1rem;
object-fit: cover;
}
/* Extra styling only the initials/icon fallback needs — a real photo
already fills the circle on its own. */
.info-card-icon-fallback {
display: flex;
align-items: center;
justify-content: center;
background-color: #1b3f7a;
color: #fff;
font-size: 1.1rem;
}
.info-card-icon-fallback svg {
width: 24px;
height: 24px;
}
.info-card-pills {
margin-top: 0.25rem;
}
.info-card-list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
/* :last-child, not "every item except the JS-guessed last one" — the
list of which lines actually render varies per card (not everyone
has a phone number, not every event has a location), so letting CSS
figure out which is actually last is what keeps this correct
automatically instead of depending on every render() function
remembering to special-case its own final line. */
.info-card-list li {
margin-bottom: 0.5rem;
}
.info-card-list li:last-child {
margin-bottom: 0;
}
.info-card-footer {
background: transparent;
border: 0;
padding: 0 1rem 1rem;
display: flex;
gap: 0.5rem;
}
/* ================
Membership Card Icons
================== */
/* Icons replacing emoji on the membership cards (members.html), sized
down from the 20px sidebar-nav-icon convention to sit inline with
card text and badge labels. Lucide's SVGs default to
stroke="currentColor", so they pick up the surrounding text/badge
color automatically. */
.member-card-icon {
width: 14px;
height: 14px;
vertical-align: -2px;
margin-right: 4px;
flex-shrink: 0;
}
.badge-icon {
width: 12px;
height: 12px;
vertical-align: -1px;
margin-right: 3px;
}
.nav-item.active {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border-left: 3px solid #ffffff;
}
.sidebar-bottom {
padding: 16px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Icons injected by sidebar.js (Assets/JS/sidebar.js) into the actual
Bootstrap nav-pills sidebar every dashboard page uses — sized to
match the 20px convention already used for the admin panel's own
sidebar icons. Lucide's SVGs default to stroke="currentColor", so
they automatically pick up whatever color the surrounding nav-link
text already has, active or not. */
.sidebar-nav-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Bootstrap's .nav-pills sets --bs-nav-pills-link-active-bg itself
(defaulting to Bootstrap blue, #0d6efd) rather than deriving it from
--bs-primary, so overriding --bs-primary elsewhere in the dashboard
never touched the sidebar's active-item highlight. Override that
variable directly, scoped to the sidebar, so the clicked/active nav
item gets a navy fill instead. */
#sidebar .nav-pills {
--bs-nav-pills-link-active-bg: #1b2a4a;
}
/* The sidebar's user-menu (Settings / Sign out) is the one actual
Bootstrap dropdown-menu popup in the dashboard — its hover/active
item highlight defaults to Bootstrap blue same as the form controls
above, so brand it navy too. */
#sidebar .dropdown-item:hover,
#sidebar .dropdown-item:focus,
#sidebar .dropdown-item:active {
background-color: #1b2a4a;
color: #fff;
}
/* ================
Mobile/Tablet Nav (sidebar.js's setupMobileNav())
Below the lg breakpoint (991.98px — same cutoff the media query at
the bottom of this file uses) the real sidebar built by sidebar.js
(id="sidebar", 280px wide, Bootstrap .nav-pills markup — NOT the
dead .sidebar/.nav-item rules above, which nothing on the actual
pages uses) switches from a normal in-flow flex column to an
off-canvas drawer opened by a hamburger button in a slim top bar.
================== */
/* Fixed, not sticky/in-flow: `body` itself is display:flex (see top of
this file), so a plain inserted child would sit beside the sidebar
row as a flex item instead of stacking above it. Fixed positioning
sidesteps that regardless of the parent's layout mode; the content
wrapper gets margin-top to compensate (see the media query below). */
.gmp-mobile-topbar {
display: none;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: #ffffff;
border-bottom: 1px solid #dee2e6;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1020;
}
.gmp-mobile-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #1b2a4a;
padding: 6px;
cursor: pointer;
}
.gmp-mobile-toggle-btn i {
width: 24px;
height: 24px;
}
.gmp-mobile-topbar-logo {
height: 28px;
width: auto;
}
.gmp-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1040;
}
.gmp-sidebar-backdrop.show {
display: block;
}
/* Locks background scroll behind the open drawer. */
body.gmp-sidebar-locked {
overflow: hidden;
}
/* ================
Main Content
================== */
.dashboard-main {
margin-left: 250px;
padding: 40px;
flex-grow: 1;
}
.dashboard-header h1 {
font-size: 1.6rem;
margin-bottom: 4px;
}
.dashboard-header p {
color: #777;
}
/* ================
Stats Cards
================== */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 30px;
}
.stat-card {
background: #ffffff;
border-radius: 8px;
padding: 24px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.stat-card i {
width: 36px;
height: 36px;
color: #1b2a4a;
}
.stat-info {
display: flex;
flex-direction: column;
}
.stat-number {
font-size: 1.5rem;
font-weight: 700;
}
.stat-label {
font-size: 0.85rem;
color: #777;
}
/* ================
Dashboard Grid
================== */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
}
.dashboard-card {
background: #ffffff;
border-radius: 8px;
padding: 24px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.dashboard-card h3 {
margin-bottom: 20px;
font-size: 1.1rem;
}
/* ================
Activity List
================== */
.activity-list {
list-style: none;
}
.activity-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.activity-list li:last-child {
border-bottom: none;
}
.activity-list li i {
width: 20px;
height: 20px;
color: #1b2a4a;
flex-shrink: 0;
}
.activity-list li p {
font-size: 0.95rem;
}
.activity-list li span {
font-size: 0.8rem;
color: #999;
}
/* ================
Events List
================== */
.events-list {
list-style: none;
}
.events-list li {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.events-list li:last-child {
border-bottom: none;
}
.event-date {
display: flex;
flex-direction: column;
align-items: center;
background: #1b2a4a;
color: #ffffff;
border-radius: 6px;
padding: 8px 12px;
min-width: 50px;
}
.event-month {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.event-day {
font-size: 1.2rem;
font-weight: 700;
}
.events-list li p {
font-size: 0.95rem;
}
.events-list li span {
font-size: 0.8rem;
color: #999;
}
/* ================
Image Upload Slots
Shared across any page that needs a bounded image-upload
preview box — events, website builder, profile/logo uploads, etc.
Usage:
+ Add Image
================== */
.image-upload-slot {
border: 2px dashed #dee2e6;
border-radius: 8px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: pointer;
background: #f8f9fa;
}
.image-upload-slot img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
}
.image-upload-slot .upload-placeholder {
text-align: center;
color: #777;
font-size: 0.85rem;
}
.image-upload-slot .remove-image-btn {
position: absolute;
top: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 50%;
width: 22px;
height: 22px;
line-height: 1;
font-size: 0.85rem;
display: none;
}
.image-upload-slot.has-image .remove-image-btn {
display: block;
}
/* Size variants — add one of these alongside .image-upload-slot
for pages that need something other than the 140px default
(e.g. a wide website-builder banner image). */
.image-upload-slot--sm {
height: 90px;
}
.image-upload-slot--wide {
height: 200px;
}
/* ================
Ticket Tier Rows
Used on the events page for ticket types / bundles, but generic
enough to reuse anywhere you need a repeatable, removable row
of form fields (e.g. website builder page sections).
================== */
.ticket-tier-row {
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
}
/* ================
Calendar Grid
Shared month-view calendar — used on Hall Bookings, and reusable
for Events or anywhere else a month grid is useful.
================== */
.calendar-grid {
display: grid;
/* minmax(0, 1fr), not a bare 1fr — a plain 1fr track's implicit
minimum is its content's max-content width, so a day with a
long event name (or several events) refuses to shrink below
that and forces the whole grid, and the page along with it,
to overflow horizontally instead of just wrapping/eliding the
event text inside its cell like it's supposed to. */
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.calendar-grid .cal-dow {
font-weight: 600;
font-size: 0.8rem;
text-align: center;
padding: 4px 0;
color: #777;
}
.calendar-grid .cal-cell {
min-height: 90px;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 4px;
font-size: 0.8rem;
}
.calendar-grid .cal-cell.cal-empty {
border-color: transparent;
}
.calendar-grid .cal-daynum {
font-weight: 600;
margin-bottom: 2px;
}
.calendar-grid .cal-event {
display: block;
color: #fff;
border-radius: 4px;
padding: 1px 4px;
margin-bottom: 2px;
font-size: 0.72rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.cal-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 4px;
}
/* ================
Form Fields, Dropdowns & Popups
Shared focus appearance across every dashboard page — inside modals
("pop ups") and on regular pages alike — so native date/time pickers,