/**
 * Calendar views (month / week / day) — dependency-free engine (calendar.js).
 * Week view is styled after the Ronas-IT reference: oversized day numbers,
 * hour lanes, colored event blocks, and a live now-line.
 */

.mlhe-cal { background: var(--mlhe-surface); border-radius: var(--mlhe-radius); padding: 8px; box-shadow: var(--mlhe-shadow); }

/* Theme-proof reset: neutralize any global theme <button> styling that leaks in
   (backgrounds, padding, ::after wipes, uppercase). Scoped under .mlhe so it
   out-specifies most theme rules. */
.mlhe .mlhe-cal__nav button,
.mlhe .mlhe-cal__today,
.mlhe .mlhe-cal__views button {
	-webkit-appearance: none; appearance: none;
	text-transform: none; letter-spacing: normal; min-height: 0;
	margin: 0; text-decoration: none;
}
.mlhe .mlhe-cal__nav button::after,
.mlhe .mlhe-cal__nav button::before,
.mlhe .mlhe-cal__today::after,
.mlhe .mlhe-cal__today::before,
.mlhe .mlhe-cal__views button::after,
.mlhe .mlhe-cal__views button::before { content: none; display: none; }

/* Toolbar ------------------------------------------------------------- */
.mlhe-cal__bar {
	display: flex; align-items: center; gap: 16px;
	padding: 16px 18px;
	flex-wrap: wrap;
}
.mlhe-cal__title {
	font-family: var(--mlhe-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--mlhe-ink);
	letter-spacing: -0.01em;
}
.mlhe-cal__title small { color: var(--mlhe-muted); font-weight: 600; }
.mlhe-cal__nav { display: inline-flex; gap: 6px; }
.mlhe .mlhe-cal__nav button {
	width: 40px; height: 40px; padding: 0;
	border-radius: 50%;
	border: 1.5px solid var(--mlhe-line);
	background: transparent; color: var(--mlhe-ink);
	cursor: pointer; font-size: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	transition: all 0.25s var(--mlhe-ease);
}
.mlhe .mlhe-cal__nav button:hover { background: var(--mlhe-ink); color: var(--mlhe-surface); border-color: var(--mlhe-ink); }
.mlhe .mlhe-cal__today {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 1.2em; height: 40px; line-height: 1; border-radius: var(--mlhe-radius-pill);
	border: 1.5px solid var(--mlhe-line); background: transparent; color: var(--mlhe-ink);
	font-family: var(--mlhe-font-head); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.mlhe .mlhe-cal__today:hover { background: var(--mlhe-ink); border-color: var(--mlhe-ink); color: var(--mlhe-surface); }
.mlhe-cal__views { margin-left: auto; display: inline-flex; gap: 2px; background: var(--mlhe-surface-2); border-radius: var(--mlhe-radius-pill); padding: 4px; }
.mlhe .mlhe-cal__views button {
	border: 0; background: transparent; cursor: pointer;
	padding: 0.5em 1.1em; height: auto; border-radius: var(--mlhe-radius-pill);
	font-family: var(--mlhe-font-head); font-weight: 600; font-size: 0.82rem; color: var(--mlhe-muted);
}
.mlhe .mlhe-cal__views button.is-active { background: var(--mlhe-surface); color: var(--mlhe-ink); box-shadow: 0 4px 12px -8px rgba(0,0,0,0.4); }

/* Month --------------------------------------------------------------- */
.mlhe-month { padding: 0 8px 8px; }
.mlhe-month__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mlhe-month__dow span {
	text-align: left; padding: 6px 12px;
	font-family: var(--mlhe-font-head); font-weight: 700;
	font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--mlhe-muted);
}
.mlhe-month__grid {
	display: grid;
	/* minmax(0,1fr) keeps all 7 columns equal even when a cell holds a long,
	   non-wrapping event title (which would otherwise stretch its column). */
	grid-template-columns: repeat(7, minmax(0, 1fr));
	border-top: 1px solid var(--mlhe-line);
	border-left: 1px solid var(--mlhe-line);
	border-radius: var(--mlhe-radius-sm);
	overflow: hidden;
}
.mlhe-day {
	min-height: 118px;
	min-width: 0; /* allow the track to stay 1/7 and let chips ellipsize */
	border-right: 1px solid var(--mlhe-line);
	border-bottom: 1px solid var(--mlhe-line);
	padding: 8px;
	display: flex; flex-direction: column; gap: 5px;
	position: relative;
}
.mlhe-day--out { background: color-mix(in srgb, var(--mlhe-ink) 3%, transparent); }
.mlhe-day--out .mlhe-day__num { color: var(--mlhe-muted); }
.mlhe-day__num {
	font-family: var(--mlhe-font-head); font-weight: 700; font-size: 0.95rem;
	color: var(--mlhe-ink); align-self: flex-start;
	width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.mlhe-day--today .mlhe-day__num { background: var(--mlhe-accent); color: var(--mlhe-accent-ink); }
.mlhe-chip {
	display: flex; align-items: center; gap: 6px;
	padding: 4px 7px; border-radius: 7px; cursor: pointer;
	font-size: 0.76rem; font-weight: 600; color: var(--mlhe-ink);
	background: color-mix(in srgb, var(--mlhe-chip, var(--mlhe-accent)) 16%, var(--mlhe-surface));
	border-left: 3px solid var(--mlhe-chip, var(--mlhe-accent));
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	max-width: 100%; min-width: 0;
	transition: transform 0.2s var(--mlhe-ease);
}
.mlhe-chip__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mlhe-chip__time { flex: none; }
.mlhe-chip:hover { transform: translateX(2px); }
.mlhe-chip__time { color: var(--mlhe-muted); font-variant-numeric: tabular-nums; }
.mlhe-day__more { font-size: 0.72rem; font-weight: 700; color: var(--mlhe-accent); cursor: pointer; padding-left: 2px; }

/* Week / Day time grid (Ronas-inspired) ------------------------------- */
.mlhe-week { padding: 0 8px 12px; }
.mlhe-week__head {
	display: grid;
	grid-template-columns: 56px repeat(var(--mlhe-week-cols, 7), 1fr);
	position: sticky; top: 0; z-index: 3; background: var(--mlhe-surface);
	padding-bottom: 10px;
}
.mlhe-week__head .mlhe-week__gutter { grid-column: 1; }
.mlhe-wday { text-align: center; padding: 6px 4px; }
.mlhe-wday__dow { font-family: var(--mlhe-font-head); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mlhe-muted); }
.mlhe-wday__num {
	font-family: var(--mlhe-font-head); font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; color: var(--mlhe-muted);
	font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mlhe-wday--today .mlhe-wday__num { color: var(--mlhe-ink); }
.mlhe-wday--today .mlhe-wday__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e5533d; margin-top: 3px; }

.mlhe-week__body {
	display: grid;
	grid-template-columns: 56px repeat(var(--mlhe-week-cols, 7), 1fr);
	position: relative;
	border-top: 1px solid var(--mlhe-line);
}
.mlhe-week__times { grid-column: 1; }
.mlhe-week__times .t {
	height: var(--mlhe-hour-h, 60px);
	font-size: 0.68rem; color: var(--mlhe-muted); font-weight: 600;
	text-align: right; padding-right: 8px; transform: translateY(-6px);
	font-variant-numeric: tabular-nums;
}
.mlhe-wcol { position: relative; border-left: 1px solid var(--mlhe-line); }
.mlhe-wcol .hr { height: var(--mlhe-hour-h, 60px); border-bottom: 1px solid color-mix(in srgb, var(--mlhe-line) 60%, transparent); }
.mlhe-wevent {
	position: absolute; left: 4px; right: 4px;
	border-radius: 9px; padding: 7px 9px; overflow: hidden; cursor: pointer;
	background: color-mix(in srgb, var(--mlhe-chip, var(--mlhe-accent)) 20%, var(--mlhe-surface));
	border-left: 3px solid var(--mlhe-chip, var(--mlhe-accent));
	transition: transform 0.2s var(--mlhe-ease), box-shadow 0.2s var(--mlhe-ease);
}
.mlhe-wevent:hover { transform: translateY(-1px); box-shadow: var(--mlhe-shadow-lg); z-index: 5; }
.mlhe-wevent__time { font-size: 0.68rem; font-weight: 600; color: var(--mlhe-muted); font-variant-numeric: tabular-nums; }
.mlhe-wevent__title { font-family: var(--mlhe-font-head); font-weight: 600; font-size: 0.86rem; color: var(--mlhe-ink); line-height: 1.15; margin-top: 2px; }
.mlhe-now {
	position: absolute; left: 56px; right: 0; height: 0;
	border-top: 2px solid #e5533d; z-index: 4; pointer-events: none;
}
.mlhe-now::before {
	content: attr(data-time);
	position: absolute; left: -52px; top: -9px;
	background: #e5533d; color: #fff;
	font-size: 0.62rem; font-weight: 700; padding: 2px 5px; border-radius: 4px;
	font-variant-numeric: tabular-nums;
}
.mlhe-allday {
	grid-column: 2 / -1;
	display: grid; grid-template-columns: repeat(var(--mlhe-week-cols, 7), 1fr);
	gap: 4px; padding: 6px 0;
}

@media (max-width: 900px) {
	.mlhe-day { min-height: 92px; }
	.mlhe-week { overflow-x: auto; }
	.mlhe-week__head, .mlhe-week__body { min-width: 720px; }
}
@media (max-width: 680px) {
	.mlhe-cal__views { margin-left: 0; }
	.mlhe-day { min-height: 76px; padding: 5px; }
	.mlhe-chip__title { display: none; }
	.mlhe-chip { justify-content: center; }
}