/* =============== VIIKKOKALENTERI ================ */
.calendar-scroll {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	contain: inline-size;
	overflow-x: auto;
	margin: 0.5rem 0;
	-webkit-overflow-scrolling: touch;
}

/* Vanhassa taulukkorungossa kalenterin leveys ei saa kasvattaa koko sivua. */
.sivun-sisalto {
	table-layout: fixed;
}
.sivun-sisalto__keskusta,
.sivun-sisalto__sisalto {
	min-width: 0;
}
.sivun-sisalto__sivupalkki img {
	width: 160px !important;
	height: auto;
}
.sivun-sisalto__rajaus {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.calendar-table { width: 100%; min-width: 610px; border-collapse: separate; border-spacing: 1px; font-size: 14px !important; }
.calendar-table td { padding: 0.2rem 0.25rem; vertical-align: middle; }
.calendar-table__header { position: sticky; top: 0; z-index: 1; font-weight: bold; }
.calendar-table__header td, .calendar-week__number, .calendar-week__month, .calendar-day, .calendar-week__diary { text-align: center; }
.calendar-week__number { width: 1.9rem; min-width: 1.9rem; font-size: 0.9em; font-weight: bold; white-space: nowrap; }

.calendar-week__reservation {
	width: 8.25rem;
	min-width: 8.25rem;
	font-size: 0.9em;
	overflow-wrap: anywhere;
}
.calendar-week__reservation-line { display: flex; align-items: baseline; gap: 0.25rem; }
.calendar-week__reservation-line i { flex: 0 0 1rem; }
.calendar-week__reservation-user { margin-top: 0.12rem; }
.calendar-week__month { width: 3.5rem; min-width: 3.5rem; text-align: left; white-space: nowrap; }
.calendar-week__month small { display: inline-flex; align-items: center; gap: 0.1rem; }
.calendar-day { width: 1.9rem; min-width: 1.9rem; font-variant-numeric: tabular-nums; }
.calendar-day__date { display: block; line-height: 1.1; }
.calendar-day__guests {
	display: block;
	margin-top: 0.1rem;
	color: #fff;
	font-size: 0.7rem;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
}
.calendar-table .calendar-day--free { background-color: #90ee90 !important; }
.calendar-table .calendar-day--pending { background-color: #ffeb3b !important; }
.calendar-table .calendar-day--reserved { color: #fff; background-color: #ef5350 !important; }
.calendar-table .calendar-week--maintenance td { background-color: #d3d3d3 !important; }
.calendar-week--current .calendar-week__number,
.calendar-week--current .calendar-week__reservation,
.calendar-week--current .calendar-week__month { background-color: #ff9800 !important; }
.calendar-table .calendar-week--status-0 .calendar-week__number { background-color: #90ee90 !important; }
.calendar-table .calendar-week--status-1 .calendar-week__number { color: #fff; background-color: #ef5350 !important; }
.calendar-table .calendar-week--status-1 .calendar-week__number a,
.calendar-table .calendar-week--status-1 .calendar-week__number a:visited,
.calendar-table .calendar-week--status-1 .calendar-week__number a:hover,
.calendar-table .calendar-week--status-1 .calendar-week__number a:focus { color: #fff; }
.calendar-table .calendar-week--status-2 .calendar-week__number { background-color: #ffeb3b !important; }
.calendar-table .calendar-week__diary {
	width: 1.9rem;
	padding-right: 0.075rem;
	padding-left: 0.075rem;
	background-color: #d3d3d3 !important;
}

/* Vuosinavigointi */
.calendar-year-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
}
.calendar-year-nav a, .calendar-year-nav__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.3rem 0.55rem;
	color: #212529;
	font-size: 0.9rem;
	font-weight: bold;
	text-decoration: none;
	background: #f8f9fa;
	border: 1px solid #adb5bd;
	border-radius: 0.3rem;
}
.calendar-year-nav__arrow { min-width: 2.25rem; padding: 0.3rem; }
.calendar-year-nav a:hover, .calendar-year-nav a:focus-visible { color: #fff; background: #0d6efd; border-color: #0d6efd; }
.calendar-year-nav__year.is-selected { color: #fff; background: #495057; border-color: #495057; }
.calendar-year-nav__arrow.is-disabled { color: #adb5bd; background: #e9ecef; }
.calendar-year-nav__today { margin-left: 0.35rem; }

.calendar-filter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-top: 0.45rem;
}
.calendar-filter-nav__button {
	display: inline-flex;
	align-items: center;
	min-height: 1.9rem;
	padding: 0.2rem 0.5rem;
	color: #495057;
	font-size: 0.8rem;
	font-weight: bold;
	text-decoration: none;
	background: #fff;
	border: 1px solid #adb5bd;
	border-radius: 1rem;
}
.calendar-filter-nav__button:hover, .calendar-filter-nav__button:focus-visible,
.calendar-filter-nav__button.is-selected { color: #fff; background: #495057; border-color: #495057; }
.calendar-current-week-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.5rem;
	color: #fff;
	font-size: 0.85rem;
	font-weight: bold;
	text-decoration: none;
	background: #0d6efd;
	border: 1px solid #0d6efd;
	border-radius: 1rem;
	box-shadow: 0 1px 2px rgba(13, 110, 253, 0.28);
}
.calendar-current-week-link:link, .calendar-current-week-link:visited { color: #fff; }
.calendar-current-week-link:hover, .calendar-current-week-link:focus-visible { color: #fff; text-decoration: none; background: #0b5ed7; border-color: #0b5ed7; }
.calendar-week__number:target { outline: 3px solid #0d6efd; outline-offset: -3px; scroll-margin-top: 3rem; }
.calendar-table__title {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.25rem 0;
}
.calendar-table__empty { padding: 1rem !important; color: #6c757d; text-align: center; }

/* Kuvakkeiden selitteet toimivat hoverilla ja näppäimistöfokuksessa ilman selainkohtaista title-kuplaa. */
.calendar-action { 
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	min-height: 1.75rem;
	border-radius: 50%;
	text-decoration: none;
}
.calendar-action--query { min-width: 1.5rem; min-height: 1.5rem; margin-left: 0; }
.calendar-action--diary.is-complete { color: #0f5132; background: #d1e7dd; border: 1px solid #198754; }
.calendar-action--diary.is-empty { color: #6c757d; background: #f1f3f5; border: 1px solid #adb5bd; }
.calendar-action--diary.is-blocked { color: #842029; background: #f8d7da; border: 1px solid #dc3545; }
.calendar-action--diary.is-missing { color: #664d03; background: #fff3cd; border: 1px solid #ffc107; }
.calendar-action:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
.calendar-action::after {
	position: absolute;
	bottom: calc(100% + 0.4rem);
	left: 50%;
	z-index: 10;
	display: none;
	width: max-content;
	max-width: 12rem;
	padding: 0.35rem 0.5rem;
	color: #fff;
	font-size: 0.8rem;
	font-weight: normal;
	line-height: 1.2;
	content: attr(data-tooltip);
	background: #212529;
	border-radius: 0.25rem;
	transform: translateX(-50%);
}
.calendar-action::before {
	position: absolute;
	bottom: calc(100% + 0.05rem);
	left: 50%;
	z-index: 11;
	display: none;
	width: 0;
	height: 0;
	content: '';
	border: 0.35rem solid transparent;
	border-top-color: #212529;
	transform: translateX(-50%);
}
.calendar-action:hover::after, .calendar-action:hover::before,
.calendar-action:focus-visible::after, .calendar-action:focus-visible::before { display: block; }

/* Viimeisen sarakkeen selite avautuu sisäänpäin, ei sivun reunan yli. */
.calendar-week__diary .calendar-action::after {
	left: auto;
	right: 0;
	transform: none;
}
.calendar-week__diary .calendar-action::before {
	left: auto;
	right: 0.35rem;
	transform: none;
}

/* Tabletit: kaikki tiedot säilyvät, mutta taulukko käyttää tilan tehokkaammin. */
@media (min-width: 768px) and (max-width: 1024px) {
	.calendar-table { min-width: 600px; font-size: 14px !important; }
	.calendar-table td { padding: 0.4rem 0.3rem; }
	.calendar-week__reservation { width: 7.5rem; min-width: 7.5rem; }
	.calendar-week__month { width: 3.5rem; min-width: 3.5rem; }
	.calendar-day { width: 1.8rem; min-width: 1.8rem; }
	.calendar-week__number {
		position: sticky;
		left: 0;
		z-index: 2;
		box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12);
	}
	.calendar-week--status-0 .calendar-week__number { background-color: #90ee90 !important; }
	.calendar-week--status-1 .calendar-week__number { background-color: #ef5350 !important; }
	.calendar-week--status-2 .calendar-week__number { background-color: #ffeb3b !important; }
	.calendar-week--current .calendar-week__number { background-color: #ff9800 !important; }
	.calendar-week--maintenance .calendar-week__number { background-color: #d3d3d3 !important; }
}