/*
 * Booking calendar styling. Depends on hsi-portal-shell.css for design
 * tokens (see wp_register_style() deps in class-hsi-portal-calendar-render.php)
 * — every stage color below references the shared --hsi-stage-{key}-bg/-fg
 * tokens instead of a hardcoded hex, so the legend and the pills can never
 * drift out of sync.
 */

.hsi-calendar {
	max-width: var(--hsi-shell-max);
}

/* View toggle — segmented control. */
.hsi-calendar__view-toggle {
	display: inline-flex;
	border: 1px solid var(--hsi-blue);
	border-radius: var(--hsi-radius);
	overflow: hidden;
	margin-bottom: var(--hsi-space-4);
}

.hsi-calendar__view-toggle-btn {
	padding: var(--hsi-space-2) var(--hsi-space-4);
	text-decoration: none;
	color: var(--hsi-navy);
	font-weight: 600;
	font-size: 0.9em;
}

.hsi-calendar__view-toggle-btn + .hsi-calendar__view-toggle-btn {
	border-left: 1px solid var(--hsi-blue);
}

.hsi-calendar__view-toggle-btn.is-active {
	background: var(--hsi-navy);
	color: var(--hsi-white);
}

.hsi-calendar__grid-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--hsi-space-3);
}

.hsi-calendar__grid-nav h4 {
	margin: 0;
}

.hsi-calendar__grid-nav a {
	text-decoration: none;
	font-weight: 600;
	color: var(--hsi-blue);
}

.hsi-calendar__month-grid {
	border: 1px solid var(--hsi-neutral-tint);
	border-radius: var(--hsi-radius);
	overflow: hidden;
}

.hsi-calendar__weekday-row,
.hsi-calendar__week-row {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
}

.hsi-calendar__weekday {
	padding: var(--hsi-space-2);
	text-align: center;
	font-size: 0.8em;
	font-weight: 600;
	background: var(--hsi-neutral-tint);
	border-bottom: 1px solid #dde1e6;
}

/* Bug fix (item 1b): .hsi-calendar__week-row is a CSS grid
   (grid-template-columns: repeat(7, 1fr)), and .hsi-calendar__day-cell is
   its grid item. Grid items default to min-width: auto, which means a
   cell's track can never shrink below its CONTENT's intrinsic minimum
   width — an entry pill's unbreakable content (e.g. .hsi-calendar__entry-label,
   which is nowrap by design for its ellipsis truncation) was pushing that
   one min-width past its 1fr share, so the grid gave that column the extra
   space it demanded and every other column in the row shrank to compensate
   (the classic CSS Grid "blowout" bug). min-width: 0 overrides that default,
   letting the cell shrink to its 1fr share regardless of content, so the
   ellipsis truncation inside actually gets to do its job instead of forcing
   the column wider. box-sizing: border-box reinforces that the cell's
   declared width includes its padding/border, not just content. */
.hsi-calendar__day-cell {
	min-height: 110px;
	min-width: 0;
	box-sizing: border-box;
	border-right: 1px solid var(--hsi-neutral-tint);
	border-bottom: 1px solid var(--hsi-neutral-tint);
	padding: var(--hsi-space-1) var(--hsi-space-2);
	vertical-align: top;
	overflow: visible;
}

.hsi-calendar__day-cell--outside {
	background: #fafbfc;
}

.hsi-calendar__day-number {
	font-size: 0.8em;
	font-weight: 600;
	color: #666;
	margin-bottom: var(--hsi-space-1);
}

/* Bug fix (item 1a): no width was set, so with no explicit sizing this flex
   column could end up shrink-wrapped to its content instead of filling the
   day cell — entries then squished to the right instead of spanning the row. */
.hsi-calendar__day-entries {
	display: flex;
	flex-direction: column;
	gap: var(--hsi-space-1);
	width: 100%;
}

.hsi-calendar__more-link {
	font-size: 0.75em;
	font-weight: 600;
	color: var(--hsi-blue);
	text-decoration: none;
	padding: 2px 0;
}

.hsi-calendar__more-link:hover {
	text-decoration: underline;
}

@media (max-width: 720px) {
	.hsi-calendar__month-grid {
		overflow-x: auto;
		display: block;
	}

	.hsi-calendar__weekday-row,
	.hsi-calendar__week-row {
		min-width: 560px;
	}
}

.hsi-calendar__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--hsi-space-3);
	margin-bottom: var(--hsi-space-6);
	padding-bottom: var(--hsi-space-4);
	border-bottom: 1px solid var(--hsi-neutral-tint);
}

.hsi-calendar__filter {
	display: flex;
	flex-direction: column;
	gap: var(--hsi-space-1);
}

.hsi-calendar__filter label {
	font-size: 0.85em;
	font-weight: 600;
}

.hsi-calendar__filters button {
	padding: 10px 18px;
	border-radius: var(--hsi-radius);
	border: 1px solid var(--hsi-navy);
	background: var(--hsi-navy);
	color: var(--hsi-white);
	font-weight: 600;
	cursor: pointer;
}

.hsi-calendar__filters button:hover {
	background: #10126b;
	border-color: #10126b;
}

.hsi-calendar__filters a.hsi-calendar__clear {
	padding: 10px 18px;
	border-radius: var(--hsi-radius);
	border: 1px solid var(--hsi-blue);
	background: var(--hsi-blue-tint);
	color: var(--hsi-navy);
	font-weight: 600;
	text-decoration: none;
}

.hsi-calendar__day-heading {
	margin: var(--hsi-space-6) 0 var(--hsi-space-2);
	padding-bottom: var(--hsi-space-1);
	border-bottom: 1px solid var(--hsi-neutral-tint);
}

.hsi-calendar__entries {
	/* Client-specified (2026-09-09): list view was smushed to the side. */
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--hsi-space-2);
}

/* Entry pill — colored entirely via the modifier class below (matching
   the order's color_key), no inline style. Whole pill is the click/keyboard
   trigger for the detail modal (see hsi-portal-calendar.js). */
.hsi-calendar__entry {
	position: relative;
	border-radius: var(--hsi-radius);
	padding: 6px 8px;
	cursor: pointer;
}

.hsi-calendar__entry:focus-visible {
	outline: 2px solid var(--hsi-blue);
	outline-offset: 2px;
}

.hsi-calendar__entry-header {
	display: flex;
	align-items: center;
	gap: 0.35em;
}

.hsi-calendar__entry-indicators {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	flex: none;
}

.hsi-calendar__entry-label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
	font-size: 0.85em;
}

.hsi-calendar__entry-icons {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	flex: none;
}

.hsi-calendar__icon {
	display: inline-flex;
	color: currentColor;
}

.hsi-calendar__icon.is-off {
	opacity: 0.35;
}

/* currentColor, not --hsi-red: this glyph only ever renders on the
   needs_reschedule pill, whose background already IS --hsi-red — a
   hardcoded red glyph would vanish against it. */
.hsi-calendar__urgent-glyph {
	display: inline-flex;
	color: currentColor;
}

.hsi-calendar__badge {
	font-size: 0.7em;
	padding: 1px 6px;
	border-radius: 3px;
	font-weight: 700;
	flex: none;
}

.hsi-calendar__badge--cancelled {
	background: rgba(0, 0, 0, 0.12);
	color: inherit;
}

.hsi-calendar__entry-sub {
	font-size: 0.85em;
}

/* Hidden by default — only surfaced inside the detail modal via JS (see
   hsi-portal-calendar.js). No hover popover: touch devices can't hover, so
   click/Enter-to-modal is the one interaction that always works. */
.hsi-calendar__entry-detail {
	display: none;
}

.hsi-calendar__entry-actions {
	margin-top: 2px;
	font-size: 0.72em;
}

.hsi-calendar__entry-actions a {
	color: inherit;
	opacity: 0.85;
	text-decoration: underline;
}

/* Stage color modifiers — background/foreground pair per
   HSI_Portal_Calendar_Fields::color_key_for_order(). fg cascades to text,
   badges, icons, and links inside the pill via currentColor/inherit. */
.hsi-calendar__entry--deposit_received { background: var(--hsi-stage-deposit_received-bg); color: var(--hsi-stage-deposit_received-fg); }
.hsi-calendar__entry--class_scheduled { background: var(--hsi-stage-class_scheduled-bg); color: var(--hsi-stage-class_scheduled-fg); }
.hsi-calendar__entry--needs_reschedule { background: var(--hsi-stage-needs_reschedule-bg); color: var(--hsi-stage-needs_reschedule-fg); }
.hsi-calendar__entry--class_completed { background: var(--hsi-stage-class_completed-bg); color: var(--hsi-stage-class_completed-fg); }
.hsi-calendar__entry--balance_paid_in_full { background: var(--hsi-stage-balance_paid_in_full-bg); color: var(--hsi-stage-balance_paid_in_full-fg); }
.hsi-calendar__entry--certifications_issued { background: var(--hsi-stage-certifications_issued-bg); color: var(--hsi-stage-certifications_issued-fg); }
.hsi-calendar__entry--cancelled,
.hsi-calendar__entry--lost { background: var(--hsi-stage-cancelled-bg); color: var(--hsi-stage-cancelled-fg); }
.hsi-calendar__entry--new_inquiry { background: var(--hsi-stage-new_inquiry-bg); color: var(--hsi-stage-new_inquiry-fg); }
.hsi-calendar__entry--quote_provided { background: var(--hsi-stage-quote_provided-bg); color: var(--hsi-stage-quote_provided-fg); }

/* Cancelled/lost — faded + line-through label, badge stays legible. */
.hsi-calendar__entry--cancelled,
.hsi-calendar__entry--lost {
	opacity: 0.75;
}

.hsi-calendar__entry--cancelled .hsi-calendar__entry-label,
.hsi-calendar__entry--lost .hsi-calendar__entry-label {
	text-decoration: line-through;
}

.hsi-calendar__legend {
	margin-top: var(--hsi-space-8);
	padding-top: var(--hsi-space-4);
	border-top: 1px solid var(--hsi-neutral-tint);
}

.hsi-calendar__legend-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--hsi-space-3) var(--hsi-space-6);
}

.hsi-calendar__legend-list li {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9em;
}

.hsi-calendar__legend-dot {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
}

.hsi-calendar__legend-dot--deposit_received { background: var(--hsi-stage-deposit_received-bg); }
.hsi-calendar__legend-dot--class_scheduled { background: var(--hsi-stage-class_scheduled-bg); }
.hsi-calendar__legend-dot--needs_reschedule { background: var(--hsi-stage-needs_reschedule-bg); }
.hsi-calendar__legend-dot--class_completed { background: var(--hsi-stage-class_completed-bg); }
.hsi-calendar__legend-dot--balance_paid_in_full { background: var(--hsi-stage-balance_paid_in_full-bg); }
.hsi-calendar__legend-dot--certifications_issued { background: var(--hsi-stage-certifications_issued-bg); }
.hsi-calendar__legend-dot--cancelled { background: var(--hsi-stage-cancelled-bg); }

.hsi-calendar__legend-note {
	margin-top: var(--hsi-space-3);
	font-size: 0.85em;
	color: #555;
	display: flex;
	align-items: center;
	gap: 0.3em;
	flex-wrap: wrap;
}

.hsi-calendar__legend-note .hsi-calendar__icon {
	color: var(--hsi-charcoal);
}

/* Centered detail modal — extended notes modal (booking detail + Sales
   Notes + navy "Update this order" button). Focus-trapped + ESC/overlay
   click to close (see hsi-portal-calendar.js). */
.hsi-calendar__notes-modal {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: var(--hsi-space-4);
}

.hsi-calendar__notes-modal-content {
	position: relative;
	background: var(--hsi-white);
	border-radius: var(--hsi-radius-lg);
	padding: var(--hsi-space-6);
	max-width: 800px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
}

.hsi-calendar__notes-modal-content #hsi-calendar-modal-title {
    margin-top:40px;
}

@media (max-width: 480px) {
	.hsi-calendar__notes-modal-content {
		max-width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}
}

.hsi-calendar__notes-modal-close {
	position: absolute;
	top: var(--hsi-space-2);
	right: var(--hsi-space-3);
	background: none;
	border: 0;
	font-size: 1.5em;
	cursor: pointer;
	line-height: 1;
	color: var(--hsi-charcoal);
}

[data-hsi-calendar-modal-detail] p {
	margin: 0.3em 0;
	font-size: 0.92em;
}

.hsi-calendar__notes-section {
	margin: var(--hsi-space-4) 0;
	padding-bottom: var(--hsi-space-3);
	border-bottom: 1px solid var(--hsi-neutral-tint);
}

.hsi-calendar__notes-section:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.hsi-calendar__notes-section h5 {
	margin: 0 0 var(--hsi-space-1);
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
}

.hsi-calendar__notes-log {
	max-height: 180px;
	overflow-y: auto;
	padding: var(--hsi-space-2) var(--hsi-space-3);
	background: var(--hsi-neutral-tint);
	border: 1px solid #dde1e6;
	border-radius: var(--hsi-radius);
	font-size: 0.9em;
	white-space: pre-wrap;
}

.hsi-calendar__note {
	padding: var(--hsi-space-2) 0;
	border-bottom: 1px solid var(--hsi-neutral-tint);
}

.hsi-calendar__note-meta {
	font-size: 0.8em;
	color: #777;
	margin: 0 0 0.2em;
}

.hsi-calendar__note-error {
	color: var(--hsi-red);
}

.hsi-calendar__update-link {
	display: block;
	text-align: center;
	margin-top: var(--hsi-space-4);
}