, not
) was never caught and stayed dark on the blue header. Icons included too. */
.dialog-header :is([class*="rz-text-"], h1, h2, h3, h4, h5, h6, p, .rzi, .rz-icon, .notranslate),
.committee-dialog-header :is([class*="rz-text-"], h1, h2, h3, h4, h5, h6, p, .rzi, .rz-icon, .notranslate),
.member-dialog-header :is([class*="rz-text-"], h1, h2, h3, h4, h5, h6, p, .rzi, .rz-icon, .notranslate) {
color: inherit !important;
}
/* =================================================================
HERO / BANNER TEXT CONTRAST (same problem as dialog headers above)
Page heroes sit on a dark/colored gradient and set color:white (or
color:var(--theme-surface)) on the wrapper, expecting the title,
subtitle and stat numbers/labels to inherit it. But RadzenText/
RadzenIcon render their OWN default (dark) theme color on the element
itself, which beats inheritance -> dark, unreadable text on the blue
hero (seen on Community Events and most stat-hero pages). Force every
text node + icon inside a hero/banner to inherit the wrapper's color.
Scoped to text + icons ONLY (NOT .rz-textbox/.rz-dropdown/.rz-button)
so filter-hero inputs and action buttons keep their own colors. A hero
that deliberately sets an inline color on a RadzenText still wins.
NOTE: matches the *-hero wrappers (events-hero, announcements-hero,
marketplace-hero, detail-hero-banner [contains "-hero"], …) — every one
sets a light color:white / var(--theme-surface) on the wrapper, so
inheriting it is correct. Deliberately NOT ".hero-section" (shared with
the Home landing hero, whose wrapper sets NO color — inheriting there
pulls the dark page color and breaks it; [class*="-hero"] doesn't match
"hero-section" anyway, no leading-dash). And deliberately NOT
[class*="-banner"]: that also matches LIGHT callouts (.info-banner amber-
on-cream, .selected-school-banner) that set no light wrapper color, so
inheriting would wipe their intended colors. Dark hero banners are named
*-hero-banner and are already covered by the "-hero" match. */
[class*="-hero"] :is([class*="rz-text-"], h1, h2, h3, h4, h5, h6, p, .rzi, .rz-icon, .notranslate) {
color: inherit !important;
}
/* =================================================================
HERO ICON BADGE (the reusable component)
Standard amber-gradient rounded-square badge + white icon shown
beside every page-hero title. Retune ALL hero icons app-wide from
here. The icon is an inline SVG (AppIcon) or webfont fallback (.rzi);
either way it inherits the badge's white. NOTE: class is
"hero-icon-badge" (no leading-dash "hero"), so the hero text-contrast
rule above doesn't recolor the badge itself — only the icon inside it,
which we want white anyway.
================================================================= */
.hero-icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: 0 0 auto;
border-radius: var(--ps-radius-md, 12px);
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
color: #ffffff;
}
.hero-icon-badge .app-icon,
.hero-icon-badge .rzi,
.hero-icon-badge .rz-icon {
width: 1.6rem;
height: 1.6rem;
font-size: 1.6rem;
line-height: 1;
color: #ffffff;
}
@media (max-width: 640px) {
.hero-icon-badge {
width: 44px;
height: 44px;
border-radius: 10px;
}
.hero-icon-badge .app-icon,
.hero-icon-badge .rzi,
.hero-icon-badge .rz-icon {
width: 1.4rem;
height: 1.4rem;
font-size: 1.4rem;
}
}
/* =================================================================
HERO STAT ROW OVERFLOW (phones only)
Page heroes/banners lay out a horizontal RadzenStack with the title on
the left and stat blocks (number + label) on the right, using
JustifyContent.SpaceBetween. On a narrow phone the long title and the
stats can't share one row, so the stats spill past the hero's right
edge and get clipped (the hero is overflow:hidden). On phones, stack
that top row vertically — title above, stats below, left-aligned — so
nothing is cut off. Scoped to hero/banner containers and to the
space-between row, so other stacks are untouched. Radzen emits both a
utility class and (older) an inline style, so we match either.
NOTE: [class*="-hero"] matches marketplace-hero / my-biz-hero etc., but
NOT the templated Election Hub / Alumni Hub family, whose container is
class="hero-section" (substring "hero-", no leading dash). Those are the
pages whose action buttons (Add Target, Export Data, …) were clipping off
the right edge on phones, so .hero-section is matched explicitly below.
================================================================= */
@media (max-width: 767.98px) {
[class*="-hero"] .rz-stack.rz-justify-content-space-between,
[class*="-hero"] .rz-stack[style*="space-between"],
.hero-section > .rz-stack.rz-justify-content-space-between,
.hero-section > .rz-stack[style*="space-between"],
[class*="-banner"] .rz-stack.rz-justify-content-space-between,
[class*="-banner"] .rz-stack[style*="space-between"] {
flex-direction: column !important;
align-items: flex-start !important;
}
}
/* Hero FILTER rows (phones + tablets + iPad, up to 1024px). Many heroes (esp. the
AlumniHub Public directory pages — Colleges, Schools, High/Elementary, Directory)
put a search box + town/type dropdowns, each with a FIXED inline width (200px/150px),
in a horizontal stack on the right of the hero. The ~550px row runs off the hero's
right edge — NOT just on phones but on iPad/tablet portrait (768–1024px) too, where
the phone-only rule never reached ("Select Towns" / "All Types" clipped off-screen).
For ANY hero whose row contains form inputs: (1) column-stack the OUTER hero row so
the filters drop BELOW the title, then (2) let the filter row + inputs fill the width
(width:100% beats their non-important inline width). :has() scopes this to filter
heroes only — stat/action-button heroes are untouched.
`.rz-autocomplete` belongs in every list here: it is what [SchoolSwitcher] renders, and
while it was missing the School Events / Announcements heroes kept their "Search
school…" box beside the action button at half width on a phone. */
@media (max-width: 1024px) {
.hero-section > .rz-stack:has(.rz-textbox, .rz-dropdown, .rz-lookup, .rz-datepicker, .rz-numeric, .rz-autocomplete),
[class*="-hero"] > .rz-stack:has(.rz-textbox, .rz-dropdown, .rz-lookup, .rz-datepicker, .rz-numeric, .rz-autocomplete) {
flex-direction: column !important;
align-items: stretch !important;
}
.hero-section .rz-stack:has(> .rz-textbox, > .rz-dropdown, > .rz-lookup, > .rz-datepicker, > .rz-numeric, > .rz-autocomplete),
[class*="-hero"] .rz-stack:has(> .rz-textbox, > .rz-dropdown, > .rz-lookup, > .rz-datepicker, > .rz-numeric, > .rz-autocomplete) {
width: 100% !important;
flex-wrap: wrap !important;
}
/* An input paired with an action button (School Events "Create Event", Announcements
"New Announcement"): the BUTTON goes on top and the input takes the full row below
it. The button is last in the DOM, so column-reverse puts it first visually without
touching any page's markup. */
.hero-section .rz-stack:has(> .rz-autocomplete):has(> .rz-button),
[class*="-hero"] .rz-stack:has(> .rz-autocomplete):has(> .rz-button) {
flex-direction: column-reverse !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
}
.hero-section .rz-stack > .rz-textbox,
.hero-section .rz-stack > .rz-dropdown,
.hero-section .rz-stack > .rz-lookup,
.hero-section .rz-stack > .rz-datepicker,
.hero-section .rz-stack > .rz-numeric,
.hero-section .rz-stack > .rz-autocomplete,
[class*="-hero"] .rz-stack > .rz-textbox,
[class*="-hero"] .rz-stack > .rz-dropdown,
[class*="-hero"] .rz-stack > .rz-lookup,
[class*="-hero"] .rz-stack > .rz-datepicker,
[class*="-hero"] .rz-stack > .rz-numeric,
[class*="-hero"] .rz-stack > .rz-autocomplete {
width: 100% !important;
/* [SchoolSwitcher] carries an inline max-width:360px — release it here too. */
max-width: none !important;
flex: 1 1 100% !important;
min-width: 0 !important;
}
}
/* =================================================================
DIALOG FORM ROWS — one field per row on phones.
The Alumni dialogs (and any dialog that copied the pattern) lay their fields out
with a page-local `.form-row` (2 columns) / `.form-row-3` (3 columns) grid, and
15 of them shipped with NO mobile override — so a phone got three ~90px inputs
side by side ("Conta… | Email | Phone") with the labels truncated.
These class names are already effectively global (a razor style block is not
scoped), so the breakpoint belongs here once rather than in every dialog.
!important because the page-local rule has the same specificity and is injected
into the body, i.e. AFTER this file. Flex-based `.form-row`s (EmailCompose) are
untouched — grid-template-columns does nothing to them.
`.form-row-3` collapses one breakpoint earlier: three long inputs need the room
even on a small tablet, where two still fit.
================================================================= */
@media (max-width: 767.98px) {
.form-row-3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
.form-row, .form-row-2 { grid-template-columns: 1fr !important; }
}
/* FORM CARDS ON PHONES — one field per row, and compact card spacing.
The Alumni editor pages (School Profile, Settings, …) put 2–3 fields side by side with
`` and `flex: 1` children instead of the `.form-row`
grid, which squeezes each field to ~110px on a phone ("School Ty…", "F…"). Stack ANY
horizontal Radzen stack whose children are form fields — vertical stacks are already
column, so they're unaffected — and trim the card padding/margins that were tuned for
desktop. The existing phone rule above only trims the card's LEFT/RIGHT gutters. */
@media (max-width: 640px) {
.rz-stack:has(> .rz-form-field),
.rz-stack:has(> * > .rz-form-field) {
flex-direction: column !important;
align-items: stretch !important;
gap: 0.75rem !important;
}
.page-content-area .data-card { margin-bottom: 0.75rem !important; }
.page-content-area .data-card .card-header {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
.page-content-area .data-card .card-body {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
.page-content-area .form-section { margin-bottom: 0.75rem !important; }
}
/* Same treatment for the READ-ONLY `.info-grid` label/value pairs in the view dialogs
(Member / Batch / School / Event / Announcement / Donation / Project / ContentBlock /
EmailTemplate): a fixed `repeat(2, 1fr)` squeezed both pairs into ~150px columns and
wrapped the values.
SCOPED TO `.rz-dialog` ON PURPOSE. Three PAGES (School Applications, Verification
Queue, Poll Watcher Info) use the same class name for a compact chip grid built on
`auto-fit/minmax(120–280px)`, which already reflows on its own — forcing 1fr there
would stretch each little "Batch / Members" chip across the whole width. Dialogs only. */
@media (max-width: 640px) {
.rz-dialog .info-grid { grid-template-columns: 1fr !important; }
}
/* A grid ITEM's default min-width is its content size, so a long unbroken value (an email,
a company name) made its column wider than its 1fr share and the text painted straight
over the neighbouring pair — the "Edward De Guzman / edeguzman@…IT Professional" overlap
on the Verification Queue cards. Let the item shrink and let the value break. Applies to
every .info-grid (pages + dialogs); labels are short and unaffected. */
.info-grid .info-item { min-width: 0; }
.info-grid .info-item span { overflow-wrap: anywhere; }
/* =================================================================
SCHOOL SWITCHER ROW (Alumni Hub school-management pages).
The single-select school autocomplete that sits as its own row above the hero
(dashboard) or below it (profile/officers/donations/gallery/projects/reports/
verification). On desktop it stays a compact 360px switcher; on tablet/phone it
should span the FULL hero width (no left inset) and hug the hero with a tighter
gap. The inner .rz-autocomplete carries an inline max-width:360px, so the
breakpoint override needs !important to release it.
================================================================= */
.school-switch { margin-bottom: 1.5rem; max-width: 360px; }
.school-switch .rz-autocomplete { width: 100% !important; }
@media (max-width: 1024px) {
.school-switch { max-width: 100%; margin-bottom: 0.5rem; }
.school-switch .rz-autocomplete { max-width: 100% !important; }
}
/* The same switcher also appears INSIDE an empty state ("Select a school to view
batches"), where it is the page's only control — there it should use the width it
has instead of sitting as a 360px box with wide dead margins either side. The
component carries an inline max-width, hence !important. Phones also lose the
empty state's 1.5rem side padding so the box runs nearly edge to edge. */
.ps-empty .rz-autocomplete { width: 100% !important; max-width: 420px !important; }
@media (max-width: 640px) {
.ps-empty { padding-left: 0.75rem; padding-right: 0.75rem; }
.ps-empty .rz-autocomplete { max-width: none !important; }
}
/* =================================================================
FILTER-BAR RESPONSIVE SIZING (Alumni Hub + admin list pages).
The .filter-bar rows carry filter controls (dropdowns, multi-select, search
boxes) with fixed inline widths (e.g. 150/180/200/350px). On desktop those
fixed widths stay. On:
- tablet (<=1024px): the controls share the row EQUALLY and fill its full
width (flex: 1 1 0), so there's no dead space on the right.
- phone (<=768px): the bar stacks and each control takes its own FULL-width
row.
Scoped to DIRECT Radzen-control children only, so action buttons (.rz-button)
and flex spacers keep their natural size, and RadzenRow-based filter bars
(Election admin) — where the direct child is .rz-row, not a control — are
untouched. !important is needed to beat the inline widths.
`.ps-picker-field` is in the list because the School/Town/User/Entity PICKER FIELDS are the one
filter control that is NOT a Radzen control — it renders its own wrapper, so before it was listed
the "All Schools" picker on the Verification Queue kept its inline 280px while every neighbouring
filter went full width on a phone. */
@media (max-width: 1024px) {
.filter-bar > .rz-dropdown,
.filter-bar > .rz-textbox,
.filter-bar > .rz-lookup,
.filter-bar > .rz-datepicker,
.filter-bar > .rz-numeric,
.filter-bar > .ps-picker-field {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
}
}
@media (max-width: 768px) {
.filter-bar {
flex-direction: column;
align-items: stretch;
}
.filter-bar > .rz-dropdown,
.filter-bar > .rz-textbox,
.filter-bar > .rz-lookup,
.filter-bar > .rz-datepicker,
.filter-bar > .rz-numeric,
.filter-bar > .ps-picker-field {
flex: 0 0 auto !important;
width: 100% !important;
}
}
/* =================================================================
DROPDOWN / LOOKUP POPUP OVERFLOW (phones).
A RadzenDropDownDataGrid / RadzenLookup opens its options in a JS-positioned,
absolutely-placed .rz-dropdown-panel (sometimes wrapped in .rz-popup). When the
grid has fixed-width columns (Town/City 180 + Type 120 + District 100 + checkbox
50 = ~450px) the panel's natural width exceeds the phone, so the popup spills off
BOTH edges (the first column is clipped on the left). Cap the panel/popup to the
viewport and let the grid scroll horizontally inside it instead. Found on many
pages that open a picker grid (AlumniHub town/school filters, etc.).
================================================================= */
@media (max-width: 767.98px) {
/* Baseline cap for every dropdown/lookup popup (harmless for normal item-list
dropdowns, which are already narrow). */
.rz-popup,
.rz-dropdown-panel {
max-width: 96vw !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Grid pickers specifically: Radzen's JS sets inline left/width for the FULL grid
width (~450px) before this CSS caps it, so capping width alone leaves the panel
at a negative left (clipped on the left). Re-anchor the grid popups to a fixed
on-screen span (2vw..98vw) and let the datagrid scroll horizontally inside.
:has() limits this to grid popups, so ordinary dropdowns keep their natural
under-the-trigger positioning. */
.rz-dropdown-panel:has(.rz-data-grid, .rz-datatable, .rz-grid-table) {
left: 2vw !important;
right: 2vw !important;
width: auto !important;
max-width: 96vw !important;
overflow-x: auto !important;
}
.rz-popup .rz-data-grid,
.rz-popup .rz-datatable,
.rz-popup .rz-grid-table,
.rz-dropdown-panel .rz-data-grid,
.rz-dropdown-panel .rz-datatable,
.rz-dropdown-panel .rz-grid-table {
max-width: 100% !important;
}
}
@media (max-width: 1024px) {
/* Generic safety net for ALL Radzen dialogs (now covers tablets/iPad too) */
.rz-dialog {
max-width: 96vw !important;
max-height: 96vh !important;
max-height: 96dvh !important;
}
.rz-dialog .rz-dialog-content {
max-height: 96vh !important;
max-height: 96dvh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* HARDCODED DIALOG MIN-WIDTH OVERFLOW (phones/tablets).
~64 in-app dialogs hardcode min-width: 600–800px on their OWN root wrapper
(.dialog-container, .telegram-campaign-dialog, .route-dialog-container, …).
On a narrow screen that forces the wrapper wider than the 96vw dialog cap,
so the dialog overflows horizontally and the footer's primary button (Create
Campaign / Go Live) is pushed off the right edge — only Cancel stays visible.
Neutralize the min-width on the wrapper(s) inside .rz-dialog-content so they
fit. The flex children get min-width:0 too (a flex item's default min-width
is its content size, which would otherwise still overflow). NOTE: dropdown
popups (.rz-popup .rz-dropdown-panel) set their own min-width and render in a
SEPARATE overlay — they are not descendants of .rz-dialog-content, so this
rule deliberately doesn't touch them. */
.rz-dialog .rz-dialog-content > *:not(style):not(script),
.rz-dialog .rz-dialog-content [class*="dialog-container"],
.rz-dialog .rz-dialog-content [class*="-dialog"] {
min-width: 0 !important;
max-width: 100% !important;
}
/* Shared in-app dialog pattern: pin header + footer, scroll the body.
Anchored near the TOP (not vertically centered) — centering a tall dialog
positions it by its full height, which can push the header above the
viewport. Top-anchoring keeps the header visible; the body scrolls.
Scoped to dialogs that actually use the pattern.
The Alumni dialogs came in FOUR naming families — .dialog-*, .view-* (the 8
*ViewDialogs), .note-* (verification notes) and .album-* (AlbumViewDialog) —
and only the first was listed here, so the other 11 scrolled as one block and
their Cancel/Save sat below the fold on a phone. All four are matched now. */
.rz-dialog:has(.dialog-footer),
.rz-dialog:has(.view-footer),
.rz-dialog:has(.note-footer),
.rz-dialog:has(.album-footer) {
position: fixed !important;
top: 2dvh !important;
left: 50% !important;
transform: translateX(-50%) !important;
height: auto !important;
max-height: 96vh !important;
max-height: 96dvh !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.rz-dialog:has(.dialog-footer) .rz-dialog-titlebar,
.rz-dialog:has(.view-footer) .rz-dialog-titlebar,
.rz-dialog:has(.note-footer) .rz-dialog-titlebar,
.rz-dialog:has(.album-footer) .rz-dialog-titlebar {
flex: 0 0 auto !important;
}
.rz-dialog:has(.dialog-footer) .rz-dialog-content,
.rz-dialog:has(.view-footer) .rz-dialog-content,
.rz-dialog:has(.note-footer) .rz-dialog-content,
.rz-dialog:has(.album-footer) .rz-dialog-content {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important; /* the inner .dialog-content does the scrolling */
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* The component root becomes the flex column that holds header / content /
footer. Exclude