/* WHS Vereinsarchiv - Frontend-Styles. Bewusst schlicht gehalten, damit sie
   sich gut in bestehende Elementor-Themes einfuegen; ueberschreibe Farben bei
   Bedarf per Theme-CSS ueber die --whs-* Custom Properties. */

/* Wichtig: erzwingt, dass das HTML5-hidden-Attribut IMMER greift, auch bei
   Elementen mit eigenem display:flex (Modals/Viewer) - sonst gewinnt die
   Author-Regel gegen die UA-Default-Regel [hidden]{display:none} und die
   Dialoge bleiben trotz hidden-Attribut sichtbar. */
[hidden] {
	display: none !important;
}

.whs-login,
.whs-library,
.whs-notice {
	--whs-primary: #1d4e42;
	--whs-primary-contrast: #ffffff;
	--whs-border: #d8dcd9;
	--whs-bg: #ffffff;
	--whs-bg-muted: #f6f7f6;
	--whs-text: #24302b;
	--whs-text-muted: #6b756f;
	--whs-danger: #b3261e;
	--whs-radius: 8px;
	box-sizing: border-box;
	color: var( --whs-text );
	font-size: 16px;
}

.whs-login *,
.whs-library *,
.whs-viewer *,
.whs-modal * {
	box-sizing: border-box;
}

.whs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Buttons -------------------------------------------------------------- */

.whs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.6em 1.1em;
	border-radius: var( --whs-radius, 8px );
	border: 1px solid transparent;
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.whs-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.whs-btn--primary {
	background: var( --whs-primary, #1d4e42 );
	color: var( --whs-primary-contrast, #fff );
}

.whs-btn--primary:hover:not( :disabled ) {
	opacity: 0.9;
}

.whs-btn--secondary {
	background: var( --whs-bg-muted, #f6f7f6 );
	border-color: var( --whs-border, #d8dcd9 );
	color: var( --whs-text, #24302b );
}

.whs-btn--ghost {
	background: transparent;
	border-color: var( --whs-border, #d8dcd9 );
	color: var( --whs-text, #24302b );
}

.whs-btn--link {
	background: transparent;
	border: none;
	color: var( --whs-primary, #1d4e42 );
	text-decoration: underline;
	padding: 0.4em 0.2em;
}

.whs-btn--icon {
	padding: 0.4em 0.65em;
	line-height: 1;
	font-size: 1.05em;
}

.whs-btn--tiny {
	padding: 0.15em 0.5em;
	font-size: 0.8em;
	border: 1px solid var( --whs-border, #d8dcd9 );
	background: var( --whs-bg, #fff );
}

.whs-btn--danger {
	color: var( --whs-danger, #b3261e );
	border-color: var( --whs-danger, #b3261e );
}

/* Inputs ----------------------------------------------------------------*/

.whs-input {
	width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid var( --whs-border, #d8dcd9 );
	border-radius: var( --whs-radius, 8px );
	font-size: 1em;
	background: var( --whs-bg, #fff );
	color: var( --whs-text, #24302b );
}

.whs-field {
	display: block;
	margin-bottom: 1em;
	font-weight: 600;
	font-size: 0.9em;
}

.whs-field .whs-input {
	margin-top: 0.35em;
	font-weight: 400;
}

.whs-field--inline {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
}

/* Login -------------------------------------------------------------- */

.whs-login {
	max-width: 420px;
	margin: 0 auto;
	padding: 2em;
	border: 1px solid var( --whs-border, #d8dcd9 );
	border-radius: var( --whs-radius, 8px );
	background: var( --whs-bg, #fff );
}

.whs-login__intro {
	margin-top: 0;
	color: var( --whs-text-muted, #6b756f );
}

.whs-login__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.whs-login__input {
	width: 100%;
	padding: 0.7em 0.8em;
	margin-bottom: 1em;
	border: 1px solid var( --whs-border, #d8dcd9 );
	border-radius: var( --whs-radius, 8px );
	font-size: 1.1em;
}

.whs-login__input--code {
	letter-spacing: 0.4em;
	text-align: center;
	font-size: 1.4em;
}

.whs-login__message {
	min-height: 1.4em;
	margin: 0.8em 0 0;
	font-size: 0.9em;
}

.whs-login__message--error {
	color: var( --whs-danger, #b3261e );
}

.whs-login__step--done {
	text-align: center;
}

/* Honeypot: fuer Menschen unsichtbar, aber im DOM vorhanden und fokussierbar
   fuer einfache Bots, die display:none respektieren, deshalb Off-Screen-Trick. */
.whs-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 0;
	overflow: hidden;
}

/* Notice --------------------------------------------------------------- */

.whs-notice {
	max-width: 480px;
	margin: 0 auto;
	padding: 1.2em 1.5em;
	border-radius: var( --whs-radius, 8px );
	background: var( --whs-bg-muted, #f6f7f6 );
	border: 1px solid var( --whs-border, #d8dcd9 );
}

/* Library panel ---------------------------------------------------------*/

.whs-library {
	max-width: 1100px;
	margin: 0 auto;
}

.whs-library__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
	margin-bottom: 1.2em;
}

.whs-library__toolbar #whs-search-input {
	flex: 1 1 220px;
}

.whs-library__toolbar #whs-year-filter {
	flex: 0 0 auto;
	width: auto;
}

.whs-library__toolbar #whs-logout-btn {
	margin-left: auto;
}

.whs-library__status {
	color: var( --whs-text-muted, #6b756f );
	min-height: 1.4em;
}

.whs-year-group {
	margin-bottom: 2em;
}

.whs-year-group__title {
	font-size: 1.3em;
	border-bottom: 2px solid var( --whs-border, #d8dcd9 );
	padding-bottom: 0.3em;
	margin-bottom: 1em;
}

.whs-year-group__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 1em;
}

.whs-doc-card {
	position: relative;
	border: 1px solid var( --whs-border, #d8dcd9 );
	border-radius: var( --whs-radius, 8px );
	padding: 1em;
	background: var( --whs-bg, #fff );
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.whs-doc-card:hover {
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

.whs-doc-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 6px;
	background: var( --whs-primary, #1d4e42 );
	color: var( --whs-primary-contrast, #fff );
	font-size: 0.75em;
	font-weight: 700;
	margin-bottom: 0.6em;
}

.whs-doc-card__title {
	font-size: 1em;
	margin: 0 0 0.3em;
	word-break: break-word;
}

.whs-doc-card__tags {
	font-size: 0.8em;
	color: var( --whs-text-muted, #6b756f );
	margin: 0;
}

.whs-doc-card__empty {
	font-size: 0.75em;
	color: var( --whs-danger, #b3261e );
}

.whs-doc-card__badge {
	position: absolute;
	top: 0.7em;
	right: 0.7em;
	font-size: 0.7em;
	background: #f2c14e;
	color: #4a3800;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	font-weight: 700;
}

.whs-doc-card__actions {
	display: flex;
	gap: 0.4em;
	margin-top: 0.7em;
}

/* Modals ----------------------------------------------------------------*/

.whs-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
}

.whs-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 20, 24, 22, 0.55 );
}

.whs-modal__box {
	position: relative;
	background: var( --whs-bg, #fff );
	color: var( --whs-text, #24302b );
	border-radius: var( --whs-radius, 8px );
	padding: 1.6em;
	max-width: 480px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
}

.whs-modal__actions {
	display: flex;
	gap: 0.6em;
	align-items: center;
	margin-top: 0.8em;
}

.whs-modal__message {
	min-height: 1.3em;
	font-size: 0.85em;
	color: var( --whs-danger, #b3261e );
}

.whs-folder-tree {
	border: 1px solid var( --whs-border, #d8dcd9 );
	border-radius: var( --whs-radius, 8px );
	padding: 0.6em 0.8em;
	max-height: 220px;
	overflow-y: auto;
	margin-bottom: 1.2em;
}

.whs-folder-tree__list {
	list-style: none;
	margin: 0;
	padding-left: 1em;
}

.whs-folder-tree > .whs-folder-tree__list {
	padding-left: 0;
}

.whs-folder-tree__row {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0;
}

.whs-folder-tree__name {
	flex: 1;
	font-size: 0.9em;
}

.whs-folder-tree__empty {
	color: var( --whs-text-muted, #6b756f );
	font-size: 0.9em;
}

/* PDF Viewer / Flipbook ---------------------------------------------------*/

body.whs-viewer-open {
	overflow: hidden;
}

.whs-viewer {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
}

.whs-viewer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 10, 14, 12, 0.92 );
}

.whs-viewer__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.whs-viewer__toolbar {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 0.8em 1.2em;
	color: #fff;
}

.whs-viewer__title {
	flex: 1;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.whs-viewer__page-indicator {
	font-size: 0.85em;
	opacity: 0.8;
}

.whs-viewer__actions {
	display: flex;
	gap: 0.4em;
}

.whs-viewer__actions .whs-btn {
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	border-color: rgba( 255, 255, 255, 0.25 );
}

.whs-viewer__stage {
	position: relative;
	z-index: 1;
	flex: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.whs-viewer__loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	color: #fff;
	z-index: 3;
	font-size: 0.95em;
}

.whs-page canvas {
	max-width: 100%;
	max-height: 100%;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.4 );
	background: #fff;
}

@media ( max-width: 640px ) {
	.whs-library__toolbar #whs-logout-btn {
		margin-left: 0;
	}
	.whs-year-group__grid {
		grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	}
}

/* Dark-Mode-Unterstuetzung, falls das Theme prefers-color-scheme respektiert */
@media ( prefers-color-scheme: dark ) {
	.whs-login,
	.whs-library,
	.whs-notice {
		--whs-bg: #1b201d;
		--whs-bg-muted: #232823;
		--whs-border: #353b37;
		--whs-text: #eef1ee;
		--whs-text-muted: #a3aca5;
	}
}