/* Einzige UI-Palette. Hex-Werte nur hier ändern. */
:root
{
	--bg: #F4F8FB;
	--panel: #F4F8FB;
	--surface: #FFFFFF;
	--text: #121A24;
	--muted: #3A4654;
	--gold: #7A3A0C;
	--warn: #C9A000;
	--cyan: #084A8C;
	--green: #0D6B3C;
	--red: #9B1B1B;
	--line: #1E2A38;
	--btn-primary: #35556F;
	--btn-muted: #D2DDE8;
	--btn-text: #fff;
	--hover: var(--btn-muted);
	--input-bg: #FFFFFF;
	--track: color-mix(in srgb, var(--line) 8%, var(--bg));
	--track-alt: color-mix(in srgb, var(--line) 16%, var(--bg));
	--box-border: 3px;
	--bs-body-bg: var(--bg);
	--bs-body-color: var(--text);
}

html, body
{
	background: var(--bg) !important;
	color: var(--text) !important;
}

a
{
	color: var(--cyan);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible
{
	outline: 3px solid var(--cyan);
	outline-offset: 3px;
}

.global-header
{
	background: var(--panel) !important;
	border: var(--box-border) solid var(--line) !important;
	color: var(--text);
}

.hud-box
{
	color: var(--text) !important;
}

.hud-box span
{
	color: var(--gold) !important;
}

h1, h2, h3, h4
{
	color: var(--text);
	text-shadow: none;
}

.passbild
{
	border: 3px solid #fff !important;
	outline: 1px solid rgba(30, 42, 56, 0.22);
	background: #fff !important;
	border-radius: 1px !important;
	transform: rotate(-1deg);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		2px 3px 0 rgba(18, 26, 36, 0.14),
		4px 7px 11px rgba(18, 26, 36, 0.22) !important;
}

img.passbild,
.tp-person img,
.live-status-list img,
.ta-train-list img
{
	image-rendering: auto;
	image-rendering: smooth;
	image-rendering: high-quality;
	-ms-interpolation-mode: bicubic;
}

.eigenschaften-pizza-svg
{
	shape-rendering: geometricPrecision;
}

.passbild-btn:hover .passbild,
.passbild-btn:focus-visible .passbild
{
	border-color: #fff !important;
	transform: rotate(-1deg) translateY(-1px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		2px 4px 0 rgba(18, 26, 36, 0.14),
		5px 9px 14px rgba(18, 26, 36, 0.24),
		0 0 0 2px color-mix(in srgb, var(--cyan) 40%, transparent) !important;
}

.btn-buy,
.btn-primary
{
	background: var(--btn-primary) !important;
	border-color: var(--btn-primary) !important;
	color: var(--btn-text) !important;
}

.btn-buy:hover,
.btn-primary:hover,
.btn-main:hover,
.time-controls .btn-ctrl:hover
{
	filter: brightness(0.92);
}

.btn-fullscreen,
.btn-zirkus-home,
.btn-secondary,
.btn.secondary,
.btn-settings.secondary,
.se-btn.secondary,
.btn-skip-act,
.filter-btn,
.tp-btn,
.tool-btn,
.price-tab,
.wagen-filter-btn,
.besitz-filter-btn,
.fs-filter-btn,
.werbung-filter-btn,
.einkauf-nav-link,
.btn-track-ctrl,
.btn-swap,
.q-btn,
.futter-btn,
.se-row-btn,
.fk-tab
{
	background: var(--bg) !important;
	border: 2px solid var(--line) !important;
	color: var(--text) !important;
}

.btn-fullscreen:hover,
.btn-fullscreen:focus-visible,
.btn-zirkus-home:hover,
.btn-zirkus-home:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn.secondary:hover,
.btn-settings.secondary:hover,
.se-btn.secondary:hover,
.btn-skip-act:hover:not(:disabled),
.filter-btn:hover:not(.active),
.tp-btn:hover,
.tp-task:hover:not(.is-disabled),
.tool-btn:hover,
.price-tab:hover:not(.is-active),
.wagen-filter-btn:hover:not(.active),
.besitz-filter-btn:hover:not(.active),
.fs-filter-btn:hover:not(.active),
.werbung-filter-btn:hover:not(.active),
.einkauf-nav-link:hover:not(.active),
.btn-track-ctrl:hover,
.btn-swap:hover,
.q-btn:hover,
.futter-btn:hover,
.se-row-btn:hover:not(.se-btn-del):not(.se-btn-copy),
.settings-sub-card:hover,
.programm-sub-card:hover,
.save-list-item.selectable:hover,
.fk-tab:hover:not(.is-active)
{
	background: var(--hover) !important;
	color: var(--text) !important;
	border-color: var(--line) !important;
}

.tp-cal-cell:hover:not(.is-empty):not(.is-selected)
{
	background: var(--hover) !important;
	color: var(--text) !important;
	border-color: var(--cyan) !important;
}

.tp-cal-cell.is-selected:hover:not(.is-empty)
{
	background: color-mix(in srgb, var(--gold) 32%, var(--bg)) !important;
	color: var(--text) !important;
	border-color: var(--gold) !important;
}

.filter-btn.active,
.wagen-filter-btn.active,
.besitz-filter-btn.active,
.fs-filter-btn.active,
.werbung-filter-btn.active,
.einkauf-nav-link.active,
.tool-btn.active,
.price-tab.is-active
{
	background: color-mix(in srgb, var(--cyan) 12%, var(--bg)) !important;
	color: var(--cyan) !important;
	border-color: var(--cyan) !important;
}

.fk-tab.is-active
{
	background: color-mix(in srgb, var(--gold) 12%, var(--bg)) !important;
	color: var(--gold) !important;
	border-color: var(--gold) !important;
}

.time-controls .btn-ctrl
{
	background: var(--btn-primary) !important;
	color: var(--btn-text) !important;
}

.time-controls .btn-ctrl.is-blocked
{
	opacity: 0.5;
	cursor: not-allowed;
	background: #8a8fbc !important;
	color: #fff !important;
	filter: grayscale(0.25);
}

.time-controls .btn-ctrl.is-blocked:hover
{
	filter: grayscale(0.25);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="color"]),
select,
textarea
{
	background: var(--input-bg);
	color: var(--text);
	border-color: var(--line);
}

.fk-tab:hover:not(.is-active),
.fk-row:hover,
.fk-table tbody tr:hover,
.tp-row:hover
{
	background: var(--hover);
}

.fk-card:hover
{
	background: color-mix(in srgb, var(--cyan) 6%, var(--bg));
	border-color: var(--cyan);
}

.inventory-panel
{
	background: var(--surface) !important;
	color: var(--text) !important;
	border-color: var(--line) !important;
}

.item-card
{
	background: var(--surface);
	color: var(--text);
	border-color: var(--line);
}

.inventory-panel.is-unterwegs
{
	background: color-mix(in srgb, var(--gold) 14%, var(--surface)) !important;
	border-color: var(--gold) !important;
}

.inventory-panel.is-warn
{
	background: color-mix(in srgb, var(--red) 12%, var(--surface)) !important;
	border-color: var(--red) !important;
}

#zirkusModal .modal-content,
#zirkusSaveDialog .modal-content,
#zirkusLoadDialog .modal-content,
#zirkusMonatsabrechnungDialog .modal-content,
#zirkusVorschlagDialog .modal-content,
#admin-vorschlag-dialog .modal-content,
#zirkusLevelUpDialog .modal-content
{
	background: var(--surface);
	color: var(--text);
	border: var(--box-border) solid var(--line);
}

#zirkusModal .modal-header,
#zirkusModal .modal-footer,
#zirkusSaveDialog .modal-header,
#zirkusSaveDialog .modal-footer,
#zirkusLoadDialog .modal-header,
#zirkusLoadDialog .modal-footer,
#zirkusMonatsabrechnungDialog .modal-header,
#zirkusMonatsabrechnungDialog .modal-footer,
#zirkusVorschlagDialog .modal-header,
#zirkusVorschlagDialog .modal-footer,
#admin-vorschlag-dialog .modal-header,
#admin-vorschlag-dialog .modal-footer,
#zirkusLevelUpDialog .modal-header,
#zirkusLevelUpDialog .modal-footer
{
	border-color: var(--line);
}

#zirkusSaveDialog .modal-title,
#zirkusLoadDialog .modal-title,
#zirkusMonatsabrechnungDialog .modal-title,
#zirkusVorschlagDialog .modal-title,
#admin-vorschlag-dialog .modal-title,
#zirkusLevelUpDialog .modal-title
{
	color: var(--text);
}

#zirkusSaveDialog .btn-close,
#zirkusLoadDialog .btn-close,
#zirkusMonatsabrechnungDialog .btn-close,
#zirkusVorschlagDialog .btn-close,
#admin-vorschlag-dialog .btn-close,
#zirkusLevelUpDialog .btn-close
{
	filter: none;
	opacity: 0.85;
}

#zirkusSaveDialog .btn-secondary,
#zirkusLoadDialog .btn-secondary,
#zirkusVorschlagDialog .btn-secondary,
#admin-vorschlag-dialog .btn-secondary
{
	background: var(--bg);
	border: 2px solid var(--line);
	color: var(--text);
	font-weight: bold;
}

#vorschlag-text,
.save-name-input
{
	background: var(--input-bg);
	color: var(--text);
	border: 2px solid var(--line);
}

#vorschlag-bereich
{
	color: var(--gold);
}

.save-list-empty,
.save-list-meta
{
	color: var(--muted);
}

.save-list-item
{
	background: var(--bg);
	border: 2px solid var(--line);
	color: var(--text);
}

.save-list-item strong
{
	color: var(--text);
}

#zirkusModal[data-variant="danger"] .modal-content
{
	background: color-mix(in srgb, var(--red) 12%, var(--surface));
}

#zirkusModal[data-variant="warning"] .modal-content
{
	background: color-mix(in srgb, var(--warn) 12%, var(--surface));
}

#zirkusModal .modal-header.bg-danger
{
	background: color-mix(in srgb, var(--red) 12%, var(--surface)) !important;
	color: var(--red) !important;
	border-bottom-color: var(--red);
}

#zirkusModal .modal-header.bg-warning
{
	background: color-mix(in srgb, var(--warn) 12%, var(--surface)) !important;
	color: var(--warn) !important;
	border-bottom-color: var(--warn);
}

#zirkusModal .btn-close
{
	filter: none;
}