/*
 * J59 Hub - the shared month calendar.
 *
 * Its own file, not part of hub.css, because three plugins load it: the hub's
 * working calendar, Time Off's agency calendar and Work Back's schedule view.
 * Time Off and Work Back draw their own pages with their own stylesheets and
 * must not be handed the whole hub's CSS to get one component.
 *
 * Linked through j59_hub_calendar_css_url(). Nothing outside the hub should
 * build the path by hand.
 *
 * The colour tokens are spelled out rather than taken from hub.css variables,
 * for the same reason: on a Time Off page those variables do not exist, and a
 * calendar drawn in the browser's default black on white is not the calendar
 * anybody designed.
 */

:root {
	--j59cal-ink: #101114;
	--j59cal-body: #3A3D45;
	--j59cal-muted: #6B7280;
	--j59cal-line: #E3E5E9;
	--j59cal-bg: #F4F5F7;
	--j59cal-white: #FFFFFF;
	--j59cal-radius: 10px;
}

/* -----------------------------------------------------------------------
   THE SHARED MONTH CALENDAR
   Drawn by includes/calendar-view.php and used by the hub's working
   calendar, Time Off and Work Back, so the three are one picture rather
   than three that nearly agree.

   Weeks run Monday to Sunday. That puts Saturday and Sunday together at the
   end of the row, so a statutory holiday beside the weekend reads as a long
   weekend without anybody counting - which is the question people actually
   ask of this calendar, and the one a list of dates cannot answer.
----------------------------------------------------------------------- */

.j59-cal-year {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}

.j59-cal-month {
	background: var(--j59cal-white);
	border: 1px solid var(--j59cal-line);
	border-radius: var(--j59cal-radius);
	padding: 12px 12px 8px;
	min-width: 0;
}

.j59-cal-month-name {
	font-weight: 700;
	font-size: 14px;
	color: var(--j59cal-ink);
	margin: 0 0 8px;
	letter-spacing: 0.01em;
}

/*
 * table-layout: fixed, so every column is a seventh of the month whatever
 * is written in the cells. Without it a day carrying three names makes its
 * column wide and the week stops lining up with the week above it, which is
 * the one thing a calendar has to do.
 */
.j59-cal-grid {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 12px;
}

.j59-cal-grid th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--j59cal-muted);
	font-weight: 700;
	text-align: left;
	padding: 0 0 7px 6px;
}

.j59-cal-grid th.is-weekend { color: #9aa1ad; }

.j59-cal-day {
	border: 1px solid var(--j59cal-line);
	vertical-align: top;
	padding: 5px 6px 6px;
	height: 44px;
	background: var(--j59cal-white);
	overflow: hidden;
}

.j59-cal-date {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--j59cal-body);
	line-height: 1.4;
}

/* The days either side of the month are drawn, because the row is seven
   days, but they are nobody's business this month. */
.j59-cal-day.is-outside { background: #FAFBFC; }
.j59-cal-day.is-outside .j59-cal-date { color: #C3C8D0; }
.j59-cal-day.is-outside .j59-cal-mark { opacity: 0.45; }

.j59-cal-day.is-weekend { background: #F7F8FA; }
.j59-cal-day.is-weekend.is-outside { background: #FAFBFC; }

/*
 * A day the agency does not work, tinted by which kind it is: blue for a
 * statutory holiday, purple for a day this agency decided on. The tint is how
 * a small month says it at all, since there is no room for a word in a column
 * forty pixels wide.
 */
.j59-cal-day.is-closed .j59-cal-date { color: var(--j59cal-ink); }

.j59-cal-day.is-stat-day {
	background: rgba(0, 126, 255, 0.14);
	border-color: rgba(0, 126, 255, 0.40);
}
.j59-cal-day.is-agency-day {
	background: rgba(204, 81, 255, 0.14);
	border-color: rgba(204, 81, 255, 0.40);
}
.j59-cal-day.is-stat-day.is-outside,
.j59-cal-day.is-agency-day.is-outside { opacity: 0.5; }

.j59-cal-day.is-today {
	outline: 2px solid #01C5FF;
	outline-offset: -2px;
}

/*
 * A label is allowed two lines and no more.
 *
 * One line and "Christmas Day" reads "Christ...", which is worse than a blank
 * because it looks like information. Unlimited lines and one busy day makes
 * its row twice the height of the others, and the month stops reading as a
 * grid. Two lines fits every statutory holiday the agency has and a shortened
 * name, and the full text is on the cell's own hover either way.
 */
.j59-cal-mark {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 12px;
	line-height: 1.35;
	margin-top: 3px;
	padding: 2px 6px;
	border-radius: 4px;
	overflow: hidden;
	overflow-wrap: anywhere;
	background: var(--j59cal-bg);
	color: var(--j59cal-body);
}

.j59-cal-mark.is-closed-label {
	background: transparent;
	padding-left: 0;
	font-weight: 700;
	color: var(--j59cal-ink);
}
.j59-cal-day.is-stat-day .j59-cal-mark.is-closed-label { color: #0B4F9E; }
.j59-cal-day.is-agency-day .j59-cal-mark.is-closed-label { color: #6A1FA8; }

/*
 * A small month shows a count, not words. Twelve months across a page gives
 * each column about forty pixels, and anything written in one is an ellipsis.
 * The names are on the cell's title.
 */
.j59-cal-month.is-small .j59-cal-day { height: 30px; padding: 2px 3px 3px; }
.j59-cal-month.is-small .j59-cal-date { font-size: 10px; }
.j59-cal-month.is-small .j59-cal-grid th { font-size: 10px; padding: 0 0 6px 4px; }
.j59-cal-month.is-small .j59-cal-mark { display: none; }

/*
 * Stronger at small size, both the weekend and the tints.
 *
 * Twelve months on a page are read by colour alone, and the question being
 * asked of them is "does that holiday touch the weekend". A shading that is
 * merely present at full size is invisible at a third of it, which loses the
 * one thing this view is for.
 */
.j59-cal-month.is-small .j59-cal-day.is-weekend { background: #ECEFF3; }
.j59-cal-month.is-small .j59-cal-day.is-stat-day { background: rgba(0, 126, 255, 0.26); }
.j59-cal-month.is-small .j59-cal-day.is-agency-day { background: rgba(204, 81, 255, 0.26); }

.j59-cal-count {
	display: inline-block;
	margin-top: 1px;
	min-width: 14px;
	padding: 0 3px;
	border-radius: 7px;
	background: rgba(231, 13, 112, 0.14);
	color: #9C0A4B;
	font-size: 9px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
}
.j59-cal-month.is-large .j59-cal-count { display: none; }

.j59-cal-month.is-large .j59-cal-day { height: 76px; }
.j59-cal-month.is-large .j59-cal-date { font-size: 13px; }
.j59-cal-month.is-large .j59-cal-grid th { font-size: 11px; letter-spacing: 0.05em; }
.j59-cal-month.is-large { padding: 16px 16px 12px; }

/* Somebody away. Deliberately quieter than a closure: one person off is a
   fact about them, a closure is a fact about the agency. */
.j59-cal-mark.is-away {
	background: rgba(231, 13, 112, 0.10);
	color: #9C0A4B;
}

/* A step on a schedule. */
.j59-cal-mark.is-step {
	background: rgba(1, 197, 255, 0.14);
	color: #05527A;
}

/* On the list, switched off: the agency works this day after all. */
.j59-cal-mark.is-muted {
	background: transparent;
	color: var(--j59cal-muted);
	text-decoration: line-through;
	font-weight: 400;
}

.j59-cal-legend-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin: 14px 0 4px;
	font-size: 12px;
	color: var(--j59cal-muted);
}

.j59-cal-key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.j59-cal-swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid var(--j59cal-line);
	display: inline-block;
}

.j59-cal-swatch.is-stat { background: rgba(0, 126, 255, 0.35); }
.j59-cal-swatch.is-agency { background: rgba(204, 81, 255, 0.35); }
.j59-cal-swatch.is-away { background: rgba(231, 13, 112, 0.30); }
.j59-cal-swatch.is-step { background: rgba(1, 197, 255, 0.40); }
.j59-cal-swatch.is-closed { background: rgba(0, 126, 255, 0.25); }
.j59-cal-swatch.is-off { background: transparent; border-style: dashed; }
.j59-cal-swatch.is-weekend { background: #F0F2F5; }

/*
 * On a phone the twelve-month grid becomes one column, and a 44px cell with
 * three names in it is unreadable at that width anyway. The cells grow and
 * the marks are allowed to be smaller.
 */
@media (max-width: 640px) {
	.j59-cal-year { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.j59-cal-month { padding: 8px 8px 6px; }
	.j59-cal-mark { font-size: 9px; }
}

@media (max-width: 420px) {
	.j59-cal-year { grid-template-columns: 1fr; }
}

@media print {
	.j59-cal-year { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.j59-cal-month { break-inside: avoid; box-shadow: none; }
}

/*
 * Somebody who is working, not away.
 *
 * Remote work is booked through Time Off like any other day and sits on the
 * same calendar, but the person is at their desk - which is the opposite of
 * what every other mark on the day means. Leaving that to a colour meant it
 * could be read wrong by anyone, and on this install the remote type had been
 * given a colour close to the vacation one, so it WAS being read wrong.
 *
 * Drawn as an outline rather than a fill, so it reads differently whatever
 * colour the type is given. A category difference should not depend on a
 * setting somebody can change in a colour picker.
 */
.j59-cal-mark.is-working {
	background: transparent;
	border: 1px dashed var(--j59cal-line);
	border-left-width: 3px;
	border-left-style: solid;
	color: var(--j59cal-muted);
	font-style: italic;
}

.j59-cal-swatch.is-working {
	background: transparent;
	border-style: dashed;
	border-left: 3px solid var(--j59cal-muted);
}