/*
 * Vistrela Core front end.
 *
 * Tokens are scoped to .roster-app (and .rg-modal, which mounts on <body>)
 * so the widget sits on any Oxygen page without leaking styles into, or
 * inheriting surprises from, the site theme.
 */

.roster-app,
.rg-modal {
	--r-paper:   #ffffff;
	--r-ground:  #f6f7f5;
	--r-sunk:    #eceee9;
	--r-ink:     #1b2220;
	--r-ink-2:   #4a544f;
	--r-ink-3:   #7c8681;
	--r-rule:    #dde1db;
	--r-accent:  #0d6d5f;
	--r-accent-soft: #e3efec;
	--r-good:    #1f7a45;
	--r-good-bg: #e4f1e7;
	--r-warn:    #8f5d0c;
	--r-warn-bg: #f8eedb;
	--r-crit:    #a8301f;
	--r-crit-bg: #f8e5e1;
	/* Something to attend to rather than something wrong: leave waiting on an
	 * answer is not a warning and must not look like one. */
	--r-info:    #1d5b94;
	--r-info-bg: #e7eff8;
	/* Housekeeping: nothing is wrong, something is unfinished. Its own
	 * colour so it is never mistaken for either of the other two lines. */
	--r-note:    #5f4a86;
	--r-note-bg: #eeeaf6;
	--r-shadow:  0 1px 2px rgba(27,34,32,.07);
}

/*
 * The modal mounts on <body>, outside .roster-app. Custom properties inherit
 * downward only, so it has to carry the tokens and type itself or every
 * var(--r-*) inside it resolves to nothing and the card renders transparent.
 */
.roster-app,
.rg-modal {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--r-ink);
	-webkit-font-smoothing: antialiased;
}

.roster-app { background: var(--r-paper); }

.roster-app *, .roster-app *::before, .roster-app *::after,
.rg-modal *, .rg-modal *::before, .rg-modal *::after { box-sizing: border-box; }

.roster-loading { padding: 40px 16px; color: var(--r-ink-3); text-align: center; }

.roster-notice {
	background: var(--r-warn-bg);
	color: var(--r-warn);
	border-radius: 6px;
	padding: 14px 16px;
	margin: 0;
}
.roster-notice p { margin: 0; }

/* ------------------------------------------------------------- toolbar -- */

.rg-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-block: 4px 14px;
}

.rg-weeknav { display: flex; align-items: center; gap: 6px; }

.rg-weeklabel {
	font: inherit;
	font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 600;
	font-size: 15px;
	min-width: 190px;
	font-variant-numeric: tabular-nums;
	background: none;
	border: none;
	border-radius: 5px;
	padding: 5px 7px;
	margin-left: 2px;
	color: var(--r-ink);
	text-align: left;
	cursor: pointer;
}

.rg-weeklabel:hover { background: var(--r-ground); }
.rg-weeklabel:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 1px; }

.rg-jump {
	font: inherit;
	font-size: 12.5px;
	padding: 5px 8px;
	border: 1px solid var(--r-rule);
	border-radius: 5px;
	background: var(--r-paper);
	color: var(--r-ink-2);
	font-variant-numeric: tabular-nums;
	color-scheme: light;
	cursor: pointer;
}

.rg-jump:hover { color: var(--r-ink); border-color: var(--r-ink-3); }
.rg-jump:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 1px; }

.rg-btn {
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--r-ink-2);
	background: var(--r-paper);
	border: 1px solid var(--r-rule);
	border-radius: 5px;
	padding: 6px 11px;
	cursor: pointer;
	line-height: 1.35;
}
.rg-btn:hover { background: var(--r-ground); color: var(--r-ink); }
.rg-btn:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 1px; }
.rg-btn[disabled] { opacity: .5; cursor: not-allowed; }
.rg-btn--primary { background: var(--r-accent); border-color: var(--r-accent); color: #fff; }
.rg-btn--primary:hover { background: #095a4e; color: #fff; }
.rg-btn--danger { color: var(--r-crit); border-color: #e7c4bd; }
.rg-btn--danger:hover { background: var(--r-crit-bg); }

.rg-select {
	font: inherit;
	font-size: 13px;
	padding: 6px 9px;
	border: 1px solid var(--r-rule);
	border-radius: 5px;
	background: var(--r-paper);
	color: var(--r-ink);
}

.rg-spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------- kpis -- */

.rg-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.rg-kpi {
	background: var(--r-ground);
	border: 1px solid var(--r-rule);
	border-radius: 6px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rg-kpi-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--r-ink-3);
}
.rg-kpi-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rg-kpi-sub { font-size: 11.5px; color: var(--r-ink-3); font-variant-numeric: tabular-nums; }

.rg-kpi.is-on_target { background: var(--r-good-bg); border-color: #c6e0cd; }
.rg-kpi.is-on_target .rg-kpi-value { color: var(--r-good); }
.rg-kpi.is-watch { background: var(--r-warn-bg); border-color: #e8d5ab; }
.rg-kpi.is-watch .rg-kpi-value { color: var(--r-warn); }
.rg-kpi.is-over { background: var(--r-crit-bg); border-color: #e7c4bd; }
.rg-kpi.is-over .rg-kpi-value { color: var(--r-crit); }

/* ---------------------------------------------------------------- grid -- */

.rg-scroll {
	overflow-x: auto;
	border: 1px solid var(--r-rule);
	border-radius: 8px;
	background: var(--r-paper);
}

.rg-grid {
	display: grid;
	grid-template-columns: 110px repeat(7, minmax(110px, 1fr));
	min-width: 880px;
}

.rg-grid > * { border-bottom: 1px solid var(--r-rule); }

.rg-h {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--r-sunk);
	padding: 7px 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--r-ink-2);
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.rg-h-day { font-size: 12.5px; }
.rg-h-date { font-size: 11px; font-weight: 400; color: var(--r-ink-3); font-variant-numeric: tabular-nums; }
.rg-h.is-today { background: var(--r-accent-soft); color: var(--r-accent); }
.rg-h-hol { font-size: 10px; font-weight: 600; color: var(--r-crit); text-transform: uppercase; letter-spacing: .05em; }

.rg-h--name { left: 0; z-index: 4; }

.rg-deptrow {
	grid-column: 1 / -1;
	background: var(--r-ground);
	padding: 5px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--r-ink-2);
	display: flex;
	align-items: center;
	gap: 8px;
	position: sticky;
	left: 0;
}
.rg-deptdot { width: 9px; height: 9px; border-radius: 2px; background: var(--r-ink-3); flex: none; }
.rg-deptmeta { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--r-ink-3); font-variant-numeric: tabular-nums; }

.rg-name {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--r-paper);
	border-right: 1px solid var(--r-rule);
	padding: 7px 8px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	justify-content: center;
}
.rg-name-main { font-weight: 600; font-size: 13px; }
.rg-name-sub { font-size: 11px; color: var(--r-ink-3); font-variant-numeric: tabular-nums; }
.rg-name-sub.is-over { color: var(--r-crit); font-weight: 600; }

.rg-cell {
	border-right: 1px solid var(--r-rule);
	padding: 3px;
	min-height: 48px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	cursor: copy;
	transition: background .12s ease;
}
.rg-cell:hover { background: var(--r-ground); }
.rg-cell.is-drop { background: var(--r-accent-soft); box-shadow: inset 0 0 0 2px var(--r-accent); }
.rg-cell.is-holiday { background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(168,48,31,.05) 7px, rgba(168,48,31,.05) 14px); }
/* A staff member's birthday: light pink, with a cake in the corner. */
.rg-cell.is-birthday { background-color: #fde8ef; }
.rg-cell.is-birthday:hover { background-color: #fbd9e6; }
.rg-bday { align-self: flex-end; font-size: 15px; line-height: 1; }

.rg-chip {
	background: var(--r-accent-soft);
	border-left: 3px solid var(--r-accent);
	border-radius: 4px;
	padding: 3px 5px;
	font-size: 11.5px;
	line-height: 1.35;
	cursor: grab;
	user-select: none;
}
.rg-chip:hover { filter: brightness(.97); }
.rg-chip.is-dragging { opacity: .4; }
.rg-chip-time { font-weight: 600; font-variant-numeric: tabular-nums; display: block; }
.rg-chip-meta { color: var(--r-ink-2); font-size: 10.5px; display: block; }

/* The role's colour: a stripe down the chip's right edge (the left one is the
   shift status) and a dot beside the role name, so the two never compete. */
.rg-chip.has-role { padding-right: 8px; }
.rg-roledot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 4px;
	vertical-align: baseline;
	flex: 0 0 auto;
}
.rg-chip.is-draft { background: var(--r-sunk); border-left-color: var(--r-ink-3); }
.rg-chip.is-published { background: var(--r-good-bg); border-left-color: var(--r-good); }
.rg-chip.is-completed { background: var(--r-ground); border-left-color: var(--r-ink-3); opacity: .8; }
.rg-chip.is-cancelled, .rg-chip.is-no_show { background: var(--r-crit-bg); border-left-color: var(--r-crit); text-decoration: line-through; }
.rg-chip.is-open { background: repeating-linear-gradient(135deg, #fff, #fff 5px, var(--r-sunk) 5px, var(--r-sunk) 10px); border-left-color: var(--r-ink-3); }

/* Clocked on with nothing rostered: flagged for somebody to look at, not
   dressed up as a shift that was planned. */
.rg-chip.is-unrostered {
	background: var(--r-warn-bg, #fdf4e3);
	border-left-color: var(--r-warn, #b8791b);
}
.rg-chip.is-unrostered .rg-chip-time {
	color: var(--r-warn, #b8791b);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 10.5px;
}
.rg-act.is-unrostered {
	background: var(--r-warn-bg, #fdf4e3);
	color: var(--r-warn, #b8791b);
}

/* --------------------------------------------------------------- footer -- */

.rg-foot {
	background: var(--r-ground);
	padding: 6px 7px;
	font-size: 11.5px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	border-right: 1px solid var(--r-rule);
	font-variant-numeric: tabular-nums;
}
.rg-foot--label {
	position: sticky;
	left: 0;
	z-index: 2;
	font-weight: 600;
	color: var(--r-ink-2);
	justify-content: center;
}
.rg-foot-note { font-size: 10.5px; color: var(--r-ink-3); line-height: 1.3; }
.rg-foot-row { display: flex; justify-content: space-between; gap: 6px; color: var(--r-ink-3); }
.rg-foot-row b { color: var(--r-ink); font-weight: 600; }
.rg-pct { font-weight: 700; border-radius: 3px; padding: 0 4px; }
.rg-pct.is-on_target { background: var(--r-good-bg); color: var(--r-good); }
.rg-pct.is-watch { background: var(--r-warn-bg); color: var(--r-warn); }
.rg-pct.is-over { background: var(--r-crit-bg); color: var(--r-crit); }
.rg-pct.is-unknown { color: var(--r-ink-3); }

.rg-salesinput {
	font: inherit;
	font-size: 11.5px;
	width: 100%;
	border: 1px solid var(--r-rule);
	border-radius: 4px;
	padding: 2px 5px;
	background: var(--r-paper);
	color: var(--r-ink);
	font-variant-numeric: tabular-nums;
}
.rg-salesinput:focus { outline: 2px solid var(--r-accent); outline-offset: -1px; }

/* ---------------------------------------------------------------- modal -- */

.rg-modal {
	position: fixed;
	inset: 0;
	background: rgba(20,26,24,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 9999;
}
.rg-modal-card {
	background: #ffffff;
	background: var(--r-paper, #ffffff);
	border-radius: 10px;
	padding: 18px;
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.rg-modal-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.rg-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.rg-field label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--r-ink-3); }
.rg-field input, .rg-field select, .rg-field textarea {
	font: inherit;
	font-size: 13px;
	padding: 7px 9px;
	border: 1px solid var(--r-rule);
	border-radius: 5px;
	background: var(--r-paper);
	color: var(--r-ink);
	width: 100%;
}
.rg-field input:focus, .rg-field select:focus, .rg-field textarea:focus { outline: 2px solid var(--r-accent); outline-offset: -1px; }
.rg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rg-modal-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.rg-modal-actions .rg-spacer { flex: 1 1 auto; }
.rg-modal-note { font-size: 11.5px; color: var(--r-ink-3); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.rg-error { background: var(--r-crit-bg); color: var(--r-crit); border-radius: 5px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 10px; }

/* --------------------------------------------------------------- portal -- */

.rp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.rp-title { font-size: 19px; font-weight: 700; margin: 0; }
.rp-sub { color: var(--r-ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }

.rp-list { display: flex; flex-direction: column; gap: 8px; }

.rp-shift {
	display: grid;
	grid-template-columns: 78px 1fr auto;
	gap: 4px 14px;
	align-items: center;
	border: 1px solid var(--r-rule);
	border-left: 3px solid var(--r-accent);
	border-radius: 7px;
	padding: 11px 14px;
	background: var(--r-paper);
}
.rp-shift.is-holiday { border-left-color: var(--r-crit); }
.rp-date { display: flex; flex-direction: column; }
.rp-dow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--r-ink-3); }
.rp-day { font-size: 19px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rp-mon { font-size: 11px; color: var(--r-ink-3); }
.rp-when { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-where { font-size: 12.5px; color: var(--r-ink-2); }
.rp-notes { font-size: 12px; color: var(--r-ink-3); grid-column: 2 / -1; }
.rp-hours { font-size: 13px; font-weight: 600; color: var(--r-ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.rp-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--r-crit-bg); color: var(--r-crit); margin-left: 6px; }
.rp-tag--night { background: var(--r-sunk); color: var(--r-ink-2); }

.rp-empty { padding: 32px 16px; text-align: center; color: var(--r-ink-3); background: var(--r-ground); border-radius: 8px; }

@media (max-width: 767px) {
	.rg-kpis { grid-template-columns: repeat(2, 1fr); }
	.rg-weeklabel { min-width: 0; }
	.rp-shift { grid-template-columns: 62px 1fr; }
	.rp-hours { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.roster-app * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- print -- */

/* Always rendered, revealed only by roster-print.css. */
.rg-printhead,
.rg-printgrid { display: none; }

/* Food and beverage split under the day's takings. Quieter than the total,
   because the total is still the headline figure. */
.rg-foot-split {
	color: var(--r-ink-3, #6b7472);
	font-size: 10.5px;
}

/* A department's own labour percentage, against whatever takings it earns
   out of - the kitchen is charged against food alone. */
.rg-deptpct {
	color: var(--r-ink-3, #6b7472);
	white-space: nowrap;
}

/* The day's takings, projected above actual. The rule between them is what
   stops six similar figures reading as one list. */
.rg-foot-block {
	display: flex;
	flex-flow: column;
	gap: 1px;
	padding: 3px 0;
}

.rg-foot-block + .rg-foot-block {
	border-top: 1px solid var(--r-line, #e3e6e4);
	margin-top: 2px;
}

/* The line the two above it add up to. */
.rg-foot-tot {
	font-weight: 600;
}

/* What the week costs, shown at the moment of publishing. The headline row
   is the one worth arguing about, so it carries the rule above it. */
.rg-costbox {
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px solid var(--r-line, #e3e6e4);
	border-radius: 8px;
	background: var(--r-tint, #f7f8f8);
	font-size: 13px;
}

.rg-cost-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 3px 0;
}

.rg-cost-row.is-head {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--r-line, #e3e6e4);
	font-size: 14px;
}

.rg-cost-row.is-sub {
	color: var(--r-ink-3, #6b7472);
	font-size: 12px;
	padding-left: 10px;
}

/* A figure the manager should look at twice before sending the roster out. */
.rg-warn {
	color: #8a4b00;
}

/* ------------------------------------------------------------- weather -- */

/* Sits under the takings it helps explain, quieter than the money above it. */
.rg-weather {
	color: var(--r-ink-2);
	font-size: 10.5px;
}
.rg-weather .rg-foot-row { align-items: center; }
.rg-wx-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
.rg-wx-label > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rg-wx-icon {
	font-size: 12px;
	line-height: 1;
	flex: 0 0 auto;
}
.rg-wx-temp {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* A day already gone is a reading, not a guess. */
.rg-weather.is-observed { color: var(--r-ink-3); }
/*
 * Somebody rostered at a business they are not set to work at.
 *
 * The row is shown because the shift exists and its hours are already inside
 * this venue's labour - hiding it would not remove the cost, only the chance
 * of noticing it. But a cross-venue shift is nearly always somebody picking
 * the wrong name, so it is marked rather than left to pass as normal.
 *
 * Amber, not red: it may well be deliberate, and it is the manager's call.
 */
.rg-name-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rg-name-line .rg-name-sub { flex: 0 1 auto; }

.rg-visiting {
	flex: none;
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.5;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--r-warn-bg);
	color: var(--r-warn);
	cursor: help;
	white-space: nowrap;
}

/* A hairline down the sticky name cell, so the row is findable when scrolled
   sideways and the tag itself has gone off screen. */
.rg-name.is-visiting { box-shadow: inset 3px 0 0 var(--r-warn); }

/* ------------------------------------------------------- visa warnings -- */

/*
 * Sits under the toolbar, above the week. Amber for a visa running out, red
 * once one has lapsed - at which point it is not a reminder any more, it is
 * somebody who cannot legally be rostered.
 */

.rg-visa {
	border: 1px solid var(--r-warn);
	border-left-width: 4px;
	background: var(--r-warn-bg);
	color: var(--r-warn);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 14px;
	display: grid;
	gap: 10px;
}

.rg-visa.is-gone {
	border-color: var(--r-crit);
	background: var(--r-crit-bg);
	color: var(--r-crit);
}

.rg-visa-block { display: grid; gap: 4px; }

.rg-visa-head {
	font-size: 13px;
	letter-spacing: .01em;
}

/* Inside a red panel the expired block needs no further shouting; inside an
 * amber one it does, because it is the more serious of the two. */
.rg-visa-block.is-gone .rg-visa-head { text-transform: none; }

.rg-visa-list {
	margin: 0;
	padding: 0 0 0 2px;
	list-style: none;
	display: grid;
	gap: 3px;
	font-size: 12.5px;
}

.rg-visa-list li { line-height: 1.45; }

.rg-visa-note {
	font-size: 11.5px;
	opacity: .85;
}

@media print {
	.rg-visa { display: none; }
}

/* The warning rolls up to its own heading, which stays whatever happens. */

.rg-visa-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
}

.rg-visa-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.rg-visa-arrow {
	font-size: 11px;
	line-height: 1;
	width: 1em;
	flex: 0 0 auto;
}

.rg-visa-count {
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	padding: 3px 8px;
	border-radius: 999px;
	background: currentColor;
	flex: 0 0 auto;
}

/* The number sits on a pill of the panel's own colour, so it reads as a count
 * rather than as another word in the sentence. */
.rg-visa .rg-visa-count { color: var(--r-warn-bg); background: var(--r-warn); }
.rg-visa.is-gone .rg-visa-count { color: var(--r-crit-bg); background: var(--r-crit); }

.rg-visa-body { display: grid; gap: 10px; }

/* ------------------------------------------------- leave awaiting an answer -- */

/*
 * Built like the visa warning and deliberately NOT coloured like it. A lapsed
 * visa is a compliance problem; a leave request is a job on somebody's list,
 * and the two must not read the same at a glance.
 *
 * It rolls up to one line the same way, and starts rolled up, because the
 * dashboard's job is the week.
 */
.rg-leavereq {
	border: 1px solid var(--r-info);
	border-left-width: 4px;
	background: var(--r-info-bg);
	color: var(--r-info);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 14px;
	display: grid;
	gap: 10px;
}

.rg-leavereq-body { display: grid; gap: 4px; }

.rg-leavereq-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 3px;
}

/* Each line is the way in to the request, so it is a button, not a label. */
.rg-leavereq-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.45;
	text-align: left;
	color: inherit;
	background: none;
	border: none;
	border-radius: 4px;
	padding: 3px 6px;
	margin: 0 -6px;
	cursor: pointer;
}

.rg-leavereq-row:hover { background: rgba(255,255,255,.65); }
.rg-leavereq-row:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.rg-leavereq-why { opacity: .8; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-leavereq-note { font-size: 11.5px; opacity: .85; }

@media print {
	.rg-leavereq { display: none; }
}

/* The roll-up chrome is the visa panel's, reused rather than restyled. */
.rg-leavereq .rg-visa-count { color: var(--r-info-bg); background: var(--r-info); }

/* Their words, in full, on top of everything. */
.rg-reason {
	white-space: pre-wrap;
	font-size: 14px;
	line-height: 1.5;
	background: var(--r-ground);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0;
	min-height: 56px;
}

/* ------------------------------------------------------- the staff portal -- */

/*
 * The leave half of the portal. Built to be used on a phone standing in a
 * corridor, which is where a request for leave actually gets typed: one
 * column, big targets, nothing that needs a mouse.
 */
.rp-leave { margin-top: 28px; }

.rp-leave-block { margin-bottom: 20px; }

.rp-leave-head {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--r-ink-2);
}

.rp-leave-list { display: grid; gap: 6px; }

.rp-leave-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 11px 13px;
	border-radius: 8px;
	border: 1px solid var(--r-rule);
	border-left-width: 4px;
	background: var(--r-paper);
	font-size: 13.5px;
}

/* The state is the whole reason somebody opens this, so it is in the border
 * colour before it is in the words. */
.rp-leave-row.is-pending { border-left-color: var(--r-info); background: var(--r-info-bg); }
.rp-leave-row.is-approved { border-left-color: var(--r-good); background: var(--r-good-bg); }
.rp-leave-row.is-declined { border-left-color: var(--r-crit); background: var(--r-crit-bg); }
.rp-leave-row.is-cancelled { border-left-color: var(--r-ink-3); }

.rp-leave-tagline { flex: 1 1 200px; min-width: 0; }
.rp-leave-state { font-size: 12px; opacity: .85; flex: 1 1 auto; }

.rp-leave-form { display: grid; gap: 12px; }

.rp-leave-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.rp-field { display: grid; gap: 4px; }

.rp-field > span {
	font-size: 12px;
	font-weight: 600;
	color: var(--r-ink-2);
}

.rp-input {
	width: 100%;
	font: inherit;
	/* 16px or iOS zooms the page in the moment the field is tapped. */
	font-size: 16px;
	color: var(--r-ink);
	background: var(--r-paper);
	border: 1px solid var(--r-rule);
	border-radius: 8px;
	padding: 10px 12px;
}

.rp-input:focus { outline: 2px solid var(--r-accent); outline-offset: 1px; }
.rp-textarea { resize: vertical; min-height: 84px; line-height: 1.45; }

.rp-leave-actions { display: flex; justify-content: flex-end; }

.rp-btn {
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--r-ink);
	background: var(--r-paper);
	border: 1px solid var(--r-rule);
	border-radius: 8px;
	padding: 10px 16px;
	cursor: pointer;
}

.rp-btn:hover { background: var(--r-ground); }
.rp-btn:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }

.rp-btn--primary {
	color: #fff;
	background: var(--r-accent);
	border-color: var(--r-accent);
}

.rp-btn--primary:hover { background: #0a584c; }
.rp-btn--primary[disabled] { opacity: .6; cursor: default; }

.rp-btn--quiet { font-size: 12.5px; padding: 6px 12px; }

.rp-error {
	background: var(--r-crit-bg);
	color: var(--r-crit);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
}

/* The venue on a staff member's own shift. Carries the weight because for
 * somebody who works both sites it is the fact that decides where they go. */
.rp-site { font-weight: 700; color: var(--r-accent); }

/* --------------------------------------------- staff and tills to match -- */

/*
 * Built like the visa warning and the leave line, and deliberately a third
 * colour. A lapsed visa is a compliance problem and a leave request is
 * somebody waiting on an answer; this is neither. It is work landing on
 * nobody, and it can wait until Tuesday.
 */
.rg-till {
	border: 1px solid var(--r-note);
	border-left-width: 4px;
	background: var(--r-note-bg);
	color: var(--r-note);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 14px;
	display: grid;
	gap: 10px;
}

.rg-till .rg-visa-count { color: var(--r-note-bg); background: var(--r-note); }

.rg-till-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	border-bottom-color: rgba(95, 74, 134, .35);
}

.rg-till-link:hover { border-bottom-color: currentColor; }

@media print {
	.rg-till { display: none; }
}

/* ------------------------------------------------- the food control plan -- */

/*
 * A fifth colour, and the only one of the roll-ups that changes colour with
 * its contents. The others describe a date approaching; this one can be
 * describing a fridge that is nine degrees while the page is open, and that is
 * not the same kind of news as a service being due next month.
 *
 * Amber by default - something needs doing. Red (is-gone, the same modifier
 * the visa panel uses for an expired one) the moment a breach or a dead sensor
 * is in it, because then food is at risk right now.
 */
.rg-food {
	border: 1px solid var(--r-warn);
	border-left-width: 4px;
	background: var(--r-warn-bg);
	color: var(--r-warn);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 14px;
	display: grid;
	gap: 10px;
}

.rg-food .rg-visa-count { color: var(--r-warn-bg); background: var(--r-warn); }

.rg-food.is-gone {
	border-color: var(--r-crit);
	background: var(--r-crit-bg);
	color: var(--r-crit);
}

.rg-food.is-gone .rg-visa-count { color: var(--r-crit-bg); background: var(--r-crit); }

.rg-food .rg-till-link { border-bottom-color: rgba(143, 93, 12, .35); }
.rg-food.is-gone .rg-till-link { border-bottom-color: rgba(168, 48, 31, .35); }

@media print {
	.rg-food { display: none; }
}

/* ------------------------------------------------------ liquor licence -- */

.rg-visa.has-licence { border-color: var(--r-crit); }
.rg-visa.has-licence .rg-visa-toggle { color: var(--r-crit); }
.rg-licence-head { font-weight: 700; }
.rg-licence { margin: 0 0 14px; padding: 12px 14px; border: 2px solid var(--r-crit); border-radius: 6px; background: var(--r-paper); }
.rg-licence-title { display: block; margin-bottom: 6px; font-size: 15px; color: var(--r-crit); }
.rg-licence-list { margin: 0 0 8px; padding: 0; list-style: none; }
.rg-licence-list li { padding: 6px 0; border-bottom: 1px solid var(--r-rule); font-size: 14px; line-height: 1.45; }
.rg-licence-list li:last-child { border-bottom: 0; }
.rg-licence-list li strong { margin-right: 8px; }
.rg-licence-list li.is-expired, .rg-licence-list li.is-late { color: var(--r-crit); font-weight: 600; }
.rg-licence-note { display: block; font-size: 12px; color: #5d6a66; }

/* Stadium events (Roster_Events), 2026-09-26. */
.rg-h.has-event { box-shadow: inset 0 3px 0 var(--r-note, #6b4fbb); }
.rg-h-event { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--r-note, #6b4fbb); white-space: normal; overflow-wrap: anywhere; }
@media print { .rg-h-event { color: #000; } }

.rg-h-event-link { display: block; color: inherit; text-decoration: none; }
.rg-h-event-link + .rg-h-event-link { margin-top: 2px; }
.rg-h-event-link:hover, .rg-h-event-link:focus-visible { text-decoration: underline; }
/* Eventfinda's smaller events nearby: lighter than the big venues. */
.rg-h-event-link.is-nearby { font-weight: 500; color: var(--r-ink-2); }
.rg-h-event-more { display: block; margin-top: 2px; font-weight: 500; color: var(--r-ink-3); }

/* Weather in the day heading, under the events (2026-09-26). */
.rg-h-wx { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--r-ink-2); white-space: nowrap; }
.rg-h-wx.is-observed { color: var(--r-ink-3); }

/* Beyond a week: an outlook, shown faded with a ~ (2026-09-26). */
.rg-h-wx.is-outlook > span:last-child { opacity: .55; font-style: italic; }
.rg-h-wx.is-outlook .rg-wx-icon { opacity: .8; }

/* Bolder weather icons in the day heading (2026-09-26): at 12px the emoji read pale. */
.rg-h-wx { display: flex; align-items: center; gap: 4px; }
.rg-h-wx .rg-wx-icon { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-size: 18px; line-height: 1; filter: saturate(1.5) contrast(1.15); }
@media print { .rg-h-wx .rg-wx-icon { font-size: 14px; } }

/* Rostered before signing (2026-09-27): red, it is urgent. */
.rg-leavereq.rg-trial { border-color: var(--r-crit); border-left-color: var(--r-crit); background: var(--r-crit-bg, #fbeaea); }
.rg-trial .rg-visa-toggle, .rg-trial .rg-visa-count { color: var(--r-crit); }
.rg-trial .rg-visa-count { background: var(--r-crit); color: #fff; }

/* Business and department pills on the roster (2026-09-27). */
.rg-pillrow { order: 99; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.rg-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rg-pills-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--r-ink-3); margin-right: 2px; }
.rg-pill { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border: 1px solid var(--r-rule); border-radius: 999px; background: var(--r-paper); color: var(--r-ink-2); cursor: pointer; }
.rg-pill:hover { border-color: var(--r-accent); color: var(--r-accent); }
.rg-pill.is-on { background: var(--r-accent); border-color: var(--r-accent); color: #fff; font-weight: 600; }
.rg-pill:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }
.rg-pill-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
@media print { .rg-pillrow { display: none; } }

/* One line for the week controls and buttons (2026-09-27). */
.rg-toolbar-top { flex-basis: 100%; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.rg-toolbar-top > .rg-weeknav { flex: 0 1 auto; min-width: 0; }
.rg-toolbar-top > .rg-weeknav > * { flex: none; }
.rg-toolbar-top > .rg-weeknav > input[type=date] { flex: 0 1 150px; min-width: 34px; }
.rg-toolbar-top > .rg-spacer { min-width: 0; }
.rg-toolbar-top > .rg-btn { flex: none; white-space: nowrap; }
@media (max-width: 1000px) { .rg-toolbar-top { flex-wrap: wrap; } }

/* The Print dialog's choices. */
.rg-printopts { display: flex; flex-direction: column; gap: 9px; margin: 10px 0 4px; }
.rg-printopt { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.rg-printopt input { width: 16px; height: 16px; margin: 0; accent-color: var(--r-accent); }
.rg-printopt:first-child { font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--r-rule); }

/* ---- Staff portal: messages and how we contact you (roster-portal-contact.js) ---- */
.rp-contact { margin-top: 28px; }
.rp-inbox { display: flex; flex-direction: column; gap: 8px; }
.rp-msg { border: 1px solid #dde1db; border-radius: 8px; padding: 10px 12px; background: #fff; }
.rp-msg.is-unread { border-color: #0d6d5f; box-shadow: inset 3px 0 0 #0d6d5f; }
.rp-msg-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.rp-msg-when { font-size: 12.5px; color: #7c8681; white-space: nowrap; }
.rp-msg-body { margin-top: 4px; white-space: pre-line; color: #4a544f; font-size: 14px; }
.rp-contact-form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.rp-contact-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.rp-contact-row input { margin-top: 4px; width: 18px; height: 18px; }
.rp-contact-row > span { display: flex; flex-direction: column; }
.rp-contact-detail { font-size: 13px; color: #7c8681; }
.rp-contact-hint { font-size: 13.5px; color: #4a544f; margin: 6px 0; }
.rp-contact-ok { font-size: 13.5px; color: #0d6d5f; margin: 6px 0; }
.rp-contact-phone { margin-top: 10px; }

/* Rostered under contracted hours (roster-grid.js shortLine). */
.rg-name-sub.rg-name-short { display: block; color: var(--r-warn, #a15c00); font-weight: 600; }