/**
 * widgets.css – Wetter, Theme-Selector, Fullscreen, News-Ticker, Settings
 *
 * Stile für die peripheren UI-Komponenten.
 * Nutzt CSS-Variablen aus base.css / theme.js.
 */

/* ================================================================
   WETTER-WIDGET
   ================================================================ */

.weather-widget {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: .5em;
	font-family: 'Courier New', monospace;
	color: var(--text-color);
	font-size: 0.85rem;
	white-space: nowrap;
	transition: var(--theme-transition);
}

/* Favoriten-Tabs */
.weather-fav-tabs {
	display: flex;
	border-bottom: 1px solid var(--border-color);
}

.weather-fav-tab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	background: none;
	border: none;
	color: var(--text-muted);
	font-family: inherit;
	font-size: 0.78em;
	padding: 0.35em 0.5em;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
	white-space: nowrap;
	border-right: 1px solid var(--border-color);
}

.weather-fav-tab:last-child {
	border-right: none;
}

.weather-fav-tab:hover {
	color: var(--text-color);
	background: rgba(255,255,255,0.05);
}

.weather-fav-tab-active {
	color: var(--accent-color, #0af);
	font-weight: 600;
	background: rgba(255,255,255,0.04);
}

.weather-fav-tab-label {
	cursor: pointer;
}

.weather-fav-tab-remove {
	font-size: 0.75em;
	opacity: 0;
	cursor: pointer;
	padding: 0 0.15em;
	transition: opacity 0.2s, color 0.2s;
	color: var(--text-muted);
}

.weather-fav-tab:hover .weather-fav-tab-remove {
	opacity: 0.5;
}

.weather-fav-tab-remove:hover {
	opacity: 1 !important;
	color: #e74c3c;
}

.weather-fav-tab-edit {
	flex: 0 0 auto;
	padding: 0.35em 0.55em;
	font-size: 0.72em;
	opacity: 0.45;
	transition: opacity 0.2s, color 0.2s;
}

.weather-fav-tab-edit:hover {
	opacity: 1;
	color: var(--accent-color, #0af);
}

.weather-fav-tab-add {
	flex: 1;
	font-size: 0.78em;
	opacity: 0.6;
}

.weather-fav-tab-add:hover {
	opacity: 1;
	color: var(--accent-color, #0af);
}

/* Haupt-Inhalt des Widgets */
.weather-main {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.6em 1.2em;
}

.weather-icon {
	font-size: 1.8em;
	color: #fc0;
}

.weather-details {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}

.weather-city {
	color: var(--text-muted);
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: color 0.2s;
}

.weather-city:hover {
	color: var(--accent-color);
}

.weather-loc-icon {
	font-size: 0.85em;
	margin-right: 0.1em;
}

/* --- Wetter-Aktionen (Favorit-Stern) --- */

.weather-actions {
	display: flex;
	align-items: flex-start;
	margin-left: auto;
	padding-left: 0.5em;
}

.weather-fav-btn {
	background: none;
	border: none;
	color: #e0a020;
	font-size: 1em;
	cursor: pointer;
	padding: 0.2em;
	transition: color 0.2s, transform 0.15s;
}

.weather-fav-btn:hover {
	color: #ffc840;
	transform: scale(1.2);
}

/* --- Wetter Ort-Picker --- */

.weather-settings-panel {
	max-width: 440px;
}

.weather-settings-content {
	padding: 0.5em 0;
}

.weather-picker-search {
	padding: 0.6em 0;
}

.weather-picker-search input {
	width: 100%;
	box-sizing: border-box;
}

.weather-picker-label {
	padding: 0.5em 0.8em 0.2em;
	color: var(--text-muted);
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.weather-picker-results,
.weather-picker-favs {
	max-height: 40vh;
	overflow-y: auto;
}

.weather-picker-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5em 0.8em;
	cursor: pointer;
	transition: background 0.15s;
	color: var(--text-color);
	gap: 0.4em;
}

.weather-picker-item:hover {
	background: var(--bg-panel-alt);
}

.weather-picker-active {
	background: var(--bg-panel-alt);
	border-left: 3px solid var(--accent-color);
}

.weather-picker-item-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.weather-picker-item-name small {
	color: var(--text-muted);
	margin-left: 0.3em;
}

.weather-picker-star {
	color: #e0a020;
	font-size: 0.8em;
	margin-right: 0.3em;
}

.weather-picker-remove {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 0.85em;
	cursor: pointer;
	padding: 0.2em 0.3em;
	transition: color 0.2s;
	flex-shrink: 0;
}

.weather-picker-remove:hover {
	color: #e66;
}

.weather-temp {
	font-size: 1.2em;
	font-weight: bold;
	color: var(--text-color);
}

.weather-desc {
	color: var(--text-muted);
	font-size: 0.8em;
}

.weather-extra {
	color: var(--text-muted);
	font-size: 0.75em;
}

.weather-extra i { margin-right: 0.15em; }

/* 3-Tage-Vorhersage */
.weather-forecast {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.5em;
	font-size: 0.88em;
	color: var(--text-muted);
}

.weather-forecast-day {
	display: flex;
	align-items: center;
	gap: 0.3em;
}

.weather-forecast-dayname {
	font-weight: 600;
	color: var(--text-color, #ccc);
}

.weather-forecast-icon {
	font-size: 1em;
	opacity: 0.85;
}

.weather-forecast-temps {
	white-space: nowrap;
}

.weather-forecast-lo {
	opacity: 0.6;
}

.weather-forecast-sep {
	opacity: 0.3;
	margin: 0 0.15em;
}

.weather-loading,
.weather-error {
	color: var(--text-muted);
	font-size: 0.85em;
	padding: 0.6em 1.2em;
}

/* ================================================================
   DROPDOWNS (Sprache + Theme)
   ================================================================ */

.lang-select,
.theme-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7em center;
	background-size: 0.6em;
	padding-right: 2em;
	min-width: 8em;
	cursor: pointer;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.3;
}

.lang-select:hover,
.theme-select:hover { color: var(--text-color); border-color: var(--border-color); }

.lang-select:focus,
.theme-select:focus { outline: 2px solid var(--accent-color, #0af); outline-offset: 2px; border-color: #666; }

.lang-select option,
.theme-select option {
	background: var(--bg-panel);
	color: var(--text-color);
	padding: 0.3em;
}

/* ================================================================
   FULLSCREEN-BUTTON
   ================================================================ */

#fullscreenBtn {
	font-size: 16px;
	padding: 1em;
	line-height: 1;
}

#fullscreenBtn:hover { color: var(--text-color); }

/* --- Fullscreen-Modus --- */

:fullscreen                { background: var(--bg-page); }
:fullscreen .top-bar       { margin-top: 0.5em; }
:-webkit-full-screen       { background: var(--bg-page); }
:-moz-full-screen          { background: var(--bg-page); }

/* ================================================================
   NEWS-TICKER
   ================================================================ */

.news-ticker {
	display: flex;
	align-items: center;
	background: var(--bg-panel-alt);
	border-top: 1px solid var(--border-color);
	padding: 0.5em 0;
	overflow: hidden;
	font-family: 'Courier New', monospace;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	font-size: 0.8rem;
	transition: var(--theme-transition);
}

.news-ticker-label {
	flex: 0 0 auto;
	padding: 0 1em;
	color: #e96;
	font-weight: bold;
	white-space: nowrap;
	border-right: 1px solid var(--border-color);
}

.news-ticker-label i { margin-right: 0.3em; }

.news-ticker-scroll {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.news-ticker-items {
	display: flex;
	white-space: nowrap;
	animation: ticker-scroll 60s linear infinite;
}

.news-ticker-items:hover {
	animation-play-state: paused;
}

.news-item {
	padding: 0 2em;
	color: var(--text-muted);
	white-space: nowrap;
	text-decoration: none;
}

a.news-item:hover {
	color: var(--text-color);
	text-decoration: underline;
}

.news-time {
	color: var(--text-muted);
	margin-right: 0.3em;
}

@keyframes ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* --- Sport-Ticker (oberhalb News) --- */

.sport-ticker {
	bottom: 2.2em;
	border-bottom: 1px solid var(--border-color);
}

.sport-ticker-label {
	color: #6c6;
}

/* ================================================================
   SETTINGS-PANEL
   ================================================================ */

/* --- Overlay (Hintergrund) --- */

.settings-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	justify-content: center;
	align-items: center;
}

.settings-overlay[style*="block"],
.settings-overlay.active {
	display: flex !important;
}

/* --- Panel --- */

.settings-panel {
	background: var(--bg-panel-alt);
	border: 1px solid var(--border-color);
	border-radius: 0.75em;
	padding: 1.5em 2em;
	max-width: 420px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	font-family: 'Courier New', monospace;
	color: var(--text-color);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	position: relative;
	transition: var(--theme-transition);
}

/* --- Header --- */

.settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.2em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid var(--border-color);
}

.settings-title {
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--text-color);
	letter-spacing: 0.05em;
}

.settings-title i {
	margin-right: 0.4em;
	color: var(--text-muted);
}

.settings-close-btn {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 1.2rem;
	cursor: pointer;
	padding: 0.3em;
	line-height: 1;
	transition: color 0.2s;
}

.settings-close-btn:hover {
	color: var(--text-color);
}

/* --- Modul-Liste --- */

.settings-module-list {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.settings-module-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.65em 0.8em;
	border-radius: 0.4em;
	cursor: pointer;
	transition: background 0.15s;
	user-select: none;
}

.settings-module-item:hover {
	background: var(--bg-panel);
}

.settings-module-label {
	font-size: 0.9rem;
	color: var(--text-color);
	flex: 1;
}

.settings-module-label i {
	width: 1.5em;
	text-align: center;
	margin-right: 0.5em;
	color: var(--text-muted);
}

/* --- Toggle Switch --- */

.settings-module-item input[type="checkbox"] {
	display: none;
}

.settings-switch {
	position: relative;
	width: 44px;
	height: 24px;
	background: var(--border-color);
	border-radius: 12px;
	flex-shrink: 0;
	transition: background 0.25s;
}

.settings-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: var(--text-muted);
	border-radius: 50%;
	transition: transform 0.25s, background 0.25s;
}

.settings-module-item input:checked + .settings-switch {
	background: #0a8a4a;
}

.settings-module-item input:checked + .settings-switch::after {
	transform: translateX(20px);
	background: #4caf50;
}

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

.settings-footer {
	display: flex;
	gap: 0.5em;
	justify-content: center;
	margin-top: 1.2em;
	padding-top: 0.75em;
	border-top: 1px solid var(--border-color);
}

.settings-action-btn {
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: 0.4em;
	color: var(--text-muted);
	font-family: 'Courier New', monospace;
	font-size: 0.8rem;
	padding: 0.5em 1em;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.settings-action-btn:hover {
	background: var(--bg-panel-alt);
	color: var(--text-color);
}

/* --- Settings-Button in Top-Bar --- */

#settingsBtn {
	font-size: 16px;
	padding: 1em;
	line-height: 1;
}

#settingsBtn:hover {
	color: var(--text-color);
}

/* ================================================================
   KALENDER-WIDGET
   ================================================================ */

.calendar-area {
	padding: 0.5em;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
}

/* --- Toolbar (Navigation + Aktionen) --- */

.calendar-toolbar {
	display: none;
	justify-content: space-between;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.2em;
}

.calendar-toolbar-actions {
	display: flex;
	gap: 0.3em;
	flex-shrink: 0;
}

.calendar-reload-btn,
.calendar-edit-btn {
	font-size: 0.78em !important;
	padding: 0.4em 0.6em !important;
}

/* --- Wochen-Navigation --- */

.calendar-week-nav {
	display: flex;
	align-items: center;
	gap: 0.3em;
	flex: 1;
	min-width: 0;
}

.calendar-nav-btn {
	font-size: 0.75em !important;
	padding: 0.35em 0.5em !important;
	min-width: 0 !important;
	flex-shrink: 0;
}

.calendar-nav-today {
	font-size: 0.72em !important;
	padding: 0.3em 0.6em !important;
	flex-shrink: 0;
}

.calendar-week-label {
	font-family: 'Courier New', monospace;
	font-size: 0.78em;
	color: var(--text-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	flex: 1;
}

/* --- Setup-Bereich --- */

.calendar-setup-content {
	padding: 0.5em 0;
	max-height: 60vh;
	overflow-y: auto;
}

.calendar-setup-panel {
	max-width: 500px;
}

.calendar-setup-title {
	margin: 0 0 0.6em;
	font-family: 'Courier New', monospace;
	font-size: 0.95em;
	color: var(--accent-color, #aaa);
}

.calendar-setup-hint {
	margin: 0 0 1em;
	font-family: 'Courier New', monospace;
	font-size: 0.8em;
	color: var(--text-muted);
}

.calendar-setup-form {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.calendar-setup-form label {
	font-family: 'Courier New', monospace;
	font-size: 0.85em;
	color: var(--text-muted);
}

/* --- Kalender-Manager-Liste --- */

.calendar-manager-list {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	margin-bottom: 0.8em;
}

.calendar-manager-empty {
	font-family: 'Courier New', monospace;
	font-size: 0.82em;
	color: var(--text-muted);
	margin: 0;
	padding: 0.5em 0;
}

.calendar-manager-item {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.6em;
	border: 1px solid var(--border-color);
	border-radius: 0.4em;
	font-family: 'Courier New', monospace;
	transition: background 0.15s, opacity 0.2s;
}

.calendar-manager-item.disabled {
	opacity: 0.45;
}

.calendar-manager-item .calendar-color-dot {
	width: 0.7em;
	height: 0.7em;
	flex-shrink: 0;
}

.calendar-manager-name {
	flex: 1;
	font-size: 0.85em;
	color: var(--text-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.calendar-manager-mode {
	font-size: 0.7em;
	color: var(--text-muted);
	padding: 0.15em 0.5em;
	border: 1px solid var(--border-color);
	border-radius: 0.3em;
	flex-shrink: 0;
}

.calendar-manager-toggle,
.calendar-manager-edit,
.calendar-manager-delete {
	font-size: 0.72em !important;
	padding: 0.35em 0.5em !important;
	min-width: 0 !important;
	flex-shrink: 0;
}

.calendar-manager-delete {
	color: #c66 !important;
	border-color: #633 !important;
}

.calendar-manager-delete:hover {
	background: rgba(204,68,68,0.15) !important;
	color: #e88 !important;
}

.calendar-manager-actions {
	flex-direction: row !important;
	margin-top: 0.3em;
}

.calendar-reset-row {
	margin-top: 0.8em;
	padding-top: 0.8em;
	border-top: 1px solid var(--border-color);
}

/* --- Formular-Wrapper (Add / Edit) --- */

.calendar-setup-form-wrap {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid var(--border-color);
}

.calendar-name-row {
	display: flex;
	gap: 0.5em;
	align-items: center;
}

.calendar-color-pick {
	width: 2.2em;
	height: 2.2em;
	padding: 0.15em;
	border: 1px solid var(--border-color);
	border-radius: 0.3em;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

.calendar-name-row .timetable-input {
	flex: 1;
}

/* --- Paste-Textarea --- */

.calendar-paste-area {
	font-family: 'Courier New', monospace;
	font-size: 0.8em;
	resize: vertical;
	min-height: 6em;
	max-height: 20em;
	background: var(--bg-panel-alt, #1a1a1a);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 0.3em;
	padding: 0.5em;
}

/* --- Proxy-Status Log --- */

.calendar-proxy-status {
	font-family: 'Courier New', monospace;
	font-size: 0.75em;
	padding: 0.4em 0.5em;
	margin-bottom: 0.4em;
	border: 1px solid var(--border-color);
	border-radius: 0.3em;
	background: rgba(0,0,0,0.2);
}

.proxy-log {
	padding: 0.15em 0;
	color: var(--text-muted);
}

.proxy-log.proxy-ok {
	color: #4caf50;
}

.proxy-log.proxy-fail {
	color: #c66;
}

.proxy-detail {
	color: var(--text-muted);
	font-size: 0.9em;
}

/* --- Event-Liste --- */

.calendar-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-height: 50vh;
	overflow-y: auto;
	scroll-behavior: smooth;
}

.calendar-day-header {
	font-family: 'Courier New', monospace;
	font-size: 0.85em;
	font-weight: bold;
	color: var(--accent-color, #aaa);
	padding: 0.8em 0.5em 0.3em;
	border-bottom: 1px solid var(--border-color);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color 0.3s, border-color 0.3s;
}

.calendar-day-header.calendar-day-today {
	color: var(--text-color);
	background: rgba(128, 128, 128, 0.1);
	border-left: 3px solid var(--accent-color, #4caf50);
	padding-left: calc(0.5em - 3px);
}

.calendar-event-empty {
	padding: 0.3em 0.5em !important;
	border-bottom: none !important;
}

.calendar-event-none {
	font-family: 'Courier New', monospace;
	font-size: 0.78em;
	color: var(--text-muted);
	font-style: italic;
}

.calendar-event {
	display: flex;
	align-items: flex-start;
	gap: 0.8em;
	padding: 0.6em 0.5em;
	border-bottom: 1px solid var(--border-color);
	font-family: 'Courier New', monospace;
	transition: background 0.2s, border-color 0.3s;
}

.calendar-event:hover {
	background: var(--bg-panel-alt, rgba(255,255,255,0.03));
}

.calendar-event-time {
	flex-shrink: 0;
	min-width: 6.5em;
	font-size: 0.85em;
	color: var(--text-color);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.calendar-color-dot {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	flex-shrink: 0;
}

.calendar-event-info {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.calendar-event-title {
	font-size: 0.9em;
	color: var(--text-color);
	word-break: break-word;
}

.calendar-event-location {
	font-size: 0.75em;
	color: var(--text-muted);
}

.calendar-event-location i {
	font-size: 0.7em;
	margin-right: 0.2em;
}

/* --- Mode-Umschalter (API / iCal) --- */

.calendar-mode-switch {
	display: flex;
	gap: 0;
	margin-bottom: 1em;
	border: 1px solid var(--border-color);
	border-radius: 0.4em;
	overflow: hidden;
}

.calendar-mode-btn {
	flex: 1;
	padding: 0.5em 0.8em;
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-family: 'Courier New', monospace;
	font-size: 0.82em;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	text-align: center;
}

.calendar-mode-btn:not(:last-child) {
	border-right: 1px solid var(--border-color);
}

.calendar-mode-btn:hover {
	color: var(--text-color);
	background: var(--bg-panel-alt, rgba(255,255,255,0.04));
}

.calendar-mode-btn.active {
	background: var(--accent-color, #555);
	color: #fff;
}

.calendar-setup-fields {
	margin-bottom: 0.5em;
}

.calendar-setup-actions {
	flex-direction: row !important;
	gap: 0.5em !important;
}

.calendar-setup-actions .button {
	flex: 1;
}

.calendar-reset-btn {
	background: transparent !important;
	border-color: #633 !important;
	color: #c66 !important;
}

.calendar-reset-btn:hover {
	background: rgba(204,68,68,0.15) !important;
	color: #e88 !important;
}

/* ================================================================
   SETTINGS – Admin-Bereich
   ================================================================ */

/* ---------- Settings Tabs ---------- */

.settings-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border-color, #333);
}

.settings-tab-btn {
	flex: 1;
	padding: 0.55rem 0.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--text-muted, #888);
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
}

.settings-tab-btn:hover {
	color: var(--text-color, #ccc);
}

.settings-tab-btn.settings-tab-active {
	color: var(--accent-color, #A1B1BA);
	border-bottom-color: var(--accent-color, #A1B1BA);
}

.settings-tab-btn i {
	font-size: 0.75rem;
}

.settings-tab-content {
	/* shown/hidden via JS */
}

/* ---------- Admin-Sections ---------- */

.settings-admin-section {
	margin-bottom: 1.25rem;
}

.settings-admin-section:last-child {
	margin-bottom: 0;
}

.settings-admin {
	border-top: 1px solid var(--border-color, #333);
	margin-top: 1rem;
	padding-top: 1rem;
}

.settings-admin-header {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--accent-color, #A1B1BA);
	margin-bottom: 0.75rem;
}

.settings-admin-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.settings-admin-field label {
	font-size: 0.8rem;
	color: var(--text-muted, #888);
	font-weight: 500;
}

.settings-admin-row {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.settings-admin-row input {
	flex: 1;
}

.settings-admin-hint {
	font-size: 0.75rem;
	color: var(--text-muted, #888);
	opacity: 0.7;
}

.settings-admin-status {
	display: none;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
}

.admin-status-ok {
	color: #4caf50;
	background: rgba(76, 175, 80, 0.1);
}

.admin-status-error {
	color: #e8606a;
	background: rgba(220, 53, 69, 0.1);
}

/* ---------- Admin: User-Verwaltung ---------- */

.admin-users-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.admin-user-item {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border-color, #333);
	border-radius: 8px;
	padding: 0.6rem 0.75rem;
}

.admin-user-item:first-child {
	margin-top: 0;
}

.admin-user-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.admin-user-name {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--text-color, #ccc);
}

.admin-user-username {
	font-size: 0.75rem;
	color: var(--text-muted, #888);
}

.admin-user-email {
	font-size: 0.75rem;
	color: var(--text-muted, #888);
	width: 100%;
}

.admin-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--accent-color, #A1B1BA);
	background: rgba(161, 177, 186, 0.15);
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.admin-user-actions {
	margin-top: 0.35rem;
}

.admin-user-actions .button {
	font-size: 0.75rem;
	padding: 0.2rem 0.5rem;
}

.admin-reset-pw-form {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.admin-reset-pw-form .admin-reset-pw-input {
	flex: 1;
	min-width: 120px;
	font-size: 0.85rem;
	padding: 0.4rem 0.6rem;
}

.admin-reset-pw-form .admin-reset-pw-submit {
	font-size: 0.75rem;
	padding: 0.35rem 0.6rem;
	white-space: nowrap;
}

.admin-reset-pw-status {
	display: none;
	font-size: 0.75rem;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	width: 100%;
}

.admin-reset-pw-status.admin-status-ok {
	display: block;
}

.admin-reset-pw-status.admin-status-error {
	display: block;
}

.admin-no-users {
	font-size: 0.8rem;
	color: var(--text-muted, #888);
	text-align: center;
	padding: 0.5rem;
}

/* ==========================================================================
   BGG – BoardGameGeek Collection Gallery
   ========================================================================== */

.bgg-area {
	padding: 0.5em;
	font-family: 'Courier New', monospace;
}

.bgg-toolbar {
	display: flex;
	align-items: center;
	padding: 0.3em 0.2em;
	gap: 0.3em;
}

.bgg-username-input {
	flex: 1;
	min-width: 0;
}

.bgg-filter-bar {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.2em 0.2em 0.4em;
}

.bgg-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}

.bgg-slider-row {
	gap: 0.4em;
}

.bgg-dual-slider {
	position: relative;
	flex: 1;
	min-width: 80px;
	height: 20px;
}

.bgg-dual-slider .bgg-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
	cursor: pointer;
}

.bgg-dual-slider .bgg-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent-color, #4a9eff);
	border: 2px solid #fff;
	pointer-events: all;
	cursor: pointer;
	position: relative;
	z-index: 2;
}

.bgg-dual-slider .bgg-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent-color, #4a9eff);
	border: 2px solid #fff;
	pointer-events: all;
	cursor: pointer;
}

.bgg-dual-slider .bgg-slider::-webkit-slider-runnable-track {
	height: 4px;
	background: var(--border-color, rgba(255,255,255,0.2));
	border-radius: 2px;
}

.bgg-dual-slider .bgg-slider::-moz-range-track {
	height: 4px;
	background: var(--border-color, rgba(255,255,255,0.2));
	border-radius: 2px;
}

.bgg-slider-label {
	font-size: 0.65em;
	color: var(--text-muted);
	white-space: nowrap;
	min-width: 7em;
	text-align: right;
}

.bgg-filter-reset-btn {
	padding: 0.15em 0.4em;
	font-size: 0.75em;
	opacity: 0.6;
	transition: opacity 0.2s;
}

.bgg-filter-reset-btn:hover {
	opacity: 1;
}

.bgg-filter-icon {
	color: var(--text-muted);
	font-size: 0.75em;
}

.bgg-filter-input {
	flex: 1;
	min-width: 0;
}

.bgg-filter-select {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 8em;
	font-size: 0.7em;
	padding: 0.25em 0.4em;
	cursor: pointer;
}

.bgg-sort-select {
	max-width: 10em;
}

/* --- Grid --- */

.bgg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.6em;
	max-height: 60vh;
	overflow-y: auto;
	padding: 0.3em;
}

/* --- Card --- */

.bgg-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: var(--text-color);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	will-change: transform;
}

.bgg-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	border-color: var(--accent-color);
}

/* --- Card Image --- */

.bgg-card-img-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bg-panel-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bgg-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bgg-card-no-img {
	font-size: 2.5em;
	color: var(--text-muted);
}

/* --- Card Info --- */

.bgg-card-info {
	padding: 0.4em;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.bgg-card-name {
	font-size: 0.6em;
	font-weight: bold;
	line-height: 1.2;
	height: 2.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bgg-card-meta {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	font-size: 0.5em;
	color: var(--text-muted);
}

.bgg-meta-item {
	white-space: nowrap;
}

.bgg-meta-item i {
	margin-right: 0.15em;
}

.bgg-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	margin-top: 0.2em;
}

.bgg-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.3em;
	height: 2.3em;
	font-size: 0.5em;
	color: #fff;
}

.bgg-badge-own      { background: #32ae27; }
.bgg-badge-trade    { background: #e8a735; }
.bgg-badge-wantplay { background: #e05577; }
.bgg-badge-wantbuy  { background: #4a9eff; }
.bgg-badge-wishlist { background: #9b59b6; }
.bgg-badge-preorder { background: #2ecc71; }
.bgg-badge-prevowned{ background: #7f8c8d; }

/* --- Ratings --- */

.bgg-rating-user {
	color: var(--accent-color);
	font-weight: bold;
}

.bgg-rating-user i,
.bgg-rating-avg i {
	font-size: 0.85em;
}

.bgg-rating-avg {
	color: var(--text-muted);
}

/* --- Count --- */

.bgg-count {
	text-align: center;
	font-size: 0.55em;
	color: var(--text-muted);
	padding: 0.6em 0;
}

/* --- States --- */

.bgg-error {
	text-align: center;
	padding: 2em 1em;
	color: #e55;
	font-size: 0.7em;
}

/* --- Setup hint --- */

.bgg-setup {
	text-align: center;
	padding: 2em 1em;
}

.bgg-setup-text {
	color: var(--text-muted);
	font-size: 0.7em;
	margin-bottom: 0.5em;
}

/* --- Manueller Import --- */

.bgg-manual-import {
	padding: 1em;
}

.bgg-manual-link {
	color: var(--accent-color);
	text-decoration: underline;
}

.bgg-manual-textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--bg-input);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 0.5em;
	font-family: 'Courier New', monospace;
	font-size: 0.55em;
	resize: vertical;
	margin: 0.5em 0;
}