/* SPDX-License-Identifier: GPL-3.0-only */
/* Gemeinsame Farb-, Typografie- und Oberflächenwerte der Anwendung. */
:root{
	color-scheme:light;
	--ink:#1d302e;
	--muted:#71817d;
	--line:#e4eae6;
	--paper:#f4f7f3;
	--white:#fff;
	--green:#244d43;
	--green-light:#e6efe9;
	--orange:#d97757;
	--shadow:0 14px 45px rgba(30,57,47,.07);
	font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	color:var(--ink);
	background:var(--paper)
}
*{
	box-sizing:border-box
}
body{
	margin:0;
	min-height:100vh;
	background:var(--paper)
}
a{
	color:inherit;
	text-decoration:none
}
.topbar{
	height:82px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 clamp(20px,5vw,80px);
	background:rgba(255,255,255,.86);
	border-bottom:1px solid var(--line);
	position:relative;
	z-index:2
}
.brand{
	display:flex;
	align-items:center;
	gap:12px;
	font:700 15px system-ui,sans-serif;
	letter-spacing:-.02em
}
.brand-mark{
	width:42px;
	height:42px;
	border-radius:14px;
	background:var(--green);
	color:white;
	display:grid;
	place-items:center;
	font-size:24px
}
.brand small{
	display:block;
	color:var(--muted);
	font:500 11px system-ui,sans-serif;
	letter-spacing:.08em;
	text-transform:uppercase;
	margin-top:3px
}
.top-actions{
	display:flex;
	align-items:center;
	gap:26px
}
.quiet-link{
	color:var(--muted);
	font-size:13px;
	font-weight:600
}
.quiet-link:hover{
	color:var(--green)
}
.language-switch{
	display:flex;
	padding:4px;
	background:#eef2ee;
	border-radius:10px;
	gap:2px
}
.language-switch a{
	padding:7px 9px;
	color:#71817d;
	font-size:11px;
	font-weight:700;
	border-radius:7px
}
.language-switch .selected{
	background:white;
	color:var(--green);
	box-shadow:0 1px 4px #1d302e18
}
.page-shell{
	width:min(1280px,calc(100% - 40px));
	margin:0 auto;
	padding:44px 0 76px
}
.hero,.admin-heading{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:28px;
	margin-bottom:30px
}
.eyebrow{
	text-transform:uppercase;
	letter-spacing:.16em;
	font-size:10px;
	font-weight:700;
	color:var(--orange);
	margin:0 0 9px
}
.hero h1,.admin-heading h1{
	font:700 clamp(30px,4vw,44px) system-ui,sans-serif;
	letter-spacing:-.055em;
	margin:0;
	color:var(--ink)
}
.hero-description,.admin-heading p:not(.eyebrow){
	color:var(--muted);
	font-size:14px;
	line-height:1.7;
	max-width:570px;
	margin:12px 0 0
}
.object-picker{
	min-width:220px;
	display:grid;
	gap:7px
}
.object-picker label,.field>span,.field-title{
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.08em;
	font-weight:700;
	color:#73817c
}
.object-picker select,select,input,textarea{
	font:inherit
}
select,input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea{
	width:100%;
	border:1px solid var(--line);
	border-radius:10px;
	background:white;
	padding:11px 12px;
	color:var(--ink);
	outline:0
}
select:focus,input:focus,textarea:focus{
	border-color:#8fac9d;
	box-shadow:0 0 0 3px #244d4310
}
.year-bar{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:24px;
	background:var(--green);
	color:white;
	padding:16px;
	border-radius:18px;
	margin:24px 0 26px;
	box-shadow:0 10px 25px #244d4320
}
.year-bar>div{
	text-align:center;
	min-width:88px
}
.year-bar strong{
	display:block;
	font:700 24px system-ui,sans-serif;
	letter-spacing:-.04em
}
.year-label{
	font-size:9px;
	text-transform:uppercase;
	letter-spacing:.16em;
	color:#c4d6cc
}
.year-arrow{
	width:36px;
	height:36px;
	display:grid;
	place-items:center;
	border-radius:11px;
	background:#ffffff1b;
	color:white;
	font-size:20px;
	transition:background .2s
}
.year-arrow:hover{
	background:#ffffff35
}
.view-switch{
	display:flex;
	gap:6px;
	margin:-8px 0 18px
}
.view-switch a{
	padding:8px 12px;
	border-radius:9px;
	background:#e9efea;
	color:#708079;
	font-size:11px;
	font-weight:700
}
.view-switch a.active{
	background:white;
	color:var(--green);
	box-shadow:0 2px 8px #1d302e0c
}
/* Beide Jahresmatrizen sitzen in einem horizontal scrollbaren Rahmen. */
.annual-wrap{
	width:100%;
	overflow:auto;
	border:1px solid var(--line);
	border-radius:12px;
	background:white
}
.annual-mobile-wrap{
	display:none
}
.annual-calendar{
	width:100%;
	min-width:930px;
	table-layout:fixed;
	border-collapse:separate;
	border-spacing:1px;
	background:#edf1ed;
	text-align:center
}
.annual-calendar th,.annual-calendar td{
	width:25px;
	min-width:25px;
	height:25px;
	padding:0;
	border:0;
	background:white;
	font-size:9px
}
.annual-calendar thead th{
	height:28px;
	background:#f2f5f2;
	color:#829089;
	font-size:9px;
	font-weight:700
}
.annual-calendar .month-column{
	width:105px;
	min-width:105px;
	position:sticky;
	left:0;
	text-align:left;
	padding:0 11px;
	background:#f4f7f3;
	color:#4e6159;
	font-size:10px;
	font-weight:700
}
.annual-calendar td{
	color:#83918a
}
.annual-calendar td.annual-booked{
	background:var(--booking-color);
	color:white;
	font-weight:700
}
.annual-calendar td.invalid-day{
	background:#f7f8f7
}
.annual-calendar td:not(.invalid-day):hover{
	outline:2px solid var(--green);
	outline-offset:-2px
}
.annual-admin{
	margin:0 0 20px;
	padding:16px 18px
}
.annual-admin-heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-bottom:12px
}
.annual-admin-heading h2{
	font:700 20px system-ui,sans-serif;
	margin:0
}
.annual-hint{
	font-size:11px;
	color:var(--muted);
	margin:5px 0 0
}
.annual-admin-controls{
	display:flex;
	align-items:center;
	gap:6px
}
.annual-admin-controls form{
	min-width:170px
}
.annual-admin-controls select{
	padding:8px;
	font-size:11px
}
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0
}
.property-heading{
	font:700 20px system-ui,sans-serif;
	letter-spacing:-.03em;
	margin:24px 0 12px
}
.calendar-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:16px
}
.month-card{
	background:var(--white);
	border:1px solid var(--line);
	border-radius:16px;
	padding:18px 16px 15px;
	box-shadow:var(--shadow)
}
.month-card h3{
	font:700 14px system-ui,sans-serif;
	text-transform:capitalize;
	margin:0 0 16px
}
.month-grid{
	display:grid;
	grid-template-columns:repeat(7,minmax(0,1fr));
	gap:5px;
	text-align:center
}
.weekday{
	font-size:9px;
	text-transform:uppercase;
	color:#9aa6a0;
	font-weight:700;
	padding-bottom:5px
}
.day{
	aspect-ratio:1;
	min-width:0;
	display:grid;
	place-items:center;
	border-radius:9px;
	font-size:11px;
	color:#475953
}
.day.empty,.day.past{
	visibility:hidden
}
.day.occupied{
	background:var(--booking-color);
	color:white;
	font-weight:700;
	box-shadow:inset 0 0 0 1px #00000008
}
.day:not(.occupied):not(.empty):hover{
	background:var(--green-light)
}
.legend{
	margin-top:30px;
	padding:20px 22px;
	background:#eaf0eb;
	border-radius:16px;
	display:flex;
	align-items:center;
	gap:28px
}
.legend h2{
	font:700 12px system-ui,sans-serif;
	margin:0;
	text-transform:uppercase;
	letter-spacing:.1em
}
.legend-items{
	display:flex;
	gap:18px;
	flex-wrap:wrap
}
.legend-item,.type-chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:#576862;
	font-size:12px
}
.legend-item i,.type-chip i,.swatch{
	width:12px;
	height:12px;
	background:var(--booking-color);
	border-radius:4px;
	display:inline-block
}
.empty-state,.error-panel{
	background:white;
	border:1px solid var(--line);
	border-radius:20px;
	text-align:center;
	padding:60px 24px;
	box-shadow:var(--shadow)
}
.empty-state h2,.error-panel h1{
	font:700 22px system-ui;
	margin:14px 0 8px
}
.empty-state p,.error-panel p{
	color:var(--muted);
	font-size:14px
}
.empty-state a{
	color:var(--green);
	font-weight:700;
	text-decoration:underline
}
.empty-icon{
	font-size:36px;
	color:var(--green)
}
.site-footer{
	border-top:1px solid var(--line);
	padding:22px clamp(20px,5vw,80px);
	display:flex;
	justify-content:space-between;
	color:#86928d;
	font-size:11px
}
.admin-heading{
	align-items:center
}
.admin-nav{
	display:flex;
	gap:6px;
	background:#e9efea;
	padding:5px;
	border-radius:13px;
	width:max-content;
	max-width:100%;
	margin:0 0 20px;
	overflow:auto
}
.admin-nav a{
	white-space:nowrap;
	padding:10px 14px;
	border-radius:9px;
	font-size:12px;
	font-weight:600;
	color:#708079
}
.admin-nav a.active{
	background:white;
	color:var(--green);
	box-shadow:0 2px 8px #1d302e0c
}
.button{
	border:0;
	border-radius:10px;
	padding:11px 15px;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	gap:8px;
	font-size:12px;
	font-weight:700;
	cursor:pointer;
	white-space:nowrap
}
.button-primary{
	color:white;
	background:var(--green);
	margin-top:18px
}
.button-primary:hover{
	background:#183b32
}
.button-light{
	color:var(--green);
	background:#edf2ed
}
.button-light:hover{
	background:#dfe9e1
}
.button-danger{
	color:#a54a37;
	background:#fff0ec
}
.button-small{
	padding:8px 10px;
	font-size:11px
}
.panel{
	background:white;
	border:1px solid var(--line);
	border-radius:16px;
	padding:22px;
	box-shadow:var(--shadow);
	min-width:0
}
.panel-heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:20px
}
.panel-heading h2{
	font:700 19px system-ui,sans-serif;
	letter-spacing:-.03em;
	margin:0
}
.admin-columns{
	display:grid;
	grid-template-columns:minmax(300px,.85fr) minmax(0,1.3fr);
	gap:18px;
	align-items:start
}
.form-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px
}
.field{
	display:grid;
	gap:7px;
	min-width:0
}
.field-wide{
	grid-column:1/-1
}
.field textarea{
	resize:vertical
}
.choice-row{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	border-top:1px solid var(--line);
	padding-top:16px;
	margin:18px 0
}
.choice-row label,.settings-options label{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	color:#53645d
}
.choice-row input,.settings-options input,.weekday-checks input{
	accent-color:var(--green)
}
.weekly-fields{
	margin:12px 0 16px
}
.weekday-checks{
	display:flex;
	flex-wrap:wrap;
	gap:7px;
	margin-top:10px
}
.weekday-checks label{
	display:flex;
	align-items:center;
	gap:5px;
	background:#f1f5f1;
	border-radius:8px;
	padding:8px 9px;
	font-size:11px
}
.translation-grid{
	display:grid;
	gap:12px;
	margin-bottom:16px
}
.translation-grid fieldset{
	border:1px solid var(--line);
	border-radius:12px;
	padding:13px;
	display:grid;
	gap:10px
}
.translation-grid legend{
	font-size:11px;
	font-weight:700;
	color:var(--green);
	padding:0 6px
}
.translation-grid .field input,.translation-grid .field textarea{
	font-size:12px;
	padding:9px
}
.color-input{
	display:flex;
	align-items:center;
	gap:7px
}
.color-input input[type=color]{
	width:42px;
	height:40px;
	padding:4px;
	border:1px solid var(--line);
	border-radius:9px;
	background:white
}
.color-input span{
	color:var(--muted);
	font-weight:700
}
.color-input input:not([type=color]){
	max-width:110px;
	text-transform:uppercase
}
.record-list{
	display:grid
}
.record-row{
	display:flex;
	align-items:center;
	gap:11px;
	padding:13px 0;
	border-bottom:1px solid #edf0ed
}
.record-row:last-child{
	border-bottom:0
}
.record-main{
	min-width:0;
	flex:1
}
.record-main strong,.record-main small{
	display:block
}
.record-main strong{
	font-size:13px
}
.record-main small{
	font-size:11px;
	color:var(--muted);
	margin-top:4px;
	overflow:hidden;
	text-overflow:ellipsis
}
.swatch{
	width:16px;
	height:16px;
	border-radius:5px;
	flex:none
}
.property-icon{
	display:grid;
	place-items:center;
	width:32px;
	height:32px;
	border-radius:10px;
	background:#e8f0e9;
	color:var(--green)
}
.table-wrap{
	overflow:auto
}
table{
	width:100%;
	border-collapse:collapse;
	text-align:left
}
th{
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:.09em;
	color:#86938d;
	font-weight:700;
	padding:0 10px 11px
}
td{
	font-size:12px;
	padding:11px 10px;
	border-top:1px solid #edf0ed;
	color:#52645c
}
.booking-statistics{
	border-top:1px solid var(--line);
	margin-top:22px;
	padding-top:20px
}
.booking-statistics h3{
	font:700 15px system-ui,sans-serif;
	margin:0 0 14px
}
.booking-statistics h4{
	font:700 11px system-ui,sans-serif;
	margin:18px 0 9px;
	color:#66756e
}
.stats-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:9px
}
.stat-card{
	min-width:0;
	padding:12px;
	border:1px solid var(--line);
	border-radius:11px;
	background:#f7f8f6
}
.stat-card span,.stat-card strong{display:block}
.stat-card span{
	color:var(--muted);
	font-size:10px;
	line-height:1.4
}
.stat-card strong{
	margin-top:5px;
	font-size:16px;
	line-height:1.35;
	overflow-wrap:anywhere
}
.stat-card:last-child strong{font-size:12px}
.stats-type-list{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:0 18px
}
.stats-type-row{
	display:flex;
	justify-content:space-between;
	gap:12px;
	padding:8px 2px;
	border-bottom:1px solid #edf0ed;
	font-size:11px;
	color:#576862
}
.stats-type-row strong{color:var(--ink)}
.annual-occupancy{
	border-top:1px solid var(--line);
	margin-top:22px;
	padding-top:18px
}
.annual-occupancy>h4{
	font:700 14px system-ui,sans-serif;
	margin:0 0 12px
}
.occupancy-chart-legend{
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
	margin-bottom:8px;
	color:var(--muted);
	font-size:10px
}
.occupancy-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.occupancy-chart-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.chart-actual{background:var(--green)}
.chart-partial{background:#dbb00a;opacity:.65}
.chart-forecast{background:white;border:1px dashed var(--orange)}
.chart-type{background:var(--booking-color)}
.chart-bar-segment{stroke:#fff;stroke-width:.6}
.chart-segment-partial{opacity:.65}
.occupancy-chart-legend strong{color:var(--green);font-size:11px}
.occupancy-chart-scroll{
	max-width:100%;
	overflow-x:auto;
	border:1px solid var(--line);
	border-radius:12px;
	background:#fff
}
.occupancy-chart{display:block;width:100%;min-width:760px;height:auto}
.chart-gridline{stroke:#e8ece8;stroke-width:1}
.chart-axis-label,.chart-year-label{fill:#77857e;font:10px system-ui,sans-serif}
.chart-bar-actual{fill:var(--green)}
.chart-bar-partial{fill:#dbb00a;opacity:.65}
.chart-bar-forecast{fill:#fff;stroke:var(--orange);stroke-width:2;stroke-dasharray:4 3}
.chart-forecast-line{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:5 4}
.forecast-note{margin:9px 0 14px;color:var(--muted);font-size:10px;line-height:1.5}
.occupancy-table-wrap{max-height:300px}
.occupancy-table td,.occupancy-table th{white-space:nowrap}
.occupancy-table td small{display:block;margin-top:3px;color:var(--orange);font-size:9px}
.occupancy-table .forecast-row{background:#fbf8f1}
.occupancy-table .partial-row{background:#fffdf4}
@media(max-width:900px){
	.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
	.stats-grid,.stats-type-list{grid-template-columns:1fr 1fr;gap:7px}
	.stat-card{padding:10px}
	.stats-type-row{font-size:10px}
}
.booking-description{
	display:block;
	margin-top:5px;
	color:var(--muted);
	font-size:10px;
	line-height:1.4
}
.row-actions{
	text-align:right;
	white-space:nowrap
}
.row-actions>.button,
.row-actions>.inline-form{
	vertical-align:middle
}
.row-actions>.inline-form{
	margin-left:6px
}
.inline-form{
	display:inline-block
}
.empty-copy{
	font-size:13px;
	color:var(--muted);
	padding:8px 0
}
.notice{
	background:#e9f3ec;
	border:1px solid #d4e6d9;
	color:#315c43;
	border-radius:10px;
	padding:12px 14px;
	margin:0 0 16px;
	font-size:12px
}
.settings-panel{
	max-width:780px
}
.settings-options{
	display:grid;
	gap:14px;
	border-top:1px solid var(--line);
	margin-top:20px;
	padding-top:18px
}
.settings-options label{
	font-size:13px
}
.error-panel{
	max-width:700px;
	margin:4vh auto
}
.error-panel p{
	overflow-wrap:anywhere
}
.login-panel{
	max-width:440px;
	margin:7vh auto
}
.login-panel h1{
	margin:0;
	font-size:22px
}
.login-form{
	display:grid;
	gap:14px
}
.login-form .button-primary{
	margin-top:2px
}
.login-error{
	border-color:#e7c2b9;
	color:#8f382a
}
.admin-heading-actions{
	display:flex;
	align-items:center;
	gap:8px
}
.logout-form{
	margin:0
}
.legend-item i.legend-booked{background:#8a0d43}
.legend-item i.legend-free{
	box-sizing:border-box;
	border:1px solid #92999b;
	border-radius:2px;
	background:linear-gradient(135deg,#fff 0 47%,#92999b 48% 52%,#f1eeee 53% 100%)
}
/* Embedded calendar uses the compact, vertically transposed annual matrix at every viewport width. */
.embedded-calendar{
	min-height:0;
	background:transparent;
	--ink:#333;
	--muted:#666;
	--line:#e5e1df;
	--paper:#f5f5f5;
	--green:#8a0d43;
	--green-light:#f5e8ee;
	--orange:#dbb00a
}
.embedded-calendar .page-shell{width:100%;margin:0;padding:10px 0 16px}
.embedded-calendar .year-bar{background:#8a0d43;padding:9px 12px;margin:10px 0 14px;border-radius:10px;box-shadow:0 5px 14px #8a0d4320}
.embedded-calendar .year-label{display:none}
.embedded-calendar .year-bar strong{font-size:21px}
.embedded-calendar .view-switch a{background:#eee9e5;color:#645b56}
.embedded-calendar .view-switch a.active{background:#fff;color:#8a0d43}
.embedded-calendar .annual-desktop-wrap{display:none}
.embedded-calendar .annual-mobile-wrap{display:block}
.embedded-calendar .annual-transposed{min-width:100%}
.embedded-calendar .annual-transposed .month-column{width:28px;min-width:28px;text-align:center;padding:0 2px}
.embedded-calendar .annual-transposed th:not(.month-column),.embedded-calendar .annual-transposed td{width:auto;min-width:24px}
.embedded-calendar .annual-calendar td.annual-booked,.embedded-calendar .day.occupied{--booking-color:#8a0d43!important}
.embedded-calendar .annual-calendar td.annual-weekend:not(.annual-booked),.embedded-calendar .annual-calendar td.annual-holiday:not(.annual-booked),.embedded-calendar .day.weekend:not(.occupied),.embedded-calendar .day.holiday:not(.occupied){background:#f1eeee}
.embedded-calendar .month-card,.embedded-calendar .annual-wrap{border-color:#e5e1df}
.embedded-calendar .legend{background:transparent}
/* At tablet width, stack admin columns and reduce the month-card grid. */
@media(max-width:900px){
	.calendar-grid{
		grid-template-columns:repeat(2,minmax(0,1fr))
	}
	.admin-columns{
		grid-template-columns:1fr
	}
	.page-shell{
		padding-top:30px
	}
}
@media(max-width:680px){
	/* Hide the wide table in favor of the mobile, transposed matrix. */
	.annual-desktop-wrap{
		display:none
	}
	.annual-mobile-wrap{
		display:block
	}
	.annual-transposed{
		min-width:470px
	}
	.annual-transposed .month-column{
		width:28px;
		min-width:28px;
		text-align:center;
		padding:0 2px
	}
	.annual-transposed th:not(.month-column),.annual-transposed td{
		width:35px;
		min-width:35px
	}
}
@media(max-width:580px){
	.topbar{
		height:68px;
		padding:0 16px
	}
	.top-actions{
		gap:12px
	}
	.quiet-link{
		font-size:11px
	}
	.brand{
		font-size:13px
	}
	.brand-mark{
		width:36px;
		height:36px
	}
	.page-shell{
		width:calc(100% - 26px);
		padding:25px 0 45px
	}
	.hero,.admin-heading{
		align-items:flex-start;
		flex-direction:column
	}
	.object-picker{
		width:100%
	}
	.calendar-grid{
		grid-template-columns:1fr 1fr;
		gap:9px
	}
	.month-card{
		padding:13px 9px;
		border-radius:13px
	}
	.month-card h3{
		margin:0 0 11px 3px
	}
	.month-grid{
		gap:3px
	}
	.day{
		font-size:10px;
		border-radius:7px
	}
	.legend{
		align-items:flex-start;
		flex-direction:column;
		gap:12px;
		padding:17px
	}
	.site-footer{
		padding:17px 14px;
		gap:14px;
		flex-direction:column
	}
	.admin-nav{
		width:100%
	}
	.panel{
		padding:16px
	}
	.form-grid{
		grid-template-columns:1fr
	}
	.field-wide{
		grid-column:auto
	}
	.record-row{
		gap:6px
	}
	.record-row .button-small{
		padding:7px
	}
	.row-actions{
		align-items:flex-start;
		flex-direction:column
	}
	.admin-heading .button{
		align-self:stretch
	}
	.year-bar{
		margin:18px 0
	}
	.language-switch a{
		padding:6px 7px
	}
}
table.annual-calendar{
	border-collapse:separate!important;
	border-spacing:1px;
	background:#edf1ed;
	text-align:center
}
table.annual-calendar th,table.annual-calendar td{
	height:25px;
	min-width:25px;
	padding:0;
	border:0;
	text-align:center;
	font-size:9px
}
table.annual-calendar thead th{
	height:28px;
	padding:0;
	background:#f2f5f2
}
table.annual-calendar .month-column{
	min-width:105px;
	text-align:left;
	padding:0 11px;
	position:sticky;
	left:0;
	z-index:1
}
.day.weekend:not(.occupied),.day.holiday:not(.occupied){
	background:#f0f2f1
}
.annual-cell-day,.annual-cell-weekday{
	display:block;
	line-height:9px
}
table.annual-calendar td.annual-weekend:not(.annual-booked),table.annual-calendar td.annual-holiday:not(.annual-booked){
	background:#f0f2f1
}
table.annual-calendar td.annual-booked{
	background:var(--booking-color);
	color:white;
	font-weight:700
}
.booking-filter{
	display:block;
	margin:0 0 14px
}
.booking-filter input{
	width:100%;
	border:1px solid var(--line);
	border-radius:10px;
	background:var(--white);
	color:var(--ink);
	padding:10px 12px;
	font:inherit;
	font-size:13px
}
.booking-filter input:focus{
	outline:2px solid rgba(36,77,67,.2);
	border-color:var(--green)
}
tr.booking-row-hover>td{
	background-color:#e6efe9;
	color:var(--ink)
}
tr.booking-row-hover>td:first-child{
	box-shadow:inset 3px 0 var(--green)
}
tr.booking-row-hover>td.row-actions{
	background:transparent;
	box-shadow:inset 0 0 0 1000px #e6efe9
}
tr.booking-row-hover .inline-form{
	background:transparent
}
table.annual-calendar td[data-booking-ids]{
	cursor:pointer
}
table.annual-calendar td.booking-cell-hover{
	position:relative;
	z-index:2;
	box-shadow:inset 0 0 0 2px var(--green);
	filter:brightness(.88)
}
@media(max-width:680px){
	table.annual-calendar.annual-transposed .month-column{
		width:24px;
		min-width:24px;
		padding-left:1px;
		padding-right:1px
	}
}