(see
the Grid rules above, which DO apply to Timeline via the shared th/td rule) had no effect on
these specific elements, reported as "Timeline doesn't obey spacious/view settings". Markup now
uses these classes with no inline font-size instead. */
.grid-scale-Compact .planner-timeline-hour-label,
.grid-scale-Compact .planner-timeline-task-chip {
font-size: 0.7rem !important;
}
.grid-scale-Compact .planner-timeline-task-location {
font-size: 0.55rem !important;
}
.grid-scale-Normal .planner-timeline-hour-label,
.grid-scale-Normal .planner-timeline-task-chip {
font-size: 0.8rem !important;
}
.grid-scale-Normal .planner-timeline-task-location {
font-size: 0.62rem !important;
}
.grid-scale-Spacious .planner-timeline-hour-label,
.grid-scale-Spacious .planner-timeline-task-chip {
font-size: 0.92rem !important;
}
.grid-scale-Spacious .planner-timeline-task-location {
font-size: 0.72rem !important;
}
/* Task chips: shorter/squarer boxes that wrap up to 3 per column instead of one full-width row each.
Each chip's flex-basis is computed inline (GetTaskChipFlexBasis) from how many tasks share the
cell: 100% / 50% / 33% (capped at 33%), so a 4th+ task wraps to the next row rather than
shrinking further. Task text itself is truncated to a single line with an ellipsis rather than
wrapping - a chip that's narrower than its text (e.g. 3 per row under Fit to Screen) used to
wrap word-by-word until it ran out of room and started breaking individual characters onto
their own line. The full text is available via the chip's title attribute (hover) or by
clicking the chip to open it (EditTaskNotes). */
.planner-task-list {
align-content: flex-start;
/* Overrides the markup's own .gap-1 (0.25rem) - adjacent chips sitting nearly flush with only a
thin border between them made a busy cell read as one solid block rather than distinct tasks. */
gap: 0.4rem !important;
}
.planner-task-chip {
min-width: 54px;
box-sizing: border-box;
line-height: 1.15;
align-items: center !important;
/* A soft shadow gives each chip a little lift/separation from the cell background and its
neighbours, beyond what the existing 1px border alone provides. */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
/* Bootstrap's default .border colour (--bs-border-color, a very light grey) all but disappeared
against the grid's own background, especially for a chip with no custom colour set - reported
as tasks with a white/default background "blending in" to the planner. A darker, still-subtle
border colour (not a heavier width) keeps every chip's edge legible without reading as bold. */
border-color: rgba(0, 0, 0, 0.22) !important;
}
/* The complete/incomplete checkbox icon uses fixed Bootstrap colors (green check, gray circle),
which can blend into a custom task background of a similar shade. A small neutral backdrop keeps
it visible against any background color rather than trying to compute a contrast color for it.
The shared .btn/.btn-sm rules (above) set a min-height (38px/34px) but no matching min-width -
fine for a labelled button that's wider than that anyway, but this is an icon-only toggle that
hugs its ~15px icon horizontally via p-0. Without an explicit square size it renders as a tall,
narrow rectangle instead of a compact square hit target. Sized per grid-scale like every other
density-aware control in this file (Compact/Spacious overrides below); Normal's baseline size
also covers the Timeline view, which shares the same grid-scale-@GridScale class on its table. */
.planner-task-checkbox-btn {
background-color: rgba(255, 255, 255, 0.85) !important;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
width: 22px;
height: 22px;
min-width: 22px !important;
min-height: 22px !important;
}
.grid-scale-Compact .planner-task-checkbox-btn {
width: 18px;
height: 18px;
min-width: 18px !important;
min-height: 18px !important;
}
.grid-scale-Spacious .planner-task-checkbox-btn {
width: 26px;
height: 26px;
min-width: 26px !important;
min-height: 26px !important;
}
/* A small grip glyph makes drag-and-drop between slots/beds discoverable (Grid view chips only -
only those are draggable="true"). Done via ::before rather than markup so it doesn't need to be
threaded through every chip variant individually - uses the bootstrap-icons glyph for
bi-grip-vertical (\f3fe) since the chip itself doesn't have an element free for the purpose. */
.planner-task-chip[draggable="true"] {
padding-left: 14px !important;
}
.planner-task-chip[draggable="true"]::before {
content: "\f3fe";
font-family: "bootstrap-icons" !important;
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
font-size: 0.6rem;
color: rgba(0, 0, 0, 0.3);
pointer-events: none;
cursor: grab;
}
.planner-task-chip .planner-task-text {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
flex: 1 1 auto;
min-width: 0;
}
/* The task-text span carries Bootstrap's .text-body (and .text-muted when completed) classes, which
in Bootstrap 5 declare `color` with !important directly on the element - that beats the chip's own
inline `color: X !important` set by GetTaskStyle for auto-contrast, since CSS inheritance is always
the weakest source of a value and any direct declaration (even from an external stylesheet) wins
over an inherited one, regardless of importance. This selector is more specific than a single class
selector, so it reclaims the inherited (contrast-correct) color instead. Completed tasks lose the
text-muted "grayed out" look as a result, so opacity below stands in for that instead. */
.planner-task-chip .planner-task-text,
.planner-timeline-task-chip .planner-timeline-task-text {
color: inherit !important;
}
.planner-task-chip .planner-task-text.text-decoration-line-through,
.planner-timeline-task-chip .planner-timeline-task-text.text-decoration-line-through {
opacity: 0.7;
}
/* Priority reflected as a colored top-edge stripe on the whole chip (not just the small flag icon)
so high/critical items are scannable at a glance without reading each chip - kept on the top edge
specifically so it stays visually distinct from a custom task color's own border, which still
shows in full on all four sides. Computed inline in GetTaskStyle (TimePlanner.razor.cs) rather
than via this CSS attribute selector, since it needs to win a cascade tie-break against that
custom-color border, which a plain stylesheet rule (even !important) can't do against inline
styles. */
/* Overdue signal: the markup applies "overdue-pulsate" (see GetTaskStyle/IsTaskOverdue call sites
in TimePlanner.razor). The animated pulse (box-shadow keyframe) was removed after user feedback
that it was too distracting - the static border-danger/bg-danger classes plus this small corner
badge are enough to make an overdue task unmistakable without a constant animation. */
.overdue-pulsate {
position: relative;
}
.overdue-pulsate::after {
content: "!";
position: absolute;
top: -6px;
right: -6px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--nt-danger);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
line-height: 15px;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
pointer-events: none;
}
/* Completion feedback: a quick "pop" on the checkmark icon and a brief fade as the strike-through
text settles in, so marking a task done gives clearer tactile feedback (especially on touch
devices where there's no hover state to rely on). Pure CSS - replays automatically whenever the
icon/class changes because Blazor swaps bi-circle -> bi-check-circle-fill and adds the
line-through class on the same render that flips IsCompleted. */
@keyframes taskCheckPop {
0% { transform: scale(0.4); opacity: 0.3; }
60% { transform: scale(1.3); }
100% { transform: scale(1); opacity: 1; }
}
.planner-task-chip .bi-check-circle-fill,
.planner-timeline-task-chip .bi-check-circle-fill {
display: inline-block;
animation: taskCheckPop 0.35s ease-out;
}
/* Moved-task feedback (drag-and-drop or Bed Swap): a task chip previously just reappeared in its
new cell with no transition at all, which could read as "did that actually register?". A brief
highlight fade ties this into the same completion-feedback interaction language as
taskCheckPop above, instead of introducing an unrelated new motion style. Backed by
_recentlyMovedTaskIds (TimePlanner.razor.cs) - added on drop/swap, removed automatically after
this animation's own duration. */
@keyframes taskMovedHighlight {
0% { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.5); }
100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
}
.planner-task-chip.just-moved {
animation: taskMovedHighlight 0.7s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.planner-task-chip.just-moved {
animation: none !important;
}
}
@keyframes taskCompleteFade {
0% { opacity: 1; }
50% { opacity: 0.35; }
100% { opacity: 0.75; }
}
.planner-task-chip .planner-task-text.text-decoration-line-through,
.planner-timeline-task-chip .planner-timeline-task-text.text-decoration-line-through {
animation: taskCompleteFade 0.5s ease-out;
}
/* Chip text was inheriting the Compact grid's blanket 0.72rem cell font-size (.grid-scale-Compact
td above - tuned for fitting headers/hour labels into a dense grid, not for reading task
descriptions) since that rule's !important cascades over the chip's own inline font-size. Bumped
specifically for the chip so Compact stays information-dense everywhere else while task text
remains legible. */
.grid-scale-Compact .planner-task-chip {
padding: 0.15rem 0.3rem !important;
font-size: 0.78rem !important;
}
/* table-layout:fixed is applied to the grid table UNCONDITIONALLY (not just under Fit to Screen):
in the default auto layout, a declared column width is only a hint - the browser will still
widen a column beyond it if that column's cell content (e.g. the Hour column's checkbox + time
text) needs more room, which is exactly why the Hour column used to render wider outside Fit to
Screen. Fixed layout makes column widths strictly authoritative regardless of content, so the
Hour column's 70px (see .planner-hour-column) now holds steady in both modes. This does not
affect the "scroll to see more beds" behavior - the table can still be wider than its container
and overflow into table-responsive's horizontal scrollbar either way. */
.planner-grid-table {
table-layout: fixed;
}
/* Handover Notes panel: a soft info-tinted surface (not just the shared border-info accent, which
any panel could equally use) so the most clinically important carry-over information between
shifts is unmistakably distinct from every other collapsible panel. */
.planner-handover-panel {
background-color: rgba(var(--bs-info-rgb), 0.06);
}
/* Hour column typography: this is the busiest column in the grid (every row repeats it), so the
time itself should read as the dominant element at a glance, with the "mark hour complete"
checkbox as a secondary, lower-contrast control until it's actually interacted with or checked. */
.planner-hour-column {
line-height: 1.1;
}
.planner-hour-column .form-check-input {
opacity: 0.7;
transition: opacity 0.15s ease;
}
.planner-hour-column .form-check-input:hover,
.planner-hour-column .form-check-input:checked,
.planner-hour-column .form-check-input:focus {
opacity: 1;
}
/* Stronger column separation for the bed-by-bed grid - table-bordered's shared 1px cell border is
easy to lose track of when scanning straight down a tall column, especially once several bed
columns require horizontal scrolling. Hour column excluded since it already has its own sticky
left-edge treatment. */
.planner-grid-table > thead > tr > th.planner-bed-header,
.planner-grid-table > tbody > tr > td:not(.planner-hour-column) {
border-left-width: 2px !important;
}
/* "Fit to Screen" grid mode: squeeze all bed columns into the viewport width instead of letting
the table overflow horizontally (the default, which requires scrolling on small/mobile screens). */
.planner-fit-to-screen {
width: 100%;
}
.planner-fit-to-screen th,
.planner-fit-to-screen td {
/* overflow-wrap alone is enough to make text wrap within the narrower Fit to Screen columns -
it doesn't need overflow:hidden to work. overflow:hidden here was clipping the audit-hover
tooltip popup (an absolutely-positioned ::after that intentionally escapes the cell's box to
render above the chip), hiding it whenever the tooltip needed to overlap the row/header above. */
overflow-wrap: break-word;
}
/* Bed column headers carry a fixed predefined width (.planner-bed-header) so that, by default,
columns keep a consistent size regardless of viewport and the user scrolls horizontally to see
them all. In "Fit to Screen" mode that fixed width is overridden so table-layout:fixed can
distribute all bed columns evenly across the available width instead. */
.planner-fit-to-screen .planner-bed-header {
width: auto !important;
/* A floor, not zero - below this, task text has no room to wrap at word boundaries and
degrades into splitting individual characters onto their own line. If there are enough
bed columns that even this minimum doesn't fit the viewport, the table-responsive wrapper
still provides a horizontal scrollbar for the overflow rather than squeezing further. */
min-width: 120px !important;
}
.planner-fit-to-screen .planner-task-chip {
min-width: 0;
}
/* The Hour column used to only get squeezed narrow under Fit to Screen (table-layout:fixed forces
its declared width exactly; the default auto layout let it stretch wider). The user liked that
narrow width and wants it permanently, in every mode - so it's now a fixed width regardless of
table-layout. */
.planner-hour-column {
width: 70px !important;
min-width: 70px !important;
max-width: 70px !important;
}
/* On a narrow/phone-width viewport, the DEFAULT (non-Fit-to-Screen) grid shows ONE bed's worth of
screen at a time instead of a fixed 180px per column - each bed column sized to fill the visible
width, so the user reaches the next bed with a normal horizontal scroll/swipe rather than seeing
several columns squeezed too narrow to read (the old fixed-180px default) or needing to switch
into "Single" bed mode just to get a comfortably-sized column. 100vw minus .planner-hour-column's
own 70px, minus a small safety margin for the grid's own padding/border so a column doesn't
overshoot the viewport by those few extra pixels and force a sliver of unwanted scroll of its
own. Explicitly scoped to NOT apply once .planner-fit-to-screen is active on the same table - that
mode intentionally does the opposite (shrink every column to fit them all on screen at once). */
@media (max-width: 767.98px) {
.planner-grid-table:not(.planner-fit-to-screen) .planner-bed-header {
width: calc(100vw - 70px - 20px) !important;
min-width: calc(100vw - 70px - 20px) !important;
}
}
/* A phone rotated to landscape roughly doubles its portrait width (e.g. ~915px on a Galaxy S24
Ultra) - past the 767.98px cutoff above, columns fell all the way back to the small fixed
180px default, fitting 4+ beds on screen at once instead of the intended "about one bed's worth
of screen" design this whole file is built around. Halving the same one-bed-per-screen formula
instead targets roughly two beds per screen for this specific width band, which is what a
landscape phone's actual doubled width comfortably fits without over-cramming. Genuinely
larger devices (1024px+, ~10" tablets and up) fall through to the normal fixed 180px width. */
@media (min-width: 768px) and (max-width: 1023.98px) {
.planner-grid-table:not(.planner-fit-to-screen) .planner-bed-header {
width: calc((100vw - 70px - 20px) / 2) !important;
min-width: calc((100vw - 70px - 20px) / 2) !important;
}
}
/* ========================================================
STICKY GRID HEADER ROW + FIRST COLUMN
Pins the bed-header row to the top and the Hour column to the left, Excel-freeze-pane style, so
neither is lost while scrolling a long shift. This used to rely on .main-content being the
nearest scrolling ancestor, but Bootstrap's .table-responsive wrapper (needed for the grid's
horizontal scroll) sets overflow-x:auto - which per the CSS spec silently forces overflow-y to
compute as 'auto' too, making .planner-grid-scroll itself the nearest scroll container and
stealing the sticky positioning context away from .main-content. Since .planner-grid-scroll had
no bounded height, it never actually scrolled internally, so top/bottom stickiness silently did
nothing (most visible on mobile, where the page needs to scroll vertically far more often).
nursingToolsPinPlannerGridHeight (print-helper.js) now gives it a JS-computed max-height sized to
exactly fill the remaining viewport, making it a genuine self-contained scroll container without
leaving .main-content anything left to scroll - avoiding the redundant double-scrollbar an
earlier fixed-height attempt produced.
======================================================== */
.planner-grid-scroll thead th {
position: sticky;
top: 0;
z-index: 10;
}
.planner-grid-scroll tbody td:first-child {
position: sticky;
left: 0;
z-index: 5;
}
.planner-grid-scroll thead th:first-child {
/* Top-left corner cell is sticky in both directions at once - needs to sit above both the
plain top-sticky header cells and the plain left-sticky first-column cells. */
z-index: 15;
}
/* The bed-header cog dropdown pops its menu out of a sticky | (position:sticky + z-index above
establishes its own stacking context), so the dropdown-menu's own z-index alone can't lift it
above a SIBLING sticky | with a higher baseline z-index - the Hour column (z-index:15 via
:first-child above) otherwise always renders on top of it regardless of the popped-out menu's own
z-index, since stacking is compared at the parent | level once a context is established.
Lifting the specific | only while its own dropdown is actually open (:has the open menu) keeps
the normal sticky layering untouched every other time. */
.planner-grid-scroll thead th:has(.dropdown-menu.show) {
z-index: 20;
}
/* Sticky "Add Task" footer row - pins to the bottom of the scrolling viewport (same technique as
the sticky header, just anchored to the opposite edge) so there's always a one-tap way to add a
task without scrolling back up to find an empty cell. */
.planner-grid-add-row td {
position: sticky;
bottom: 0;
z-index: 9;
background-color: var(--bs-body-bg);
}
/* ========================================================
TIMELINE VIEW: RESPONSIVE MULTI-COLUMN TASK CHIPS
Tasks used to stack one-per-row in a single wide column. Wrapping them lets more fit on screen
at once, scaled by viewport width - roughly 3 per row on mobile up to 5-7 on large desktops -
without any JS/server-side breakpoint detection, so it reflows immediately on window resize.
======================================================== */
.planner-timeline-task-list {
align-content: flex-start;
}
.planner-timeline-task-chip {
/* Mobile-first: one per row by default (see item 3 - narrow phones can't fit 3 truncated
chips legibly). The min-width: 768px query below restores the wider multi-column layout. */
flex: 1 1 100%;
max-width: 100%;
box-sizing: border-box;
/* Same reasoning as .planner-task-chip's border-color override above - kept in sync so a
default-background task chip reads the same way in both Grid and Timeline. */
border-color: rgba(0, 0, 0, 0.22) !important;
}
/* A dark-tinted border (the default above) all but vanishes against a dark theme's own dark
backgrounds - the opposite problem it was fixing in light mode. Light tint instead, same idea. */
[data-bs-theme="dark"] .planner-task-chip,
[data-bs-theme="dark"] .planner-timeline-task-chip {
border-color: rgba(255, 255, 255, 0.28) !important;
}
.planner-timeline-task-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
@media (min-width: 768px) {
.planner-timeline-task-chip {
flex-basis: calc(25% - 0.75rem);
max-width: calc(25% - 0.75rem);
}
}
/* Grid view's per-cell task chips get their flex-basis computed inline (server-side, up to
~33% for 3-per-row - see GetTaskChipFlexBasis in TimePlanner.razor.cs). !important is required
to win over that inline style; overriding it here rather than in C# keeps the "1 per row on
mobile" rule purely presentational and viewport-reactive (no server round-trip on resize/rotate). */
@media (max-width: 767px) {
.planner-task-chip {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* Sticky | / | positioning silently breaks under Bootstrap's default border-collapse:collapse
on - a well-known cross-browser quirk, most visible on narrow/mobile viewports where
scrolling the grid (both directions) is unavoidable. border-spacing:0 keeps the collapsed-border
visual look while switching to the separate border model sticky positioning actually needs. */
.planner-grid-scroll table {
border-collapse: separate;
border-spacing: 0;
}
/* Under border-collapse:separate, a 's own background-color (e.g. the current-hour amber tint
or the all-tasks-completed green tint - both applied as a class on the itself) no longer
shows through its | children, which each paint their own background box once cells are
separate rather than collapsed. inherit pulls the row's computed background back onto every
cell, restoring the row-level tint - also incidentally fixes the sticky first column (Hour) not
having an opaque background, which would otherwise let horizontally-scrolled content show
through it. */
.planner-grid-scroll tbody td {
background-color: inherit;
}
/* The rule above loses to the global alternating-row stripe (.table > tbody > tr:nth-of-type(even) >
*, in the shared table rules) on every EVEN row - that selector's specificity (2 classes/pseudo-
classes, 2 type selectors) beats this file's plain ".planner-grid-scroll tbody td" (1 class, 2
types), so an even-numbered "fully completed" or "current hour" row rendered the neutral stripe
color instead of its green/amber tint while the very next (odd) row correctly showed it - visible
as seemingly random "different shades" between rows that are actually in the exact same state.
Matching the semantic row classes directly here (2 classes + 3 types) is specific enough to win
regardless of row position, without needing !important. */
.planner-grid-scroll tbody tr.bg-success td,
.planner-grid-scroll tbody tr.bg-warning td {
background-color: inherit;
}
/* The framework's default #components-reconnect-modal is a full-screen, input-blocking dark
overlay - jarring on mobile web, where a backgrounded tab losing/regaining its WebSocket is
routine (app-switch, screen lock, brief signal loss) and shouldn't interrupt whatever the user
is doing. Overridden here (with !important, since the SDK ships its own inline/companion styles)
to a small fixed corner badge instead, matching the MAUI app's existing unobtrusive
"Offline"/reconnecting header badge (see MainLayout.razor's IsOffline badge) - the actual
content (spinner + "Reconnecting...") is set in App.razor's child content. */
#components-reconnect-modal {
/* Hidden by default - unlike the framework's own dynamically-created fallback UI (which ships
its own show/hide plumbing), a hand-authored static div has no built-in "hidden until
Blazor says otherwise" behavior, so without this it was visible from the very first paint
and stayed that way, since nothing ever told it to disappear in the steady-state "connected,
nothing wrong" case (only the show/failed/rejected states below were ever styled). */
display: none !important;
position: fixed !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
max-width: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
z-index: 1300 !important;
pointer-events: none !important;
}
/* Delays the reconnect badge from actually becoming visible for ~700ms after Blazor Server
detects the circuit dropped. Mobile browsers routinely suspend/kill a backgrounded tab's
WebSocket the instant it loses focus (app-switch, screen lock), so returning to the tab almost
always triggers a brief reconnect that resolves in well under a second - showing anything for
that isn't useful, it's just flicker. A genuinely slow/failed reconnect (bad network, server
restart) still shows the badge once the delay elapses. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
display: block !important;
opacity: 0;
animation: reconnectModalDelayedShow 0s 700ms forwards;
}
/* Blazor removes the show/failed/rejected class once reconnected but doesn't necessarily add a
distinct "hide" class back - explicitly forcing display:none here (redundant with the base rule
above under normal cascade rules, but cheap insurance against specificity surprises) guarantees
the badge actually disappears once reconnection succeeds. */
#components-reconnect-modal.components-reconnect-hide {
display: none !important;
}
@keyframes reconnectModalDelayedShow {
to {
opacity: 1;
}
}
@media (min-width: 992px) {
.planner-timeline-task-chip {
flex-basis: calc(20% - 0.8rem);
max-width: calc(20% - 0.8rem);
}
}
@media (min-width: 1400px) {
.planner-timeline-task-chip {
flex-basis: calc(14.2857% - 0.86rem);
max-width: calc(14.2857% - 0.86rem);
}
}
/* ========================================================
EMPTY-CELL "ADD" HINT
A faint "+" that only appears while hovering a genuinely empty grid cell on mouse/trackpad
devices (razor only renders this element when the cell has no tasks) - replaces a permanently-
visible "+ Add Task" label that cluttered every cell regardless of how full it already was.
Touch devices get the opposite treatment below: no hover state to reveal it, so it's always
visible there instead, with an explicit "Add" label.
======================================================== */
.planner-empty-cell-hint {
text-align: center;
color: var(--bs-secondary-color, #6c757d);
opacity: 0;
transition: opacity 0.15s ease-in-out;
pointer-events: none;
font-size: 0.85rem;
}
td:hover .planner-empty-cell-hint {
opacity: 0.6;
}
.planner-empty-cell-hint-label {
display: none;
}
/* Touch devices have no hover state to reveal the hint above, and a bare ~14px "+" glyph is too
small a target to reliably notice or tap - so on touch/coarse-pointer viewports the hint stays
permanently visible with an explicit "Add" label and a taller tap area instead of relying on
:hover. Mirrors the (hover: hover) and (pointer: fine) touch/mouse split already used for the
task chip audit tooltip below. */
@media (hover: none) and (pointer: coarse) {
.planner-empty-cell-hint {
opacity: 0.6;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
min-height: 32px;
font-size: 0.75rem;
}
.planner-empty-cell-hint-label {
display: inline;
font-weight: 600;
}
}
/* A persistent small "+" strip that renders BELOW existing task chip(s) in a non-empty cell - the
hint above only ever exists in a genuinely EMPTY cell, but a cell with exactly one task (or any
exact multiple of the per-row count - see GetTaskChipFlexBasis) has its chip(s) tile the row with
no leftover space, leaving nothing to tap through to the cell's own add-task click handler. This
has no click handler of its own (no @onclick, no stopPropagation) - a tap bubbles straight up to
the cell, exactly like clicking blank cell space would. Always at least faintly visible (not
hover-only) since touch devices have no hover state to reveal it. */
.planner-add-more-hint {
width: 100%;
text-align: center;
color: var(--bs-secondary-color, #6c757d);
opacity: 0.45;
font-size: 0.7rem;
padding: 3px 0;
margin-top: 2px;
pointer-events: none;
transition: opacity 0.15s ease-in-out;
}
td:hover .planner-add-more-hint {
opacity: 0.85;
}
@media (hover: none) and (pointer: coarse) {
.planner-add-more-hint {
opacity: 0.7;
min-height: 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
}
/* Still needed for .planner-task-chip[draggable="true"]::before's grip icon below (position:absolute
relative to the chip's own box) - the audit tooltip that used to also depend on this no longer
does (see TASK CHIP AUDIT HOVER TOOLTIP below), but this rule stays for that reason. */
.planner-task-chip,
.planner-timeline-task-chip {
position: relative;
}
/* ========================================================
TASK CHIP AUDIT HOVER TOOLTIP
See data-audit-tooltip / GetTaskAuditTooltip in TimePlanner.razor(.cs). Previously a pure-CSS
::after popup anchored to the chip itself - simple, but genuinely got clipped/hidden by
.planner-grid-scroll's own overflow:auto (forced alongside overflow-x:auto for the horizontal
scrollbar - see that rule's own comment above) whenever the popup's box extended outside the
scrolled viewport, which is common for a chip in the grid's topmost visible row, right under the
sticky header. installAuditTooltip (nursingtools.js) now renders a single reusable element
appended to and positioned with position:fixed from the hovered chip's real screen
coordinates instead, which escapes that clipping entirely. This class only styles that element;
the show/hide/position logic all lives in JS. */
.nt-audit-tooltip {
display: none;
position: fixed;
white-space: pre-line;
background: #212529;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 0.68rem;
line-height: 1.4;
width: max-content;
max-width: 220px;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
pointer-events: none;
/* Above every sticky grid element (max 20 - see the sticky header/first-column rules above) and
comfortably below real UI chrome (modals/offcanvas start at 1030+) that should never coexist
with a hover tooltip anyway. */
z-index: 200;
}
/* ========================================================
PANEL TOGGLE BUTTON GROUP (Progress/Handover/Templates)
Used to hold up to 5 icon+label buttons (this trio plus Deferred/Metrics, both since moved into
their own on-demand modals opened from the Options dropdown instead - see TimePlanner.razor's
Options menu). That row used to need real shrinking (smaller padding/gap/font-size) just to fit
all 5 on a narrow MAUI/mobile viewport without hiding any off-screen. With only 3 buttons left
there's comfortable room to go the other way instead: bigger touch targets on mobile/MAUI, which
is exactly the screen size that benefits most from that.
======================================================== */
.planner-panel-toggle-btn {
height: 31px;
border: none !important;
font-size: 0.72rem;
padding-left: 0.65rem;
padding-right: 0.65rem;
}
@media (max-width: 767px) {
.planner-panel-toggle-btn {
height: 38px;
font-size: 0.82rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
gap: 0.3rem;
}
}
/* ========================================================
MOBILE FLOATING "ADD TASK" BUTTON
======================================================== */
.planner-mobile-fab {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
z-index: 1090;
}
/* A subtle nudge toward the Add Task button on a genuinely empty shift (see the
planner-mobile-fab-pulse class only being rendered when TotalTasksCount == 0 in
TimePlanner.razor) - stops the moment the first task exists, so it never distracts once the
planner is actually in use. */
@keyframes plannerFabPulse {
0% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.55); }
70% { box-shadow: 0 0 0 12px rgba(var(--bs-primary-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}
.planner-mobile-fab-pulse {
animation: plannerFabPulse 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.planner-mobile-fab-pulse {
animation: none !important;
}
}
/* ========================================================
DRAG-AND-DROP GHOST PREVIEW
Purely client-side (see print-helper.js / the dragenter listener it registers) - toggled by
plain DOM class add/remove on dragenter, NOT routed through a Blazor event handler. Binding a
live .NET handler to a high-frequency drag event once caused a severe perf regression (see
OnDropCell's history), so this stays 100% JS with zero server round-trips.
======================================================== */
.planner-drop-ghost {
position: relative;
}
.planner-drop-ghost::after {
content: "";
position: absolute;
inset: 3px;
border: 2px dashed var(--bs-primary, #0d6efd);
background-color: rgba(13, 110, 253, 0.12);
border-radius: 6px;
pointer-events: none;
z-index: 6;
}
/* Touch/pen drag-and-drop (print-helper.js) - source chip while being carried, and the floating
clone that follows the finger. */
.planner-touch-dragging {
opacity: 0.35;
}
.planner-touch-ghost {
opacity: 0.9;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
transform: rotate(-2deg);
}
/* Flags a task chip that a SharedPlanner guest (no account) just added/edited, live - cleared
automatically on the next reload of any kind (see RefreshGuestChangedTaskIds in TimePlanner.razor.cs). */
.guest-change-badge {
flex-shrink: 0;
font-size: 0.65rem;
font-weight: bold;
width: 15px;
height: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin-right: 4px;
animation: guest-change-pulse 1.2s ease-in-out infinite;
}
@keyframes guest-change-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.15); }
}
/* Generic browser-print reset, kept even though TimePlanner's own Grid/Timeline print views now
generate a server-side PDF instead of using window.print() (see PlannerPdfRenderer) - a user can
still trigger a native Ctrl+P/browser print on ANY page, and MainLayout.razor's chrome
(hamburger/dark-mode toggles) still marks itself .no-print for exactly that case. */
@media print {
html, body, .main-content {
background-color: #fff !important;
}
.no-print {
display: none !important;
}
}
/* ========================================================
DYNAMIC SIDEBAR COLLAPSIBLE ACCORDION ANIMATIONS
======================================================== */
.collapse.show {
display: flex !important;
}
.collapse:not(.show) {
display: none !important;
}
/* Offsets the left padding alignment of the nested accordion links */
.sidebar .collapse .nav-link {
padding-left: 2rem !important;
font-size: 0.82rem !important;
opacity: 0.75;
}
.sidebar .collapse .nav-link:hover {
opacity: 1;
}
/* High-fidelity custom focus ring and active indicator */
.sidebar .collapse .nav-link.active {
font-weight: 600 !important;
background-color: rgba(13, 110, 253, 0.15) !important;
color: var(--bs-primary) !important;
box-shadow: none !important;
}
/* ========================================================
HIGH-FIDELITY MOBILE ENVIRONMENT MEDIA QUERIES (MAX 768px)
Also applies on any touch device up to 1023.98px wide (not just a real desktop browser narrowed
that far) - a phone rotated to landscape (a Galaxy S24 Ultra is still only ~915px wide there, not
remotely tablet-sized) could otherwise cross 768px and flip the sidebar from its mobile hamburger-
triggered overlay into the permanent desktop collapse-toggle column, which then visually overlaps
the fixed bottom action bar/scroll-top/Add Task buttons (those stay in their mobile layout past
768px on a touch device too - see the "(pointer: coarse)" bottom-bar override further down - so the
sidebar needs to agree with them on where "mobile" ends, not switch independently at a different
width). A real desktop browser resized this narrow (pointer: fine) is untouched by the OR clause
and still only gets this treatment below 768px, same as before. 1024px roughly matches a 10"
tablet in landscape - genuinely larger touch devices still get the desktop sidebar as intended. */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1023.98px) {
/* Forces the sidebar to occupy 100% screen width as the home screen on startup */
.sidebar {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important; /* Overrides desktop min-width restrictions */
position: fixed !important;
top: 0;
left: 0;
height: 100vh !important;
display: flex !important;
z-index: 1050 !important;
transition: transform 0.25s ease-in-out;
}
.sidebar:not(.show) {
transform: translateX(-100%);
display: none !important;
}
.sidebar.show {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 80px !important; /* Extra space at bottom to ensure last items are scrollable */
}
/* When the mobile sidebar is active, hide the clinical dashboard entirely */
.sidebar.show ~ .main-content {
display: none !important;
}
/* Allow main content to occupy full screen when sidebar is dismissed */
.main-content {
width: 100% !important;
/* Deliberately NOT setting height here (used to be 100vh !important) - that silently
re-overrode the base .main-content rule's 100svh fix (see the comment above it) the moment
the viewport narrowed to this breakpoint, which is exactly MAUI/narrow-browser width. The
resulting inflated .main-content.clientHeight fed straight into
nursingToolsPinPlannerGridHeight's available-space calculation (print-helper.js), which sized
.planner-grid-scroll taller than what was actually visible - overflowing .main-content and
giving TimePlanner's grid view a second, competing vertical scrollbar on top of its own
(plus the horizontal one), three scrollbars total. Falling through to the base rule's 100svh
fixes this without needing a separate value here. */
padding-top: 0px !important; /* Removes duplicate top padding to snap content cleanly beneath the header */
}
/* Tighter content padding optimized specifically for mobile screen dimensions */
main.p-4 {
padding: 0.5rem !important;
}
/* CRITICAL COLLAPSE: Forcibly collapses any spacer wrappers or container divs inside the main viewport */
main,
main > div,
main > section,
main > form {
padding-top: 0px !important;
margin-top: 0px !important;
}
.main-content .card,
.main-content .container,
.main-content .container-fluid {
margin-top: 0.25rem !important; /* Snaps the card cleanly beneath the header */
margin-bottom: 0.5rem !important;
}
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5 {
margin-top: 0.25rem !important;
margin-bottom: 0.5rem !important;
}
}
/* Bootstrap's d-md-none/d-md-inline-flex utilities on the sidebar's own three trigger controls
(mobile hamburger in the top navbar, mobile "Close Menu" X inside the sidebar, desktop collapse-
toggle chevron) still key purely off the 768px width breakpoint, unaffected by the widened
mobile-overlay query above - without this, a touch device between 768-1023.98px would get the
mobile-overlay .sidebar layout back but with the DESKTOP's collapse-toggle/hidden-hamburger
button set, leaving no working way to actually open it. Combined-class selectors
(.mobile-nav-toggle-btn.d-md-none etc.) give this higher specificity than Bootstrap's own bare
.d-md-none/.d-md-inline-flex rules, so source order doesn't matter. */
@media (pointer: coarse) and (max-width: 1023.98px) {
.mobile-nav-toggle-btn.d-md-none {
display: inline-flex !important;
}
.sidebar .btn-close.d-md-none {
display: inline-block !important;
}
.sidebar-collapse-toggle.d-md-inline-flex {
display: none !important;
}
}
/* ========================================================
NATIVE PLATFORM PHONE BOUNDARIES (iOS & Android Safe Areas)
======================================================== */
.status-bar-safe-area {
display: none;
}
@supports (-webkit-touch-callout: none) {
.status-bar-safe-area {
display: flex;
position: sticky;
top: 0;
height: env(safe-area-inset-top);
background-color: var(--nt-page-bg);
width: 100%;
z-index: 1;
}
.flex-column, .navbar-brand {
padding-left: env(safe-area-inset-left);
}
}
/* ==========================================================================
GLOBAL PAGE-LEVEL SPACING COMPRESSION (Kills Empty Top Gaps)
========================================================================== */
main .container-fluid,
main .container {
padding-top: 0px !important; /* Overrides and flattens 'py-4' top padding globally */
margin-top: 0px !important;
}
/* Snaps content cards directly beneath your top navigation header */
main .card {
margin-top: 0px !important;
}
/* Reduces standard page-level top padding inside the main viewport container */
main.p-4 {
padding-top: 0.5rem !important;
}
/* ==========================================================================
SCROLLBAR STYLING: Thin auto-hiding scrollbars for all platforms
========================================================================== */
/* WebKit/Chromium: Thin, auto-hiding scrollbar */
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
}
::-webkit-scrollbar-thumb {
background-color: rgba(128, 128, 128, 0.4) !important;
border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(128, 128, 128, 0.6) !important;
}
/* Firefox: Thin scrollbar */
html, body, .main-content, .sidebar, .table-responsive, div {
scrollbar-width: thin !important;
scrollbar-color: rgba(128, 128, 128, 0.4) transparent !important;
}
/* ==========================================================================
COOKIE / STORAGE CONSENT BANNER (see CookieConsentBanner.razor)
========================================================================== */
.cookie-consent-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9980;
padding: 0.75rem;
background-color: var(--nt-card-bg);
border-top: 1px solid var(--nt-card-border);
box-shadow: var(--nt-card-shadow-hover);
}
.cookie-consent-banner-body {
max-width: 960px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.cookie-consent-icon {
font-size: 1.5rem;
color: var(--nt-primary);
flex-shrink: 0;
}
.cookie-consent-text {
flex: 1 1 320px;
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.85rem;
color: var(--bs-body-color);
}
.cookie-consent-text span {
color: var(--bs-secondary-color);
}
.cookie-consent-actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
margin-left: auto;
}
@media (max-width: 575px) {
.cookie-consent-banner-body {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.cookie-consent-actions {
margin-left: 0;
justify-content: center;
}
}
/* ==========================================================================
TOAST NOTIFICATION SYSTEM
========================================================================== */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast-notification {
pointer-events: auto;
min-width: 280px;
max-width: 400px;
padding: 12px 16px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 10px;
animation: toastSlideIn 0.3s ease-out;
font-size: 0.85rem;
font-weight: 500;
border-left: 4px solid;
position: relative;
overflow: hidden;
}
/* Shrinks over the same 6s the Undo toast stays on screen (see showUndoToast in print-helper.js),
so the user can see at a glance how much longer they have before the action can't be undone. */
.toast-undo-progress {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background-color: currentColor;
opacity: 0.45;
animation: toastUndoShrink 6s linear forwards;
}
@keyframes toastUndoShrink {
from { width: 100%; }
to { width: 0%; }
}
.toast-notification.toast-success {
background-color: #d4edda;
color: #155724;
border-left-color: #28a745;
}
.toast-notification.toast-error {
background-color: #f8d7da;
color: #721c24;
border-left-color: #dc3545;
}
.toast-notification.toast-warning {
background-color: #fff3cd;
color: #856404;
border-left-color: #ffc107;
}
.toast-notification.toast-info {
background-color: #d1ecf1;
color: #0c5460;
border-left-color: #17a2b8;
}
/* Dark-mode toasts: the light-mode pastels above (#d4edda etc.) are unreadably washed-out against
the dark page background, so dark mode gets its own deeper, desaturated tint per status instead
of reusing the light-mode colors. */
[data-bs-theme="dark"] .toast-notification.toast-success {
background-color: #1c3a2e;
color: #8fe3b8;
border-left-color: var(--nt-success);
}
[data-bs-theme="dark"] .toast-notification.toast-error {
background-color: #3a1f21;
color: #f3a6a9;
border-left-color: var(--nt-danger);
}
[data-bs-theme="dark"] .toast-notification.toast-warning {
background-color: #3a301a;
color: #f0cd8a;
border-left-color: var(--nt-warning);
}
[data-bs-theme="dark"] .toast-notification.toast-info {
background-color: #1c333a;
color: #9bd6e8;
border-left-color: var(--nt-info);
}
.toast-notification .toast-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.toast-notification .toast-close {
margin-left: auto;
cursor: pointer;
background: none;
border: none;
font-size: 1.1rem;
opacity: 0.6;
padding: 0;
line-height: 1;
color: inherit;
}
.toast-notification .toast-close:hover {
opacity: 1;
}
@keyframes toastSlideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes toastFadeOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
/* The user editor's tenant mapping grid needs five usable columns. Keep account
details narrower on desktop and stack both panes before controls become cramped. */
.user-editor-modal {
--bs-modal-width: min(1180px, calc(100vw - 2rem));
}
.tenant-mappings-table-wrap {
max-height: 250px;
overflow: auto;
}
.tenant-mappings-table {
min-width: 620px;
table-layout: fixed;
}
.tenant-mappings-table th:nth-child(1) { width: 21%; }
.tenant-mappings-table th:nth-child(2) { width: 21%; }
.tenant-mappings-table th:nth-child(3) { width: 23%; }
.tenant-mappings-table th:nth-child(4) { width: 14%; }
.tenant-mappings-table th:nth-child(5) { width: 21%; }
.tenant-mappings-table .form-select {
width: 100%;
min-width: 0;
}
.tenant-mapping-remove {
white-space: nowrap;
}
/* The warning alert uses different foreground/background values in each theme, so Bootstrap's
generic outline-dark button can become dark-on-dark. Keep this action readable in both modes. */
.scheduling-conflict-more-info {
color: #3b300d;
border: 1px solid #66531a;
background-color: rgba(255, 255, 255, 0.38);
}
.scheduling-conflict-more-info:hover,
.scheduling-conflict-more-info:focus-visible {
color: #211a05;
border-color: #3b300d;
background-color: rgba(255, 255, 255, 0.72);
}
[data-bs-theme="dark"] .scheduling-conflict-more-info {
color: #fff3cd;
border-color: #f3d98a;
background-color: rgba(255, 243, 205, 0.08);
}
[data-bs-theme="dark"] .scheduling-conflict-more-info:hover,
[data-bs-theme="dark"] .scheduling-conflict-more-info:focus-visible {
color: #1d1706;
border-color: #ffe69c;
background-color: #ffe69c;
}
@media (max-width: 991.98px) {
.user-editor-access-column {
border-left: 0 !important;
border-top: 1px solid var(--bs-border-color);
padding-top: 1rem;
}
}
/* ==========================================================================
SKELETON LOADING PLACEHOLDERS
Replaces the plain spinner + "Loading..." text pattern on the app's heaviest
pages (Home, Bed Board, Time Planner) with shimmering blocks shaped like the
content that's about to appear - conveys "here's roughly what's coming and
how much of it" instead of a generic spinner giving no sense of progress.
========================================================================== */
.skeleton-block {
background: linear-gradient(90deg,
var(--bs-tertiary-bg) 25%,
var(--bs-secondary-bg) 37%,
var(--bs-tertiary-bg) 63%);
background-size: 400% 100%;
animation: skeletonShimmer 1.4s ease infinite;
border-radius: 0.5rem;
}
@keyframes skeletonShimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton-block {
animation: none;
background: var(--bs-tertiary-bg);
}
}
.skeleton-line {
height: 0.85rem;
margin-bottom: 0.5rem;
}
.skeleton-line.w-25 { width: 25%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-row {
height: 2.5rem;
margin-bottom: 0.6rem;
}
.skeleton-card {
height: 100%;
min-height: 160px;
}
/* ==========================================================================
COLOR SWATCH PICKER (see ColorSwatchPicker.razor)
========================================================================== */
.color-swatch-picker {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
max-width: 230px;
}
.color-swatch {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
margin: 0;
position: relative;
flex-shrink: 0;
transition: transform 150ms ease, border-color 150ms ease;
}
.color-swatch:hover {
transform: scale(1.15);
}
.color-swatch.selected {
border-color: var(--bs-body-color);
box-shadow: 0 0 0 2px var(--bs-body-bg);
}
.color-swatch.selected::after {
content: "\f26e"; /* bi-check-lg */
font-family: "bootstrap-icons" !important;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.75rem;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.color-swatch-custom {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #fff;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0;
color: var(--bs-secondary-color);
font-size: 0.75rem;
}
.color-swatch-custom.selected {
color: transparent;
}
.color-swatch-custom input[type="color"] {
opacity: 0;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: pointer;
padding: 0;
border: 0;
}
/* ==========================================================================
COLLAPSED (ICON-ONLY) SIDEBAR MODE - opt-in, persisted (see MainLayout.
razor's ToggleSidebarCollapsed). Deliberately CSS-only: every nav link's
label is a plain text node (no wrapping ), so collapsing is done by
zeroing the .nav-link's own font-size (collapsing all direct text to zero
width) while every icon re-declares its own absolute rem size (fs-4/fs-5
etc.), which is unaffected by the parent's font-size and stays fully
visible - no markup changes needed across the whole sidebar.
Breakpoint matches the collapse toggle button's own d-md-inline-flex
(MainLayout.razor) - was min-width:992px, which left the toggle rendering
its class with no visual effect between 768-991px (the sidebar's own
768px mobile-slide-out cutoff and this collapse mode's old 992px cutoff
didn't line up), most commonly hit by a MAUI phone in landscape.
Every selector below is also guarded with :not(.show) - .show is the class
the mobile hamburger toggle (nursingToolsToggleSidebar) adds/removes, and
only ever means "currently rendering as the mobile overlay" regardless of
viewport width or pointer type. Without the guard, a touch device/MAUI
session with SidebarCollapsed=true persisted from an earlier desktop-style
session opened the mobile overlay already icon-only-collapsed - and with
the collapse-toggle chevron button ALSO hidden in that same mobile-overlay
range (see the "(pointer: coarse) and (max-width: 1023.98px)" sidebar
trigger-button rules further up), there was no control left to expand it
again at all. Decided the mobile overlay should just always open expanded,
full stop, regardless of what SidebarCollapsed happens to be persisted as
- simpler than trying to reintroduce a mobile-reachable way to toggle it. */
@media (min-width: 768px) {
/* Widened from an earlier 72px, and the sidebar's own p-3 (1rem/16px each side) padding is cut
to 0.4rem here too - at 72px + full padding, only ~40px of actual content width remained,
and Bootstrap-icon glyphs plus their containing flex row had no margin for error, rendering
as visibly clipped/off-center ("half cut off") against the sidebar's own overflow-x, which is
implicitly clipped (not visible) any time overflow-y is anything other than visible. */
.sidebar.sidebar-collapsed:not(.show) {
width: 76px !important;
min-width: 76px !important;
padding-left: 0.4rem !important;
padding-right: 0.4rem !important;
}
.sidebar.sidebar-collapsed:not(.show) .nav-link,
.sidebar.sidebar-collapsed:not(.show) .sidebar-org-name,
.sidebar.sidebar-collapsed:not(.show) .sidebar-brand-text {
font-size: 0 !important;
}
.sidebar.sidebar-collapsed:not(.show) .nav-link {
justify-content: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.sidebar.sidebar-collapsed:not(.show) .nav-link i,
.sidebar.sidebar-collapsed:not(.show) .nav-link .bi {
margin: 0 !important;
flex-shrink: 0 !important;
}
/* Group-header rows (Clinical Assessments, Calculations, dynamic organisation menu groups,
etc.) pair a leading icon+label with a trailing .sidebar-chevron via justify-content-between
- in a 76px icon rail there's no room for a second icon, and their nested, indented
(.border-start) sub-item lists have nowhere to go at all. Hide both rather than let them
overflow/clip; expanding a group again after leaving rail mode is unaffected, since this only
hides rendering while collapsed; the underlying expand/collapse state is untouched. */
.sidebar.sidebar-collapsed:not(.show) .sidebar-chevron,
.sidebar.sidebar-collapsed:not(.show) .border-start {
display: none !important;
}
/* "ORGANISATION LINKS" (and any future section-divider label) is a bare with its own
inline font-size, not a .nav-link - the generic font-size:0 rule above never reached it, so
at full size (0.7rem) plus px-3 padding and no white-space:nowrap, it wrapped across several
lines in a 76px rail and visibly broke the collapsed layout below it whenever an organisation
had any Menu Builder items configured. Hide it outright rather than just shrinking its text -
a lone section header with no room for its label serves no purpose in icon-only mode. */
.sidebar.sidebar-collapsed:not(.show) .sidebar-section-label {
display: none !important;
}
.sidebar.sidebar-collapsed:not(.show) .sidebar-brand-row {
justify-content: center !important;
}
.sidebar.sidebar-collapsed:not(.show) .sidebar-brand-link {
padding-left: 0 !important;
padding-right: 0 !important;
}
.sidebar.sidebar-collapsed:not(.show) .sidebar-brand-link img,
.sidebar.sidebar-collapsed:not(.show) .sidebar-brand-link i {
margin: 0 !important;
}
/* Badges/counts on a nav item (e.g. a future unread indicator) would
otherwise also collapse to font-size:0 via inheritance - pin them back
to a small legible size instead of disappearing. */
.sidebar.sidebar-collapsed:not(.show) .nav-link .badge {
font-size: 0.55rem !important;
}
/* The "you are here" accent bar's expanded-mode offset (-0.5rem) assumes the sidebar's full
1rem padding gutter to sit in - that gutter is only 0.4rem wide here, so the bar needs to sit
flush against the link's own edge instead or it gets clipped by the sidebar's overflow-x. */
.sidebar.sidebar-collapsed:not(.show) .nav-link.active::before {
left: 0;
}
}
/* Positioned fully inside the sidebar's own bounds (not straddling its right edge) - the sidebar
has overflow-y-auto, which per the CSS overflow spec silently forces overflow-x to behave as
auto (clipping) too whenever it isn't explicitly "visible". A button hanging half outside that
boundary was being clipped down to a barely-visible sliver rather than truly rendering "on the
edge" as intended. Solid primary-color fill (rather than a subtle outline) also keeps it clearly
visible against the sidebar's own background in both themes without depending on hover state. */
.sidebar-collapse-toggle {
position: absolute;
top: 0.85rem;
right: 6px;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--nt-primary);
border: 2px solid var(--bs-body-bg);
color: #fff;
box-shadow: var(--nt-card-shadow);
z-index: 1041;
font-size: 0.75rem;
}
.sidebar-collapse-toggle:hover {
background: var(--nt-primary-hover);
}
| |