in FamilyLayout.razor)
* so PLO Admin and GW Admin are completely unaffected.
*/
/* Page content fade-in: opacity + slight translateY slide-up on load.
Without this, content snaps into place; the animation gives the page a
polished, app-like entrance that feels less jarring on mobile. */
@keyframes family-content-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.family-portal .content-area {
animation: family-content-fadein 280ms ease-out both;
}
/* massiv-content-fadein keyframe is intentionally removed — AOS handles per-element
entrance animations on the cards and sections inside .content-area. Animating the
wrapper itself caused a double-fade: content started at opacity:0 twice and stayed
invisible on PLO Admin mobile after Blazor navigation until a manual browser refresh. */
/* Pending-status banner — shown on the family dashboard when the officer has set the
family's status to Pending. Amber/warning colour signals "action needed" without
being as alarming as red. Without visible styling, the banner blends into the page. */
.pending-status-banner {
background: #fff8e1;
border-left: 4px solid #f59e0b;
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 20px;
color: #78350f;
}
.pending-status-banner strong {
display: block;
margin-bottom: 4px;
font-size: 0.95rem;
}
.pending-status-banner p {
margin: 0;
font-size: 0.9rem;
color: #92400e;
}
/* Card lift: form-cards respond to pointer hover with a gentle 3D lift.
The transition makes it smooth regardless of mouse speed. */
.family-portal .form-card {
transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.family-portal .form-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}
/* Same lift for PLO Admin and GW Admin — scoped away from family-portal so
the two hover effects don't stack on officers who see both portals. */
.main-content:not(.family-portal) .form-card {
transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.main-content:not(.family-portal) .form-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}
/* On press/tap the card settles back slightly — tactile press-down feedback */
.family-portal .form-card:active {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
/* Button press: scale-down on tap gives satisfying physical feedback on mobile.
Not applied to btn-outline-secondary (Cancel/close buttons) — those are
secondary actions and should feel less interactive to avoid accidental taps. */
.family-portal .btn:not(.btn-outline-secondary) {
transition: transform 100ms ease-out;
}
.family-portal .btn:not(.btn-outline-secondary):active {
transform: scale(0.97);
}
/* ===== DATE / TIME INPUT — full-field click target =====
* Browsers only open the native picker when the user clicks the small calendar/clock
* icon on the right edge. This invisible indicator overlay catches clicks anywhere on
* the input so the picker opens regardless of where the user taps — critical on mobile
* where hit-target precision is low.
* position:relative is required so the absolutely-positioned indicator stays anchored
* inside the input box rather than escaping to the nearest positioned ancestor.
* The ::-webkit-calendar-picker-indicator rule is ignored by browsers that don't support
* it (Firefox uses a different native control), so there is no cross-browser regression. */
input[type="date"],
input[type="time"] {
position: relative;
cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
cursor: pointer;
}
/* ===== RESPONSIVE — mobile slide-out drawer ===== */
@media (max-width: 768px) {
/* Sidebar leaves the flex flow entirely and becomes a fixed overlay.
Without position:fixed it would still push main-content sideways.
overflow-y:auto lets the drawer scroll when nav links exceed viewport height —
without it, items below the fold are clipped and unreachable by swipe. */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 270px;
z-index: 300;
transform: translateX(-100%);
overflow-y: auto;
}
/* flex:1 lets the nav list expand to fill remaining sidebar space below the brand
header; overflow-y:auto gives it an independent scroll track so short sidebars
don't leave dead space and tall ones don't clip the last items. */
.nav-menu {
flex: 1;
overflow-y: auto;
}
/* max-height:90vh caps modal height to the visible screen so content is never
taller than the viewport; overflow-y:auto adds an internal scroll track for
long-form modals instead of clipping them. */
.modal-card {
max-height: 90vh;
overflow-y: auto;
}
/* Adding sidebar-open via JS slides the panel in. Box-shadow adds depth
so it reads as floating above the page, not part of the layout. */
.sidebar.sidebar-open {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
}
/* M22 — replaced by edge-swipe-to-open + a first-load peek animation
(massiv-interop.js), so there's no longer a visible button on mobile.
The button, its markup, and its click listener all stay intact — this
is a pure visual hide, scoped to this max-width:768px breakpoint only,
so desktop/tablet behavior (already display:none by the base rule
above) is completely unaffected. */
.hamburger-btn {
display: none;
}
/* M22 fix 2 — persistent edge-sliver affordance, now a standalone fixed
element (PLOAdminLayout.razor) instead of a .sidebar::after pseudo.
The pseudo-element approach (M22 fix) never actually rendered: .sidebar
needs overflow-y:auto for its own scrollable nav menu, and overflow
clips ANY child — including a pseudo-element — that tries to paint
outside the parent's own box. z-index doesn't help; clipping happens
regardless of stacking order, since it's a box-model child of
.sidebar. Moving the sliver to its own position:fixed sibling element
(placed right after .sidebar in the markup, before .sidebar-backdrop)
sidesteps the clipping entirely — it's no longer inside .sidebar's box
at all, so .sidebar's overflow rule has no power over it. left:0
anchors it directly to the viewport edge (no more "right:-12px past a
transformed parent" trick needed, since this element isn't nested
inside the transformed/translated .sidebar). z-index:300 matches
.sidebar's own value — they're never visible at the same time (see the
sibling-combinator hide rule below) so they don't need to out-rank
each other, just both sit above ordinary page content.
M22 fix 3 — widened 12px→22px and tallened 56px→80px so this is a
comfortable tap target (not just a swipe-start zone), and
pointer-events:none removed (was previously set since the tab was
swipe-only) now that massiv-interop.js's delegated click listener has
a .sidebar-peek-tab branch — none would have silently swallowed every
tap before it ever reached that listener. cursor:pointer is a no-op on
touch but signals tappability for anyone using a mouse/trackpad at a
narrow viewport (e.g. a resized desktop browser window). */
.sidebar-peek-tab {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 22px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sidebar-bg, #e4e6ea);
color: var(--sidebar-text-color, #222222);
font-size: 1rem;
font-weight: 700;
line-height: 1;
opacity: 0.85;
border-radius: 0 12px 12px 0;
box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
z-index: 300;
cursor: pointer;
/* M25 fix 4 — replaces the JS-driven peek (massivPeekSidebarOnce), which proved
unreliable on Blazor enhanced navigation into a section with no prior
interactive circuit: the retry timing could never be made to reliably outlast
circuit establishment. This glow needs no JS, no DOM-readiness check, and no
knowledge of when Blazor connects — it's running the instant this CSS rule
applies to the element, the same moment the tab itself becomes visible.
M25 fix 5 — two animations layered on the same box-shadow property. Per the
CSS animations spec, when multiple animations affect the same property, the
last one in the list wins for as long as it's "in effect"; -intense has no
fill, so once its 4 iterations finish at 3s it stops being in effect and
-glow (delayed 3s, so it does nothing before then) takes over from that exact
moment — no JS timer or coordination needed for the handoff. Both keyframe
sets start/end on the exact same calm box-shadow value, so the handoff at 3s
has no visible jump even though it's two separate animations swapping control. */
animation: sidebar-peek-glow-intense 0.75s ease-in-out 4,
sidebar-peek-glow 1.8s ease-in-out 3s infinite;
}
/* M25 fix 5 — a fixed blue glow blends into orgs whose --content-bg is itself
blue-ish or just generally cool-toned (PDB's gray page barely showed it at
all). .sidebar-peek-tab already carries the org's own branded background via
SidebarStyle's inline custom properties, so the glow doesn't need to be
brand-colored too — it needs to contrast with the PAGE behind it, which is
unknown here (CSS can't read --content-bg and do luminance math the way
GetContrastColor does in C#). White is the simplest color that reads against
virtually any page tone; layering a tight dark rim shadow underneath it
covers the one case white alone can't — a very light/white org page — so the
pulse stays visible whether the page is light, dark, or colored, with zero
per-org branching needed.
Rapid, bright pulses for the first 3s (4 × 0.75s) — grabs attention immediately
on load before settling into the calm -glow loop below. Far more saturated and
wider-spread than -glow's resting/peak values. */
@keyframes sidebar-peek-glow-intense {
0%, 100% {
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.18), 2px 0 6px rgba(255, 255, 255, 0.35);
}
50% {
box-shadow: 3px 0 10px rgba(0, 0, 0, 0.45), 6px 0 26px rgba(255, 255, 255, 0.95);
}
}
/* Base state matches the tab's own resting box-shadow so the animation has no
visible "snap" at the loop boundary; the glow state brightens and spreads it
further. Kept subtle — a slow breathing pulse, not a strobe. Runs forever
after the intense phase hands off at 3s, same continuous-affordance design as
before. Same white-halo + dark-rim pairing as -intense above, and the same
resting-frame values, so the 3s handoff between the two animations stays
seamless. */
@keyframes sidebar-peek-glow {
0%, 100% {
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.18), 2px 0 6px rgba(255, 255, 255, 0.35);
}
50% {
box-shadow: 3px 0 8px rgba(0, 0, 0, 0.30), 4px 0 16px rgba(255, 255, 255, 0.75);
}
}
/* Hidden once the drawer is open — same general-sibling-combinator
technique already used for .sidebar-backdrop's visibility just above,
since .sidebar-peek-tab is a sibling of .sidebar (not a descendant),
this can't be a plain .sidebar-open child selector. The sliver's only
job is hinting that a closed drawer exists; with the real sidebar
already in view there's nothing left for it to advertise. */
.sidebar.sidebar-open ~ .sidebar-peek-tab {
display: none;
}
/* On mobile, swap the portal text label for the org logo or short name */
.top-bar-portal-label {
display: none;
}
.top-bar-org-brand {
display: flex;
align-items: center;
gap: 8px;
}
.content-area {
padding: 15px;
}
.top-bar {
padding: 0 15px;
}
/* Family top nav: shrink height on mobile — links are hidden; bottom bar takes over */
.family-nav {
height: 56px;
}
/* D45 follow-up — matches the mobile nav's shorter 56px height (vs 80px/64px on
desktop above), same ~16px breathing room. */
.cal-event-detail {
scroll-margin-top: 72px;
}
/* Mobile-only frosted-glass treatment for the top nav, matching the bottom nav's
glass language so the two bars read as one consistent design system instead of
a glass pill at the bottom next to a flat solid strip at the top. Values
(color-mix percentage, blur/saturate amounts) intentionally match
.family-bottom-nav's tuning below so both bars feel like the same material
under the same org tint.
Unlike .family-bottom-nav this is NOT a floating pill — no margin is added, it
stays flush full-width against the top and both side edges, since it's an
anchored top bar rather than something pulled away from the screen.
M23 — bottom corners were originally rounded (0 0 16px 16px) to soften the
transition into the page below; Andy wants a square bottom edge instead, so
border-radius is omitted entirely (default 0) while every other glass property
stays untouched.
Desktop .family-nav (outside this media query) is completely untouched and
stays solid — this block only exists inside max-width:768px. */
.family-nav {
background: color-mix(in srgb, var(--family-nav-bg, #ffffff) 55%, transparent);
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* Match margin-top to the reduced nav height on mobile */
.page.family-layout .main-content {
margin-top: 56px;
}
/* Desktop nav links hidden — the fixed bottom bar replaces them on mobile */
.family-nav-links {
display: none;
}
/* Show the fixed bottom nav bar. align-items:center (not stretch) keeps every item
pinned to a fixed vertical position regardless of content height — stretch let
items grow/shrink slightly as the icon/label stack settled during scroll-snap,
which read as the whole row wobbling up and down during a horizontal swipe. */
.family-bottom-nav {
display: flex;
align-items: center;
}
/* width:100% on .page.family-layout .family-bottom-nav (set above, outside this
media query) has higher specificity than a bare .family-bottom-nav selector, so
it would still win and over-constrain the box once margin is added below — the
pill would render 24px too wide and clip off the right edge of the screen.
Re-declaring the same selector here at the same specificity, later in the
cascade, switches it back to auto so margin/left/right size the pill correctly. */
.page.family-layout .family-bottom-nav {
width: auto;
}
/* Mobile bottom nav: floating frosted-glass pill instead of an edge-to-edge flat
bar. margin pulls it off all three free edges so it reads as floating;
backdrop-filter blurs whatever page content sits behind/below it for an
iOS-style glass look.
Round 2: the fixed neutral rgba(255,255,255,0.25) tint from the previous fix
erased the org's brand color entirely — Andy wants PDB's dark red still visible,
just translucent. Switched back to a translucent --family-nav-bg base, but this
time the blur itself (24px, up from 20px) plus saturate(200%) is what creates
separation from the page behind it, not the tint's contrast — so it stays
readable as glass even when the pill and page share a similar hue. The linear-
gradient layered on top is a subtle white sheen (12% at the top fading to 0% by
40% down) so the org-colored glass still looks glossy instead of a flat color
block; background-blend-mode:overlay lets the gradient interact with the tinted
base instead of just sitting opaquely on top of it.
touch-action:pan-x (not 'none') tells the browser to only ever interpret
horizontal gestures on this element — without it, default two-axis touch
panning applies and a swipe can drag the bar vertically, feeling like panning
a webpage instead of swiping a row of buttons. 'none' would also block the
horizontal scroll itself, since Blazor/the browser needs pan-x left enabled
to generate the native scroll gesture at all.
Round 3 (real iPhone testing): touch-action alone was not enough — iOS Safari
has a known quirk where a touch starting on/near a position:fixed scrollable
child can still bubble its vertical component into the page's own elastic
rubber-band scroll. overscroll-behavior:none (both axes, not just -x) closed
that escape hatch by fully containing scroll chaining within this element —
but that blanket value also removed the horizontal edge-bounce as a side
effect, since "none" suppresses overscroll on both axes rather than just the
vertical one that actually mattered for the iOS bleed fix.
M24: split into axis-specific values — overscroll-behavior-x:auto restores
the native horizontal rubber-band bounce at the first/last tab (the actual
polish this row removes), while overscroll-behavior-y:none keeps the
vertical containment that fixed the iOS drag-bleed issue, since y was the
axis the bleed actually traveled on. touch-action:pan-x already only ever
permitted horizontal panning in the first place, so this isn't reopening
the vertical gesture path Round 3 closed — it specifically targets only the
overscroll/bounce behavior at the scroll boundary.
-webkit-overflow-scrolling:touch restores native momentum/inertia scrolling
on iOS WebKit, which overscroll-behavior can otherwise blunt.
FOLLOW-UP (not changed here, per instruction): if vertical bleed persists on
iPhone after this, check for overflow/touch-action rules on / that
could still be allowing the gesture to bubble up from this fixed child. */
.family-bottom-nav {
margin: 0 12px 12px 12px;
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 40%),
color-mix(in srgb, var(--family-nav-bg, #ffffff) 55%, transparent);
background-blend-mode: overlay, normal;
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.20);
overflow-x: auto;
touch-action: pan-x;
scroll-snap-type: x mandatory;
overscroll-behavior-x: auto;
overscroll-behavior-y: none;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Extra layer of native scroll easing on top of scroll-snap so momentum
settles smoothly instead of stopping abruptly at each snap point. */
scroll-behavior: smooth;
}
/* Hides the WebKit scrollbar track (Chrome/Safari) — scrollbar-width:none above
already hides it in Firefox. Without both, a thin scrollbar would poke out past
the rounded corners and break the "pill" illusion. */
.family-bottom-nav::-webkit-scrollbar {
display: none;
}
/* flex:0 0 auto + a min-width sized to ~1/3.6 of the pill's inner width (instead of
a clean /4) means a sliver of the next tab visibly peeks in from the right edge
at rest — a simple CSS-only affordance that signals "there's more here, swipe"
to a first-time user, who otherwise has no way to know tabs exist off-screen.
24px subtracted matches the pill's 12px+12px side margins so the math reflects
its actual on-screen width. margin creates a visible gap between capsules so
each one reads as a separate floating object rather than a continuous strip. */
.family-bottom-nav-item {
flex: 0 0 auto;
min-width: calc((100vw - 24px) / 3.6);
/* Round 3: the previous 64px height + 16px radius + 8px vertical margin read
as oversized blobs rather than refined pills. height dropped to 48px (the
bar itself stays 64px tall — align-items:center on .family-bottom-nav
vertically centers the shorter capsule, so no vertical margin is needed
here at all; using margin instead of height to shrink it would have left
the item's own box still 64px tall and overflowing past the pill's rounded
corners). Horizontal-only margin tightens the gap between capsules so the
row reads as a compact, dense cluster instead of spaced-out blocks. */
height: 48px;
margin: 0 2px;
padding: 5px 9px;
scroll-snap-align: center;
/* Glass-capsule look for the inactive state — a subtle fill, translucent
border, and inset top highlight so each tab reads as its own glossy,
elevated button instead of flat text sitting on the blurred strip.
.active below overrides background/border/box-shadow with the existing
solid-white pop-out, which must stay clearly more prominent than these;
its scale(1.08) transform is relative, so it automatically scales down
proportionally along with this smaller base size with no separate change. */
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.family-bottom-nav-item i.bi {
font-size: 1.2rem;
}
/* Bottom padding so page content is never hidden behind the bottom bar */
.family-portal .content-area {
padding-bottom: 80px;
}
/* Mobile typography: slightly larger base size and tighter card rounding
feel warmer and more readable on small screens */
.family-portal {
font-size: 17px;
line-height: 1.65;
}
.family-portal .form-card {
border-radius: 14px;
}
/* Mobile calendar: compact cells and truncated event titles */
.fc .fc-daygrid-day {
min-height: 52px;
}
.fc .fc-daygrid-event {
font-size: 0.7em !important;
padding: 1px 4px !important;
}
/* On mobile the cell is narrow — truncate rather than wrap so grid stays compact */
.fc .fc-daygrid-event .fc-event-title {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.fc .fc-toolbar-title {
font-size: 0.92em !important;
}
.fc .fc-button,
.fc .fc-button-primary {
padding: 4px 8px !important;
}
/* Global mobile table → card stack.
Applies to every table inside the content area on mobile.
No wrapper div or per-page changes needed — works automatically on all current
and future tables. The data-label attribute on each | supplies the column
label shown before each value via ::before pseudo-element. */
.content-area table {
display: block;
width: 100%;
}
.content-area thead {
display: none;
}
.content-area tbody {
display: block;
width: 100%;
}
.content-area tbody tr {
display: block;
border: 1px solid #e1e4e8;
border-radius: 10px;
margin-bottom: 12px;
padding: 12px;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
/* color:#1a1a2e makes the value text itself the dark, primary-weight focal
point — matching .detail-value's color elsewhere in this file. Columns that
intentionally want a muted value already set their own color explicitly on
td[data-label="X"] (Email, Onboarding/Joined, Date Needed/Submitted, Rank,
etc.) — those selectors are more specific than this bare td rule and keep
winning, so this only affects columns that weren't already styled. */
.content-area tbody td {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 6px 0;
border: none !important;
font-size: 0.88em;
gap: 8px;
word-break: break-word;
color: #1a1a2e;
}
/* Two earlier passes darkened this from #888 → #555 → #333 chasing "low
contrast," but that was the wrong direction: this app's existing label/value
convention (.detail-label/.detail-value, .mini-stat-label/.stat-label,
.req-mini-header) always keeps labels MUTED and values DARK — that contrast
between the two is the actual hierarchy device, not the label's absolute
darkness. #333 made the label nearly as dark as the value text above, so
everything read as the same weight of text with no separation at all.
#6b7280 is a properly accessible muted gray (~4.6:1 against white, clears
WCAG AA) — clearly readable on its own, but now visibly lighter than the
newly-dark #1a1a2e value text beside/below it, restoring actual hierarchy. */
.content-area tbody td::before {
content: attr(data-label);
font-weight: 600;
color: #6b7280;
font-size: 0.78em;
text-transform: uppercase;
letter-spacing: 0.4px;
flex-shrink: 0;
min-width: 80px;
padding-top: 1px;
}
/* Cells with no data-label (action columns) — right-align and hide the ::before */
.content-area tbody td:not([data-label]) {
justify-content: flex-end;
}
.content-area tbody td:not([data-label])::before {
display: none;
}
/* URL cell stacks label above value and breaks the URL so it wraps cleanly */
.content-area tbody td.invite-url-cell {
flex-direction: column;
align-items: flex-start;
}
.content-area .invite-url {
word-break: break-all;
font-size: 0.78em;
}
/* FullCalendar must retain its default table layout — the global display:block
above would flatten the calendar grid. These resets restore normal table rendering. */
.content-area .fc table { display: table; width: 100%; }
.content-area .fc thead { display: table-header-group; }
.content-area .fc tbody { display: table-row-group; }
.content-area .fc tr { display: table-row; }
.content-area .fc td,
.content-area .fc th { display: table-cell; border: revert; }
.content-area .fc tbody td::before { display: none; }
/* ===== EVENT TYPES TABLE — mobile card polish =====
Scoped by data-label values unique to Event Types (Color, Name, Type, Active).
The global table→card rules already handle the base stacking; these rules
layer on top to fix the "receipt" look without touching the markup. */
/* Swatch is self-explanatory — the "COLOR" label above it is pure noise */
.content-area tbody td[data-label="Color"]::before {
display: none;
}
/* Swatch + name flow inline as a visual card header.
Name label suppressed because the swatch already anchors the eye;
"NAME:" between swatch and text is redundant clutter at narrow widths. */
.content-area tbody td[data-label="Color"],
.content-area tbody td[data-label="Name"] {
display: inline-flex;
align-items: center;
vertical-align: middle;
border: none !important;
}
.content-area tbody td[data-label="Color"] {
width: auto;
padding: 6px 8px 6px 0;
}
.content-area tbody td[data-label="Name"] {
width: calc(100% - 48px);
padding: 6px 0;
font-weight: 500;
}
.content-area tbody td[data-label="Name"]::before {
display: none;
}
/* Type and Active badges on the same line — both are short; stacking wastes vertical space */
.content-area tbody td[data-label="Type"],
.content-area tbody td[data-label="Active"] {
display: inline-flex;
align-items: center;
width: auto;
padding: 4px 12px 4px 0;
vertical-align: middle;
border: none !important;
}
/* Remove the global 80px min-width so compact badge labels stay truly inline */
.content-area tbody td[data-label="Type"]::before,
.content-area tbody td[data-label="Active"]::before {
min-width: 0;
margin-right: 4px;
}
/* System type rows render an empty Actions cell — hide it entirely so it
doesn't float as an orphaned label with nothing below it. */
.content-area tbody td[data-label="Actions"]:not(:has(button, a)) {
display: none;
}
/* Thin rule visually separates data fields from action controls */
.content-area tbody td[data-label="Actions"] {
border-top: 1px solid #e8eaed !important;
margin-top: 10px;
padding-top: 10px;
}
/* Buttons are self-explanatory — "ACTIONS" label is visual clutter */
.content-area tbody td[data-label="Actions"]::before {
display: none;
}
/* Side-by-side equal-width buttons — both reachable with a thumb,
layout stays balanced whether there is one button or two. */
.content-area tbody td[data-label="Actions"] .action-cell {
flex-direction: row;
gap: 8px;
width: 100%;
}
.content-area tbody td[data-label="Actions"] .action-cell .btn {
flex: 1;
justify-content: center;
}
/* ===== EVENTS LIST TABLE — mobile card layout =====
Date and Time columns are unique to the events table — no scoping
conflicts with other tables. The sibling selector "Date ~ Type" isolates
event-row overrides from the EventTypes table which also has data-label="Type". */
/* Date and Time flow on one line — labels suppressed, values self-explanatory */
.content-area tbody td[data-label="Date"],
.content-area tbody td[data-label="Time"] {
display: inline-flex;
align-items: center;
width: auto;
vertical-align: middle;
border: none !important;
font-size: 0.8em;
color: #666;
}
.content-area tbody td[data-label="Date"] {
padding: 4px 6px 0 0;
}
.content-area tbody td[data-label="Date"]::before {
display: none;
}
.content-area tbody td[data-label="Time"] {
padding: 4px 0 0 0;
}
/* Bullet replaces the "TIME:" label — keeps the date/time line compact */
.content-area tbody td[data-label="Time"]::before {
content: "·";
min-width: 0;
margin-right: 4px;
font-weight: 400;
font-size: 1.1em;
color: #ccc;
text-transform: none;
letter-spacing: 0;
}
/* Title is the card headline — large enough to anchor the eye immediately */
.content-area tbody td[data-label="Title"] {
display: block;
font-size: 1.05rem;
font-weight: 600;
color: #1a1a2e;
padding: 4px 0 6px 0;
border: none !important;
}
.content-area tbody td[data-label="Title"]::before {
display: none;
}
/* Colored dot + type name are self-labeling — "TYPE:" adds no value.
Sibling selector scopes this to event rows only (EventTypes has no Date cell). */
.content-area tbody td[data-label="Date"] ~ td[data-label="Type"]::before {
display: none;
}
/* Location and Signups: compact — remove the 80px min-width that pushes values right */
.content-area tbody td[data-label="Location"]::before,
.content-area tbody td[data-label="Signups"]::before {
min-width: 0;
margin-right: 6px;
}
/* Edit button right-aligned — event rows only via Date sibling */
.content-area tbody td[data-label="Date"] ~ td[data-label="Actions"] {
justify-content: flex-end;
}
/* ===== FEATURED DOCUMENT BANNER — mobile stack layout =====
Horizontal layout (star + info + buttons in a row) truncates long titles and
pushes buttons off-screen on narrow widths. Column direction stacks them vertically. */
.doc-featured-banner {
flex-direction: column;
align-items: flex-start;
}
/* Inline nowrap was removed from markup; this rule closes the door on future regressions */
.doc-featured-banner .doc-banner-title {
white-space: normal;
word-break: break-word;
}
/* Buttons fill the full banner width so none are clipped or overflow to the right */
.doc-featured-banner .doc-banner-buttons {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
/* ===== DOCUMENT TABLE — mobile card layout =====
Category and Visibility are unique to this table — sibling scoping not needed.
Title cell inherits the Events table's Title rules (display:block, label suppressed). */
/* Category and Visibility badges side by side — both are short; stacking wastes space */
.content-area tbody td[data-label="Category"],
.content-area tbody td[data-label="Visibility"] {
display: inline-flex;
align-items: center;
width: auto;
vertical-align: middle;
border: none !important;
padding: 4px 12px 4px 0;
}
/* Remove the 80px min-width so short badge labels stay truly inline */
.content-area tbody td[data-label="Category"]::before,
.content-area tbody td[data-label="Visibility"]::before {
min-width: 0;
margin-right: 4px;
}
/* Uploaded date: small and muted — less prominent than the document title */
.content-area tbody td[data-label="Uploaded"] {
font-size: 0.8em;
color: #888;
}
.content-area tbody td[data-label="Uploaded"]::before {
min-width: 0;
margin-right: 6px;
}
/* Delete (trash icon only) stays at content width; Open + Edit share remaining space.
Scoped via Category sibling so EventTypes' Actions layout is not affected. */
.content-area tbody td[data-label="Category"] ~ td[data-label="Actions"] .action-cell .btn:last-child {
flex: none;
width: auto;
}
/* ===== OFFICER POSITIONS TABLE — mobile card layout =====
Rank and Position labels are unique to this table — no sibling scoping needed.
Approver and Actions inherit the global flex label/value and Actions rules. */
/* Rank pill + position title sit on one line — stacking would lose the hierarchy signal */
.content-area tbody td[data-label="Rank"],
.content-area tbody td[data-label="Position"] {
display: inline-block;
border: none !important;
vertical-align: middle;
width: auto;
}
/* Rank rendered as a compact muted pill — communicates priority without competing with the name */
.content-area tbody td[data-label="Rank"] {
font-size: 0.78em;
color: #888;
background: #f1f3f5;
border-radius: 4px;
padding: 1px 6px;
margin-right: 8px;
}
/* The pill itself identifies rank — a "RANK:" text prefix would be redundant */
.content-area tbody td[data-label="Rank"]::before,
.content-area tbody td[data-label="Position"]::before {
display: none;
}
/* Position name is the visual anchor of the card */
.content-area tbody td[data-label="Position"] {
font-weight: 600;
font-size: 1rem;
padding: 4px 0;
}
/* ===== OFFICERS LIST TABLE — mobile card layout =====
Name conflicts with EventTypes; Position conflicts with OfficerPositions.
Both are scoped via tr:has(td[data-label="Email"]) — Email is unique to this table. */
/* Officer name is the card headline — overrides the EventTypes inline-flex Name rule */
.content-area tbody tr:has(td[data-label="Email"]) td[data-label="Name"] {
display: block;
font-size: 1.05rem;
font-weight: 700;
color: #1a1a2e;
padding-bottom: 2px;
border: none !important;
}
.content-area tbody tr:has(td[data-label="Email"]) td[data-label="Name"]::before {
display: none;
}
/* Email sits below the name as muted supporting detail — no label needed */
.content-area tbody td[data-label="Email"] {
display: block;
font-size: 0.85em;
color: #666;
padding-top: 0;
padding-bottom: 8px;
border: none !important;
}
.content-area tbody td[data-label="Email"]::before {
display: none;
}
/* Position dropdown overrides OfficerPositions' inline-block rule for this table */
.content-area tbody tr:has(td[data-label="Email"]) td[data-label="Position"] {
display: block;
width: 100%;
padding-bottom: 8px;
}
/* Onboarding and Joined are secondary context — legible but not competing with name */
.content-area tbody td[data-label="Onboarding"],
.content-area tbody td[data-label="Joined"] {
font-size: 0.8em;
color: #999;
}
.content-area tbody td[data-label="Onboarding"]::before,
.content-area tbody td[data-label="Joined"]::before {
font-size: 0.7em;
letter-spacing: 0.3px;
}
/* Status shows transient save feedback — no label prefix, collapses when empty */
.content-area tbody td[data-label="Status"]::before {
display: none;
}
.content-area tbody td[data-label="Status"]:not(:has(*)) {
display: none;
}
/* ===== REQUISITION HISTORY TABLE — mobile card layout =====
Title conflicts with Events; Status display:inline-flex scoped via Req sibling
so OfficerList's Status collapse rule is unaffected. */
/* REQ number is the card identity tag — monospace mimics the desktop column style */
.content-area tbody td[data-label="Req"] {
display: block;
font-family: monospace;
font-size: 0.8em;
font-weight: 600;
color: #2980b9;
padding-bottom: 2px;
}
.content-area tbody td[data-label="Req"]::before {
display: none;
}
/* Title overrides the Events Title rule — scoped so Events cards are unaffected */
.content-area tbody tr:has(td[data-label="Req"]) td[data-label="Title"] {
display: block;
font-weight: 700;
font-size: 1rem;
color: #1a1a2e;
padding-top: 0;
padding-bottom: 6px;
border: none !important;
}
.content-area tbody tr:has(td[data-label="Req"]) td[data-label="Title"]::before {
display: none;
}
/* Urgency, Cost, and Status inline on one line — Cost sits between them in the DOM
so all three must be inline-flex; Cost value then acts as a separator between badges */
.content-area tbody tr:has(td[data-label="Req"]) td[data-label="Urgency"],
.content-area tbody tr:has(td[data-label="Req"]) td[data-label="Cost"],
.content-area tbody tr:has(td[data-label="Req"]) td[data-label="Status"] {
display: inline-flex;
align-items: center;
width: auto;
border: none !important;
vertical-align: middle;
padding: 2px 10px 4px 0;
}
.content-area tbody tr:has(td[data-label="Req"]) td[data-label="Urgency"]::before,
.content-area tbody tr:has(td[data-label="Req"]) td[data-label="Cost"]::before,
.content-area tbody tr:has(td[data-label="Req"]) td[data-label="Status"]::before {
display: none;
}
/* Cost value stands out between the two badges */
.content-area tbody td[data-label="Cost"] {
font-weight: 600;
}
/* Date Needed and Submitted are secondary metadata — visible but not prominent */
.content-area tbody td[data-label="Date Needed"],
.content-area tbody td[data-label="Submitted"] {
font-size: 0.8em;
color: #999;
}
.content-area tbody td[data-label="Date Needed"]::before,
.content-area tbody td[data-label="Submitted"]::before {
min-width: 0;
margin-right: 6px;
font-size: 0.7em;
}
/* ===== RECENT TRANSACTIONS TABLE (/plo/finances) — mobile card layout =====
Date, Type, and Category reuse the existing global [data-label="Date"]/
[data-label="Type"]/[data-label="Category"] rules above (defined for the
Events and Document tables) with zero extra CSS — those rules are already
unscoped by table, so Type/Category automatically become compact inline
badges and Date's "DATE:" label is already suppressed via the existing
Date~Type sibling rule. Amount is the one column name unique to this table,
so it gets its own small bold treatment here, matching the desktop column's
font-weight:600 emphasis — mirrors the same unscoped pattern already used
for Requisition History's Cost column just above.
justify-content:flex-start overrides the base td rule's space-between, which
was pushing the "AMOUNT" label to the card's left edge and the dollar value
all the way to the right edge — far apart instead of sitting together. */
.content-area tbody td[data-label="Amount"] {
font-weight: 600;
justify-content: flex-start;
}
/* The Description | carries inline white-space:nowrap/text-overflow:ellipsis/
max-width:200px for its desktop table-cell truncation — inline styles beat any
external class or media-query rule without !important, so the global mobile
word-break:break-word never actually took effect and the value cut off
mid-word with no visible ellipsis. !important here is required specifically
because the conflicting rule is inline, not just higher-specificity CSS —
same justification as the Requisition History detail grid above.
justify-content:flex-start is the same fix applied to Amount above: once the
value no longer wraps onto a new line by default, the base td rule's
space-between pushes it all the way to the card's right edge, away from the
"DESCRIPTION" label, instead of sitting right after it. */
.content-area tbody td[data-label="Description"] {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: none !important;
justify-content: flex-start;
}
/* ===== TRANSACTION LIST TABLE (/plo/finances/transactions) — mobile card layout =====
Date, Type, Amount, Category, and Description all reuse existing unscoped
rules above with zero extra CSS — this table shares those exact column names
with the Recent Transactions table and others. Balance is the one column name
unique to this table, so it needs its own rule: same bold-value +
justify-content:flex-start treatment as Amount, for the same reason (the base
td rule's space-between would otherwise push the balance to the card's right
edge, away from its "BALANCE" label). Ref #, Receipt, and the unlabeled Void
action column need no extra CSS — Ref # and Receipt are short single-line
values that fit the global label/value layout as-is, and the Void column has
no data-label at all (matching its empty desktop header), so it already gets
the existing global td:not([data-label]) treatment (right-aligned, no label)
used for action-only columns elsewhere in this file. */
.content-area tbody td[data-label="Balance"] {
font-weight: 600;
justify-content: flex-start;
}
/* Amount and Balance both carry inline text-align:right for their desktop
table-cell alignment — harmless on desktop (a real table column), but on
mobile the value is a flex child, not a table cell, so this had no
layout-positioning effect EXCEPT on the value's own inline text box, which
still visually nudges it away from the flush-left alignment every other
field in the card uses. Inline styles beat any external rule without
!important (same issue already addressed for Description's white-space
above) — scoped to .txn-list-table specifically so this doesn't reach into
any other table that might reuse the Amount/Balance column names. */
.content-area table.txn-list-table tbody td[data-label="Amount"],
.content-area table.txn-list-table tbody td[data-label="Balance"] {
text-align: left !important;
}
/* ===== TRANSACTION LIST TABLE — card readability pass =====
Scoped to .txn-list-table (the class on this specific table's
element) throughout, so none of this reaches the Recent Transactions card
on /plo/finances (M18) or any other table sharing the global mobile card
transform — same scoping convention as the text-align fix just above.
Tighter field padding: the unscoped global td rule's padding:6px 0 has
never actually applied here, because every td in this table also carries
an inline padding:10px 14px for its desktop table-cell sizing, and inline
styles beat non-!important external rules — so fields were rendering at
the desktop 10px/14px spacing, not the intended 6px, reading as too much
air between fields. !important forces the tighter, intentionally compact
mobile spacing here. */
.content-area table.txn-list-table tbody td {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
/* Date+Type already render on one line together via existing global rules
(both become display:inline-flex), which already makes them read as a
pair — but nothing set that pair apart from the data fields below, so
every field in the card read with equal weight as one flat list. Bumping
Date's weight/size gives the pair a "headline" feel next to Type's already
bold, colored badge. */
.content-area table.txn-list-table tbody td[data-label="Date"] {
font-weight: 600;
font-size: 0.95em !important;
}
/* Amount is the first full-width block-level field after the inline
Date+Type pair (Date/Type are inline-flex; Amount/Balance/Description/etc.
stay block-level flex rows each on their own line) — giving it extra
top space plus an inset top shadow (not a real border, which would fight
the base td rule's border:none!important) draws a clean divider under the
header pair regardless of exactly how wide Date+Type render. */
.content-area table.txn-list-table tbody td[data-label="Amount"] {
margin-top: 6px;
padding-top: 10px !important;
box-shadow: inset 0 1px 0 #f0f0f0;
}
/* D47 addendum 3 — Ref # and Receipt relied on nothing but the global
td/td::before label+value rules above, whose justify-content:space-between
pushes the value all the way to the card's right edge, away from its own
label — the same root cause already fixed for Date Needed/Submitted on the
Requisitions card and Amount/Balance just above. flex-start pairs the value
immediately next to the label instead of leaving a wide gap that read as
"not paired with this label." Receipt additionally gets flex-wrap:wrap:
its value can be a short "Open"/"Attach Receipt" button (fits fine inline
next to the label) or the wider inline upload control (file input +
Upload/Cancel buttons, min-width:160px) — wrap lets the short states stay
inline while the upload control gracefully drops to its own line below the
label instead of overflowing or squeezing. The Void button's has no
data-label and is untouched by this rule. */
.content-area table.txn-list-table tbody td[data-label="Ref #"] {
justify-content: flex-start;
align-items: center;
gap: 8px;
}
.content-area table.txn-list-table tbody td[data-label="Receipt"] {
justify-content: flex-start;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* ===== PLO REQUISITIONS LIST TABLE (/plo/requisitions) — card polish pass =====
The shared tr:has(td[data-label="Req"]) rules above already give this table
(and the Sponsor portal's requisition-history table, which reuses the exact
same column data-labels) baseline mobile-card behavior. Everything here is
scoped through .req-list-table — the class added to THIS table's
element specifically — so none of it reaches that other table, matching the
same per-table scoping convention used for .txn-list-table above.
Unlike Transactions, no inline text-align:right exists anywhere in this
table's markup, so there's nothing to override there — but Date Needed and
Submitted hit the same underlying root cause as Amount/Balance did: their
::before label is intentionally left visible (just shrunk) rather than
hidden, which means each of those td's still has two flex children, and the
base td rule's justify-content:space-between (never overridden for these
two) shoves the value to the card's right edge, away from its own label —
reading exactly like the "small all-caps right-aligned text" complaint. */
.content-area table.req-list-table tbody td[data-label="Date Needed"],
.content-area table.req-list-table tbody td[data-label="Submitted"] {
justify-content: flex-start;
}
/* Tighter field padding, matching the density already established for
Transactions — no inline padding exists on these td's to fight, so this
wins on specificity alone without needing !important. */
.content-area table.req-list-table tbody td {
padding-top: 3px;
padding-bottom: 3px;
}
/* M19 fix 2 — Req # and Urgency badge sit side-by-side as a single header
row instead of stacking. M19's flex-column + order approach could
reorder fields but couldn't put two of them on the same visual line —
each order'd item is still its own row in a column flex container. CSS
Grid can place Req and Urgency into the same grid row at different
columns while every other field still spans the full row width below
them. Scoped to .req-list-table and only inside this max-width:768px
media query, so desktop (where tr isn't a grid container at all) and
the Sponsor portal's requisition-history table (same data-labels, but
not this class) are both untouched. */
.content-area table.req-list-table tbody tr {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 10px;
align-items: center;
grid-template-areas:
"req urgency"
"title title"
"cost cost"
"dateneeded dateneeded"
"submitted submitted"
"status status";
}
/* Maps each field to its slot in the template above. Req's 1fr column
stretches to fill the row (matching how it always spanned full width);
Urgency's auto column sizes to the badge's own content so it hugs the
right side of the header row instead of stretching. data-label
attributes and td order in the Razor markup are completely untouched —
only where each td is painted inside the grid changes. */
.content-area table.req-list-table tbody td[data-label="Req"] { grid-area: req; }
.content-area table.req-list-table tbody td[data-label="Urgency"] { grid-area: urgency; }
.content-area table.req-list-table tbody td[data-label="Title"] { grid-area: title; }
.content-area table.req-list-table tbody td[data-label="Cost"] { grid-area: cost; }
.content-area table.req-list-table tbody td[data-label="Date Needed"] { grid-area: dateneeded; }
.content-area table.req-list-table tbody td[data-label="Submitted"] { grid-area: submitted; }
.content-area table.req-list-table tbody td[data-label="Status"] { grid-area: status; }
/* Req and Urgency now share one row, so they need matching compact
vertical padding instead of Req's old standalone bottom-pairing
padding — align-items:center on the grid (above) handles vertical
alignment between the small monospace Req text and the Urgency badge. */
.content-area table.req-list-table tbody td[data-label="Req"],
.content-area table.req-list-table tbody td[data-label="Urgency"] {
padding-top: 2px;
padding-bottom: 2px;
}
/* Title is still the first field after the Req+Urgency header row — same
divider treatment as before (an inset top shadow, not a real border,
which would fight the base td rule's border:none!important), now
marking the boundary under the combined header row instead of under
Urgency alone. */
.content-area table.req-list-table tbody td[data-label="Title"] {
margin-top: 4px;
padding-top: 8px;
padding-bottom: 8px;
box-shadow: inset 0 1px 0 #f0f0f0;
}
/* Status still sits alone at the bottom — breathing room keeps it from
reading as flush against Submitted right above it. */
.content-area table.req-list-table tbody td[data-label="Status"] {
margin-top: 6px;
}
/* Status and Urgency are both badges, but Status is the more important one
to register at a glance — slightly larger/bolder so it visually
outweighs Urgency, even sitting right next to it in the header row. */
.content-area table.req-list-table tbody td[data-label="Status"] .badge {
font-size: 0.78em;
padding: 4px 10px;
}
.content-area table.req-list-table tbody td[data-label="Urgency"] .badge {
font-size: 0.7em;
opacity: 0.92;
}
/* Cost is bumped past the shared font-weight:600 (set globally above) and
up in size to make it the clear focal point of its own line, the same
role Amount plays on the Transactions card. */
.content-area table.req-list-table tbody td[data-label="Cost"] {
font-size: 1em;
font-weight: 700;
}
/* ===== ELECTIONS LIST TABLE (/plo/elections) — mobile card layout (M21) =====
Same root cause as M18/M20/M19: zero data-label attributes meant the
global mobile table-to-card transform had nothing to label these
values, producing stacked right-aligned text with no labels. Scoped
entirely through .elec-list-table (the class added to THIS table's
element) so none of this reaches any other table on the shared
transform. Uses CSS Grid (not flex-column+order) for the same reason
established in M19 fix 2 — only Grid can place two fields on the same
visual line, here pairing Type+Created and Status+Votes. */
.content-area table.elec-list-table tbody tr {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 10px;
align-items: center;
grid-template-areas:
"title title"
"type created"
"status votes";
}
.content-area table.elec-list-table tbody td[data-label="Title"] { grid-area: title; }
.content-area table.elec-list-table tbody td[data-label="Type"] { grid-area: type; }
.content-area table.elec-list-table tbody td[data-label="Created"] { grid-area: created; }
.content-area table.elec-list-table tbody td[data-label="Status"] { grid-area: status; }
.content-area table.elec-list-table tbody td[data-label="Votes"] { grid-area: votes; }
/* Title is the card's header/identity row — the primary thing an officer
scans for, same role Req#+Title plays on the Requisitions card. The td
carries an inline font-weight:500 for its desktop table-cell styling;
inline styles beat any external rule without !important, so without
this override Title would render lighter than intended despite the
existing unscoped global Title rule (display:block, 1.05rem) already
giving it size and its own full-width line. */
.content-area table.elec-list-table tbody td[data-label="Title"] {
font-weight: 700 !important;
}
/* Type + Created pair up as muted secondary metadata below the header —
their inline color:#666 already keeps them visually quiet, so no color
override is needed here, just spacing. The inset top shadow (not a
real border, which would fight the base td rule's border:none!important)
marks the boundary under the Title header row, same technique used for
Title's divider on the Requisitions card. */
.content-area table.elec-list-table tbody td[data-label="Type"] {
margin-top: 4px;
padding-top: 8px;
box-shadow: inset 0 1px 0 #f0f0f0;
}
/* Status is the most actionable field at a glance (Draft/Open/Closed) — a
larger, bolder badge gives it the visual weight the task calls for, the
same role Status played over Urgency in the M19 requisitions fix.
StatusBadgeStyle() only sets background/color inline, so no !important
fight here. */
.content-area table.elec-list-table tbody td[data-label="Status"] .badge {
font-size: 0.82em;
font-weight: 700;
padding: 4px 12px;
}
/* Votes sits inline next to Status as a quiet supporting number —
left-aligned to match every other field on the card instead of the
inline text-align:right carried over from the desktop column (the
matching inline text-align:right on the | only affects desktop;
thead is hidden on mobile via display:none, so it never needs
touching). justify-content:flex-start is the same fix already applied
to Date Needed/Submitted on the Requisitions card and Amount/Balance
on the Transactions card — the base td rule's space-between would
otherwise shove the value away from its "VOTES" label. */
.content-area table.elec-list-table tbody td[data-label="Votes"] {
text-align: left !important;
justify-content: flex-start;
}
/* ===== CSV IMPORT PREVIEW TABLE (/plo/finances/import) — mobile card layout (M26) =====
Same root cause as M18/M20/M21: zero data-label attributes meant the global
mobile table-to-card transform had nothing to label these values. Scoped
entirely through .import-preview-table so none of this reaches Transactions,
Recent Transactions, Requisitions, or Elections. This is the first table in
the series with a leading checkbox column — Import? doesn't pair with a text
label the way other fields do, so it's paired with Date in a header row
instead (same CSS Grid technique as Req#+Urgency and Type+Created), since
"is this row included" is the first thing the Treasurer needs to see/control.
Status and Type badges sit side by side on their own row near the top of the
card — the single most important things to scan per row, the same priority
Status got in the M19 requisitions and M21 elections fixes. Description
stays a simple stacked label+value row (only needs an override for the same
inline-truncation-style problem Transactions' Description had).
M26 fix — a 3rd grid column was added specifically so the Status/Type
pairing could share a row without disturbing the checkbox+date row above.
Auto-sized grid columns size to the WIDEST single-column item assigned to
them across every row in the grid, not per-row — putting Status (a wide
badge like "Possible Duplicate") into the same lone auto column the
checkbox uses would have inflated that column for the checkbox row too,
pushing Date away from the checkbox and breaking the established header
pairing. Spanning Status across columns 1+2 (an auto column plus a flexible
1fr column) instead means only the checkbox's own intrinsic width drives
column 1's auto size, while column 2 — flexible — absorbs whatever extra
width Status's badge needs, leaving column 1 (and the checkbox+date row)
untouched. Type occupies column 3 alone, giving the two badges a natural
side-by-side split close to even. */
.content-area table.import-preview-table tbody tr {
display: grid;
grid-template-columns: auto 1fr 1fr;
column-gap: 10px;
align-items: center;
grid-template-areas:
"checkbox date date"
"status status type"
"amount amount amount"
"description description description";
}
.content-area table.import-preview-table tbody td[data-label="Import?"] { grid-area: checkbox; }
.content-area table.import-preview-table tbody td[data-label="Date"] { grid-area: date; }
.content-area table.import-preview-table tbody td[data-label="Status"] { grid-area: status; }
.content-area table.import-preview-table tbody td[data-label="Amount"] { grid-area: amount; }
.content-area table.import-preview-table tbody td[data-label="Type"] { grid-area: type; }
.content-area table.import-preview-table tbody td[data-label="Description"] { grid-area: description; }
/* Checkbox needs no text label — its presence is self-explanatory, same
reasoning as Color/Req# suppressing their own labels elsewhere. Sized up
from the browser default so it's a comfortable tap target next to the date. */
.content-area table.import-preview-table tbody td[data-label="Import?"] {
display: flex;
align-items: center;
justify-content: flex-start;
border: none !important;
padding: 4px 8px 4px 0;
}
.content-area table.import-preview-table tbody td[data-label="Import?"]::before {
display: none;
}
.content-area table.import-preview-table tbody td[data-label="Import?"] input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}
/* Date sits beside the checkbox as the card's header row — bumped to a bold
headline weight (the existing unscoped global Date rule keeps it small/muted,
which reads fine as a secondary field elsewhere but is too quiet to anchor a
header row here). */
.content-area table.import-preview-table tbody td[data-label="Date"] {
font-weight: 700;
font-size: 1rem;
color: #1a1a2e;
padding: 4px 0;
}
/* Status — the single most actionable field per row, now sharing a row with
Type instead of sitting full-width below it (M26 fix). Switched from block
to flex so the badge hugs the left edge of its (column 1+2) area instead of
stretching/wrapping at block width. The previous inset-shadow top divider
is dropped: it used to span the row's full width because Status WAS the
full row; now that the row only covers columns 1-2 (Type occupies column 3
separately), a divider on Status alone would draw a partial-width line that
stops short of Type's column — reading as a stray underline rather than a
clean section break — so it's removed rather than kept half-broken. The
badge itself (.import-badge, defined in FinancialImport.razor's own | | |