html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 0; background: #f7f8fa; color: #222; }
/* Generic */
a { color: #1559b3; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
.btn { display: inline-block; padding: .4rem .8rem; border: 1px solid #ccd; background: #fff; border-radius: 4px; color: #222; text-decoration: none; }
.btn:hover { background: #f0f0f5; text-decoration: none; }
.btn-primary { background: #1559b3; color: #fff; border-color: #1559b3; }
.btn-primary:hover { background: #0e4691; color: #fff; }
.link-button { background: none; border: none; padding: 0; color: #1559b3; text-decoration: underline; }
.link-button.danger { color: #b00020; }
pre { background: #f6f8fa; padding: 1rem; overflow: auto; border-radius: 4px; }
/* Existing legacy smoke-test page (unchanged) */
.page { max-width: 960px; margin: 0 auto; padding: 1rem; }
/* --- Admin chrome --- */
.admin-page { min-height: 100vh; }
.admin-header { display: flex; align-items: center; gap: 2rem; padding: 0 1.5rem; background: #1f2a40; color: #fff; height: 48px; }
.admin-header .brand { font-weight: 600; }
.admin-header .brand-tag { font-weight: 400; opacity: .6; font-size: .85em; margin-left: .25rem; }
.admin-nav { flex: 1; }
.admin-main { padding: 1rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.admin-main h2 { margin-top: 0; }
@media (max-width: 767.98px) {
/* On mobile, ditch the 1200px cap (we WANT full width) and trim padding so
the page content gets the most usable space possible on small screens. */
.admin-main { padding: .75rem; max-width: 100%; }
/* Force html + body + the Radzen layout container to fill the viewport.
Without this, something further up the cascade (Bootstrap, Radzen base,
or a stray inherited style) was constraining to a narrow column
and the entire page was rendering at desktop width then visually squished.
Investigating the DOM showed only covered the dark region — these
resets pin every wrapper to 100% so the responsive media queries actually
reach the visible page. */
html, body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
.rz-layout, .rz-content {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
}
/* Top-level dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown { display: inline-block; position: relative; }
.dropdown > summary.dropdown-toggle { list-style: none; cursor: pointer; user-select: none; background: none; border: none; color: #fff; padding: .5rem .75rem; border-radius: 4px; display: inline-block; }
.dropdown > summary.dropdown-toggle::-webkit-details-marker { display: none; }
.dropdown > summary.dropdown-toggle::marker { content: ""; }
.dropdown > summary.dropdown-toggle:hover { background: rgba(255,255,255,.1); }
.dropdown[open] > summary.dropdown-toggle { background: rgba(255,255,255,.15); }
.dropdown.section-active > summary.dropdown-toggle { background: rgba(255,255,255,.08); }
.caret { font-size: .8em; opacity: .7; }
.dropdown-menu { position: absolute; left: 0; top: 100%; background: #fff; border: 1px solid #ddd; border-radius: 4px; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 10; padding: .25rem 0; }
.dropdown-menu a { display: block; padding: .5rem .9rem; color: #222; }
.dropdown-menu a:hover { background: #f0f0f5; text-decoration: none; }
.dropdown-menu a.active { background: #1559b3; color: #fff; }
/* Sub-menu (tabs) */
.sub-menu { display: flex; gap: .25rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem; }
.sub-menu a { padding: .5rem 1rem; border-radius: 4px 4px 0 0; color: #444; }
.sub-menu a:hover { background: #eef; text-decoration: none; }
.sub-menu a.active { background: #fff; border: 1px solid #ddd; border-bottom-color: #fff; margin-bottom: -1px; font-weight: 600; color: #1559b3; }
/* List pages */
.list-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.list-toolbar input { padding: .35rem .5rem; border: 1px solid #ccd; border-radius: 4px; min-width: 240px; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #ddd; }
.data-table th, .data-table td { padding: .5rem .75rem; border-bottom: 1px solid #eee; text-align: left; }
.data-table th { background: #f4f5f9; font-weight: 600; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { background: #eaecf3; }
.data-table .row-actions { white-space: nowrap; }
.data-table .row-actions a, .data-table .row-actions .link-button { margin-right: .5rem; }
.data-table .empty { text-align: center; color: #888; padding: 1.5rem; font-style: italic; }
/* Pager */
.pager { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .5rem 0; }
.pager select { padding: .25rem; border: 1px solid #ccd; border-radius: 3px; }
.pager button { padding: .35rem .75rem; border: 1px solid #ccd; background: #fff; border-radius: 4px; }
.pager button[disabled] { opacity: .4; cursor: not-allowed; }
.pager .pager-info { margin-left: auto; color: #666; font-size: .9em; }
/* Landing cards (Setup index, etc.) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.setup-card { display: block; padding: 1.25rem; background: #fff; border: 1px solid #ddd; border-radius: 6px; color: inherit; text-decoration: none; transition: box-shadow .1s, border-color .1s; }
.setup-card:hover { border-color: #1559b3; box-shadow: 0 2px 8px rgba(21, 89, 179, .15); text-decoration: none; }
.setup-card h3 { margin: 0 0 .5rem 0; color: #1559b3; }
.setup-card p { margin: 0; color: #555; font-size: .9em; }
.data-table tr.row-muted td { color: #999; }
/* Many-to-many checkbox pickers */
.m2m-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .25rem .75rem; max-height: 260px; overflow-y: auto; padding: .5rem; border: 1px solid #eee; background: #fafbfd; border-radius: 4px; }
.m2m-picker-wide { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.m2m-picker label.checkbox { margin: 0; }
/* Forms */
.entity-form { background: #fff; padding: 1.25rem; border: 1px solid #ddd; border-radius: 4px; max-width: 640px; }
.entity-form label { display: block; margin-bottom: .9rem; font-size: .9em; color: #444; }
.entity-form label.checkbox { display: flex; align-items: center; gap: .5rem; }
.entity-form input[type="text"], .entity-form input[type="number"], .entity-form select, .entity-form textarea {
display: block; width: 100%; padding: .4rem .55rem; border: 1px solid #ccd; border-radius: 4px; margin-top: .25rem; font: inherit;
}
.entity-form textarea { min-height: 140px; }
.form-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.validation-message { color: #b00020; font-size: .85em; }
.validation-errors { color: #b00020; }
/* Entity header (drill-in pages) */
.entity-header { margin-bottom: .5rem; }
.entity-header .back-link { font-size: .85em; color: #666; }
.entity-header h2 { margin: .25rem 0 0; }
/* Detail info cards (dl/dt/dd) */
.info-card { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 1rem 1.25rem; }
.info-card h3 { margin-top: 0; color: #1559b3; font-size: 1rem; }
.info-card dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 1rem; row-gap: .25rem; margin: 0; }
.info-card dt { color: #666; font-size: .9em; }
.info-card dd { margin: 0; word-break: break-word; }
/* ═══════════════════════════════════════════════════════════════════════════
Mobile responsive — Phase 2: inputs, forms, dialogs, touch targets.
Two critical iOS-specific rules in here:
1. `font-size: 16px` on inputs — iOS Safari auto-zooms when a focused
input renders below 16px. The zoom is the "page weirdly stretches
when I tap" annoyance. Pinning to 16px stops it.
2. Minimum 44pt tap targets — iOS Human Interface Guidelines. Below
this, fat fingers miss buttons regularly.
All gated to the same 767.98px breakpoint the AdminLayout sidebar uses, so
the whole UI flips together at one size threshold.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
/* ── iOS auto-zoom prevention ──────────────────────────────────────────
Every input/select/textarea must be ≥ 16px on mobile or Safari zooms
on focus. Applies to native inputs AND Radzen-rendered ones (which
just wrap natives). */
input, select, textarea,
.rz-textbox, .rz-textarea, .rz-dropdown-trigger, .rz-numeric,
.rz-datepicker-input, .rz-mask {
font-size: 16px !important;
}
/* ── Touch targets ───────────────────────────────────────────────────
44pt minimum on every button. Radzen's small/medium buttons fall
short by default. */
.rz-button, button.rz-button-icon, .rz-link, .rz-button-text {
min-height: 44px;
}
.rz-button-sm { min-height: 36px; } /* keep "small" actually smaller for action rows */
/* ── Single-column forms ─────────────────────────────────────────────
Most Radzen form layouts use a 2-3 column grid. Force single-column
so labels and inputs each get full width — no horizontal squeeze. */
.entity-form {
max-width: 100%;
padding: 1rem;
}
.rz-row > [class*="rz-col"] {
flex-basis: 100% !important;
max-width: 100% !important;
}
/* M2M checkbox grids → single column on mobile (3-col grid wastes width). */
.m2m-picker, .m2m-picker-wide {
grid-template-columns: 1fr;
max-height: 320px;
}
/* ── Radzen dialogs ──────────────────────────────────────────────────
Default dialog widths are fixed pixel values (e.g. 600px) — on mobile
they overflow. Force them to 95vw so they fit the viewport.
Stronger than per-call Width="95vw" because it catches every dialog
across the app at once. */
.rz-dialog {
width: 95vw !important;
max-width: 95vw !important;
min-width: 0 !important;
}
.rz-dialog-content { max-height: 75vh; overflow: auto; }
/* ── Tables / datagrids fallback ─────────────────────────────────────
Phase 3 swaps grids for card view; until that lands per-page, at
least let grids scroll horizontally instead of breaking the layout.
Wrapping div is what Radzen renders — gets overflow-x. */
.rz-data-grid, .rz-grid-table {
overflow-x: auto;
}
/* ── Info-card detail layout ─────────────────────────────────────────
The desktop "label / value" 2-column grid stacks on mobile so long
values get the full row width. */
.info-card dl {
grid-template-columns: 1fr;
row-gap: .15rem;
}
.info-card dt { margin-top: .5rem; }
.info-card dt:first-child { margin-top: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Mobile responsive — Phase 3: responsive list cards.
Used by Portal.Web.Components.Shared.ResponsiveListCards. Each list page
that opts in renders:
(renders .responsive-cards container)
The CSS below flips which container is visible at the 768px breakpoint.
Both render server-side; one is display:none per breakpoint.
═══════════════════════════════════════════════════════════════════════════ */
/* Desktop: cards hidden, grid visible. */
.responsive-cards { display: none; }
.responsive-grid { display: block; }
@media (max-width: 767.98px) {
/* Mobile: grid hidden, cards visible. */
.responsive-grid { display: none; }
.responsive-cards { display: block; }
}
.responsive-card {
background: var(--rz-panel-background-color, #fff);
border: 1px solid rgba(127,127,127,.2);
border-radius: 8px;
padding: .85rem 1rem;
margin-bottom: .6rem;
cursor: pointer;
transition: background .12s ease, box-shadow .12s ease;
-webkit-tap-highlight-color: transparent;
}
.responsive-card:active {
background: rgba(127,127,127,.07);
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.responsive-card-title {
font-weight: 600;
font-size: 1rem;
margin-bottom: .15rem;
}
.responsive-card-meta {
font-size: .85rem;
color: var(--rz-text-secondary-color, #666);
line-height: 1.4;
}
.responsive-card-meta.muted { opacity: .65; }
.responsive-cards-empty {
text-align: center;
padding: 2rem 1rem;
color: var(--rz-text-secondary-color, #666);
}
[data-theme="material-dark"] .responsive-card { border-color: rgba(255,255,255,.08); }
/* ═══════════════════════════════════════════════════════════════════════════
Mobile responsive — Phase 4: polish.
Touch target sizing for nav items, bottom-sheet treatment for dialogs,
safe-area insets (iPhone notch), and a couple of dark-mode + mobile
crossover fixes.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
/* ── Side-menu nav rows ──────────────────────────────────────────────
Radzen's RadzenPanelMenuItem renders .rz-navigation-item-link; on
desktop the padding is fine, on mobile we want 44pt tap targets
throughout the menu tree (top-level + nested). */
.portal-sidebar .rz-navigation-item-link {
min-height: 44px;
padding-top: .5rem !important;
padding-bottom: .5rem !important;
}
/* Sub-menu items use a tighter compact layout by default; loosen on mobile. */
.portal-sidebar .rz-navigation-menu .rz-navigation-item-link {
padding-left: 2.25rem !important;
}
/* Safe-area insets — push content clear of the iPhone notch/home-bar. */
.rz-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.rz-body { padding-bottom: env(safe-area-inset-bottom); }
.portal-sidebar { padding-bottom: env(safe-area-inset-bottom); }
/* ── Dialogs as bottom-sheets ────────────────────────────────────────
Mobile pattern: dialogs slide up from the bottom, full-width, with a
top-only border radius. Looks native on iOS/Android. Falls back to
centered if min-height isn't sufficient. */
.rz-dialog {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
transform: none !important;
width: 100vw !important;
max-width: 100vw !important;
border-radius: 16px 16px 0 0 !important;
padding-bottom: env(safe-area-inset-bottom);
}
.rz-dialog-content { max-height: 70vh; }
/* ── Misc ───────────────────────────────────────────────────────────
Prevent body scroll under fixed elements. */
html, body { overscroll-behavior: contain; }
/* Scrollbar on Radzen body wasn't always reaching the bottom on iOS Safari
— adding -webkit-overflow-scrolling for the momentum scroll feel. */
.rz-body, .rz-dialog-content, .responsive-cards {
-webkit-overflow-scrolling: touch;
}
}