/* Calendar and Agenda List — shared components.
Extracted from components.css (CSS split, CLAUDE.md §12).
Consumed by frontend/js/components/calendar.js and agenda-list.js,
which back the month-grid / day-by-day views across My Schedule,
Wish Submission, Planning Calendar, Current Schedule, and Published
Roster (CLAUDE.md §13), and the schedule badges drawn into those cells. Deliberately designed to be
source-order-independent (specificity/compound-selector tricks,
translucent overlay layers) — see the individual rule comments
below — with the one exception noted where .cal-cell.cal-past is
appended at the end of this same file.
Dark-theme overrides are colocated at the bottom of this file
instead of a separate far-away tail block. */
@layer components {
/* ── Schedule badges (components/schedule-calendar.js, features/wishes/presentation.js) ──
One shift or wish badge in a month cell: My Schedule, the personal
dashboard legend and Wish Submission. Mobile compaction further down. */
.sch-shift-badge {
border-radius: var(--radius-sm);
padding: 2px var(--space-2);
margin-bottom: 2px;
font-size: 0.7rem;
font-weight: 600;
display: flex;
flex-direction: column;
gap: 1px;
border-left: 5px solid transparent;
}
/* Location colour (identity) — color-engine.js, the same axis the hero
panel and the day strip use, so a shift's colour means the same
thing everywhere it appears. A thick left border alone reads weakly at
this badge's compact size, so .sch-shift-name also carries a .chip-dot
(same dot markup roster-grid.js/day-detail.js use) — it inherits the
badge's own `color`, so no separate per-slot dot rules are needed here,
unlike .shift-chip's below (which doesn't tint its own text). A hollow
ring (chip-oncall) marks on-call/off-hours instead of the solid dot —
the fill-style channel §13.1 defines, stronger than the previous
dashed-vs-solid border alone. */
.sch-shift-badge:is(.loc-1, .loc-2, .loc-3, .loc-4, .loc-5, .loc-6, .loc-7, .loc-8) { background: color-mix(in srgb, var(--loc) 14%, var(--surface)); color: var(--loc); border-left-color: var(--loc); }
/* Overflow slot — also hit by wish-submission.js's shift-type wishes that
have no location preference set at all (location_id is optional, §3.6). */
.sch-shift-badge.loc-other { background: var(--surface-sunk); color: var(--muted); border-left-color: var(--muted); }
.sch-shift-badge.chip-oncall { border-left-style: dashed; }
.sch-shift-badge .chip-dot { background: currentColor; }
.sch-shift-badge.chip-oncall .chip-dot { background: transparent; border: 1.5px solid currentColor; }
.sch-shift-name { font-weight: 700; display: flex; align-items: center; gap: 4px; }
/* Approval-status tone (my-schedule.js's wish badges/legend — a fixed
approved/not_approved/undecided set, unrelated to the location-hue loc-N
modifiers above; a badge is only ever one or the other). */
.sch-shift-badge.tone-success { background: var(--success-bg); color: var(--success); border-left-color: var(--success); }
.sch-shift-badge.tone-danger { background: var(--danger-bg); color: var(--danger); border-left-color: var(--danger); }
.sch-shift-badge.tone-neutral { background: var(--surface-sunk); color: var(--muted); border-left-color: var(--muted); }
.sch-loc-name { font-weight: 400; opacity: 0.8; }
/* Future shifts render as an (shiftBadgeHTML, my-schedule.js) — a direct
"click a date to request a swap" affordance; reset link chrome and add a
focus/hover cue so it still reads as clickable. */
a.sch-shift-badge { text-decoration: none; color: inherit; cursor: pointer; }
a.sch-shift-badge:hover, a.sch-shift-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
/* A planned compensation day off in a month cell (My Schedule, Wish
Submission): the shared COMP mark (base-ui.css), on its own line. */
.sch-comp-day { margin-bottom: 2px; line-height: 1; }
/* ── Shift times in calendar badges (formerly "A1") ────────────────────────── */
.sch-shift-times {
display: block;
font-size: 0.68rem;
color: var(--muted);
margin-top: 1px;
}
/* ── Calendar ─────────────────────────────────────────────────────────────── */
/* A 7-column grid, not a
— components/calendar.js renders header
cells and day cells as plain sibling divs and lets grid auto-placement
wrap every 7 into a row. Two things this buys over the table markup it
replaced:
- `grid-template-columns: repeat(7, 1fr)` keeps all 7 day columns equal-
width regardless of cell content, the same guarantee `table-layout:
fixed` used to give.
- Grid's default `align-items: stretch` makes every cell in a row match
its tallest sibling for free. A table cell's child can't reliably do
this — percentage heights don't resolve against a table cell whose own
height is auto — so a lightly-loaded day used to visibly stop short of
a heavier one in the same week (more wish/shift badges, more avatars).
`gap` replaces the old per-cell `
` padding as the gutter between
cells, now that cells are direct grid children with no wrapper. */
.calendar {
width: 100%;
display: grid;
/* minmax(0, …): equal columns even when a cell holds unbreakable text. */
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
user-select: none;
}
/* A consumer's row above a week (Calendar `renderWeek`): across every column,
its items on the calendar's own columns (My Schedule's leave spans). */
.cal-week-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.cal-th {
padding: var(--space-2) var(--space-1);
font-size: var(--text-sm);
font-weight: 600;
color: var(--muted);
text-align: center;
}
.cal-cell {
min-height: 80px;
padding: var(--space-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: default;
transition: background var(--transition);
position: relative;
}
/* Only cells wired up with onDayClick get role="button" (components/calendar.js)
— a display-only grid (my-schedule.js) stays non-interactive-
looking: no pointer cursor, no hover/focus tint. */
.cal-cell[role="button"] { cursor: pointer; }
.cal-cell[role="button"]:hover { background: var(--hover-tint); }
.cal-cell[role="button"]:focus-visible {
outline: 2px solid var(--primary);
outline-offset: -2px;
background: var(--hover-tint);
}
.cal-cell.other-month { background: var(--surface-sunk); opacity: 0.5; cursor: default; }
.cal-cell.today { border-color: var(--primary); }
.cal-cell.locked { cursor: not-allowed; background: var(--surface-sunk); }
.cal-cell.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--p-200); }
/* Mobile agenda counterpart: an AgendaList row carrying the same "selected
day" class. */
.agenda-row.selected { box-shadow: inset 0 0 0 2px var(--p-200); }
/* Weekend shading — a translucent overlay layer rather than a `background`
rule, so it composites on top of whatever background a cell already has
(heatmap colour, .sc-holiday, plain surface) instead of fighting those
rules for specificity. Matches the neutral-gray weekend wash roster-grid's
.rgv2-row-weekend already established. */
.cal-cell.weekend::after {
content: '';
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .035);
pointer-events: none;
border-radius: inherit;
}
/* Holiday marker (wish-submission.js) — same amber "informational, not a
hard violation" treatment as .conflict-soft. */
.cal-cell.sc-holiday { border-color: var(--warning); }
/* Opt-in birthday marker shared by the wish calendar and roster editor. */
.birthday-badge {
display: flex;
align-items: center;
gap: 4px;
width: fit-content;
max-width: 100%;
margin-top: 3px;
padding: 2px 6px;
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--warning) 14%, var(--surface));
color: var(--text);
font-size: var(--text-2xs);
line-height: 1.25;
}
.birthday-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.birthday-badge svg { flex: 0 0 auto; color: var(--warning); }
/* Standardized month/period navigation bar (components/calendar-nav.js) — the
single prev/next + jump-to-period control every calendar/period-scoped view
mounts, replacing what used to be a different hand-rolled