/* =========================================================
   Haus Magnussen – Belegungsübersicht
   [hmb_occupancy_table]

   Umgesetzt nach dem Marken-Design-System vom 04.07.2026:
   - Schrift: Inter
   - Akzentfarbe (Blau) nur für interaktive Elemente (Button, Hover)
   - Fließtext bleibt neutral dunkel
   - Nur 3 Status-Kategorien:
       Frei            -> Mint (Markenpalette)
       Angefragt       -> Cyan (Markenpalette; noch nicht bestätigte Anfrage)
       Nicht verfügbar -> #FF746C (einheitlich für alle Frontend-Tools;
                          fasst bestätigte Buchungen + alle Admin-Sperren
                          zusammen, keine separate Eigennutzung-Anzeige)
   - Desktop: breite Tabelle (Monate als Zeilen, Tage 01-31 als Spalten)
   - Mobil (<= 680px): fortlaufende Wochenzeilen ab der aktuellen Woche,
     standardmäßig 8 Wochen sichtbar, per Button beliebig oft in
     4-Wochen-Schritten nachladbar (occupancy-table.js)
   ========================================================= */

.hmb-occ {
	--occ-blue:      #4274d9;
	--occ-navy:      #293681;
	--occ-cyan:      #95CCDD;
	--occ-mint:      #d0e7e6;
	--occ-white:     #ffffff;
	--occ-text:      #23262b;
	--occ-text-mute: #6b7280;
	--occ-border:    #e7ebf3;
	--occ-unavailable:      #FF746C;
	--occ-unavailable-bg:   #FFEAE9;
	--occ-unavailable-text: #b23c34;
	--occ-pending-bg:       rgba(149, 204, 221, .5);
	--occ-pending-text:     #1c4a5c;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--occ-text);
	background: var(--occ-white);
	border: 1px solid var(--occ-border);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(41, 54, 129, .06);
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}
.hmb-occ *, .hmb-occ *::before, .hmb-occ *::after { box-sizing: border-box; }

/* ── Kopfzeile ───────────────────────────────────────────── */
.hmb-occ__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--occ-border);
}
.hmb-occ__title {
	margin: 0;
	font-family: inherit;
	font-weight: 500;      /* Module Title: Medium */
	font-size: 20px;
	line-height: 30px;     /* 1.5 als px */
	color: var(--occ-navy);
}
.hmb-occ__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.hmb-occ__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 400;
	line-height: 19px;   /* 1.6 als px, gerundet */
	color: var(--occ-text-mute);
}
.hmb-occ__dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex-shrink: 0;
	display: inline-block;
}
.hmb-occ__dot--free    { background: var(--occ-mint); border: 1px solid #b7d9d7; }
.hmb-occ__dot--pending { background: var(--occ-cyan); }
.hmb-occ__dot--booked  { background: var(--occ-unavailable); }

/* =========================================================
   Desktop-Ansicht: breite Tabelle
   ========================================================= */
.hmb-occ__desktop-view { display: block; }

.hmb-occ__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hmb-occ__table {
	border-collapse: collapse;
	width: 100%;
	min-width: 760px;
	table-layout: fixed;
}

.hmb-occ__table th,
.hmb-occ__table td {
	text-align: center;
	padding: 0;
}

/* Kopfzeile: Jahr + Tag-Nummern 01-31 */
.hmb-occ__table thead th {
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	color: var(--occ-text-mute);
	padding: 10px 2px;
	border-bottom: 1px solid var(--occ-border);
	background: var(--occ-white);
}
.hmb-occ__yearcell {
	position: sticky;
	left: 0;
	z-index: 2;
	text-align: left !important;
	padding-left: 20px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	color: var(--occ-navy) !important;
	background: var(--occ-white);
	min-width: 96px;
	width: 96px;
}

/* Monatszeilen */
.hmb-occ__monthcell {
	position: sticky;
	left: 0;
	z-index: 1;
	text-align: left !important;
	padding: 0 0 0 20px !important;
	font-size: 13px;
	font-weight: 700;
	color: var(--occ-navy);
	background: var(--occ-white);
	white-space: nowrap;
	border-right: 1px solid var(--occ-border);
}

.hmb-occ__table tbody tr:not(:last-child) .hmb-occ__monthcell,
.hmb-occ__table tbody tr:not(:last-child) .hmb-occ__day {
	border-bottom: 1px solid var(--occ-border);
}

.hmb-occ__day {
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	padding: 9px 1px;
	color: var(--occ-text);
}
.hmb-occ__day--empty   { background: transparent; }
.hmb-occ__day--free    { background: var(--occ-mint); color: #1c4a48; }
.hmb-occ__day--pending { background: var(--occ-pending-bg); color: var(--occ-pending-text); }
.hmb-occ__day--booked  { background: var(--occ-unavailable-bg); color: var(--occ-unavailable-text); }
.hmb-occ__day--past    { opacity: .45; }

.hmb-occ__table tbody tr:hover .hmb-occ__monthcell {
	background: var(--occ-mint);
}

/* =========================================================
   Mobile-Ansicht: fortlaufende Wochenzeilen ab der aktuellen Woche
   (per Default ausgeblendet, siehe Media-Query unten)
   ========================================================= */
.hmb-occ__mobile-view { display: none; padding: 4px 16px 8px; }

.hmb-occ__weekhead {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	padding: 12px 0 4px;
}
.hmb-occ__weekhead span {
	text-align: center;
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--occ-text-mute);
}

.hmb-occ__weekgroup--hidden { display: none; }

.hmb-occ__month-divider {
	font-size: 12px;
	font-weight: 700;
	color: var(--occ-navy);
	padding: 10px 0 4px;
}

.hmb-occ__weekrow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 4px;
}
.hmb-occ__wday {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 500;
	color: var(--occ-text);
}
.hmb-occ__wday--free    { background: var(--occ-mint); color: #1c4a48; }
.hmb-occ__wday--pending { background: var(--occ-pending-bg); color: var(--occ-pending-text); }
.hmb-occ__wday--booked  { background: var(--occ-unavailable-bg); color: var(--occ-unavailable-text); }
.hmb-occ__wday--past    { opacity: .45; }

.hmb-occ__loadmore {
	display: block;
	width: 100%;
	margin: 10px 0 6px;
	padding: 10px;
	background: var(--occ-white);
	border: 1px solid var(--occ-border);
	border-radius: 8px;
	color: var(--occ-blue);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.hmb-occ__loadmore:hover { background: var(--occ-mint); border-color: #b7d9d7; }

/* ── Mehr-Monate-Toggle für die Desktop-Tabelle (reines CSS) ──
   Wichtig: nicht mit display:none/hidden verstecken – manche Theme-Reset-
   Styles (input[type=checkbox]{display:inline-block !important}) machen
   das wieder sichtbar. Stattdessen robust "visuell ausblenden, aber
   bedienbar lassen" (Tastatur/Screenreader funktionieren weiterhin). */
.hmb-occ__toggle-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hmb-occ__row--extra { display: none; }

.hmb-occ__toggle-input:checked ~ .hmb-occ__desktop-view .hmb-occ__row--extra {
	display: table-row;
}

/* ── Footer ──────────────────────────────────────────────── */
.hmb-occ__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 20px 18px;
}

.hmb-occ__more-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--occ-blue);
	cursor: pointer;
	user-select: none;
}
.hmb-occ__more-label:hover { color: var(--occ-navy); }
.hmb-occ__more-hide { display: none; }
.hmb-occ__toggle-input:checked ~ .hmb-occ__footer .hmb-occ__more-show { display: none; }
.hmb-occ__toggle-input:checked ~ .hmb-occ__footer .hmb-occ__more-hide { display: inline; }

.hmb-occ__updated {
	font-size: 12px;
	color: var(--occ-text-mute);
}

.hmb-occ__cta {
	display: inline-block;
	background: var(--occ-blue);
	color: var(--occ-white) !important;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 18px;
	border-radius: 8px;
	white-space: nowrap;
	transition: background .15s ease;
}
.hmb-occ__cta:hover { background: var(--occ-navy); }

/* ── Umschaltpunkt Desktop-Tabelle <-> Mobile-Wochenzeilen ─── */
@media (max-width: 680px) {
	.hmb-occ__desktop-view { display: none; }
	.hmb-occ__mobile-view  { display: block; }
	.hmb-occ__desktop-only { display: none !important; }

	.hmb-occ__head { padding: 16px 16px 12px; }
	.hmb-occ__footer { padding: 12px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.hmb-occ__cta { transition: none; }
}