/*
 * Theme für Bootstrap 5.3: Firmenfarbe als Primärfarbe, modernisierte
 * Grundoptik und Dark-Mode-Anpassungen. Wird nach bootstrap.min.css geladen.
 */

:root {
	--brand: #294462;
	--brand-dark: #1e3348;
	--brand-rgb: 41, 68, 98;
	/* Hellere Brand-Variante für Links/Pagination im Dark Mode (Kontrast) */
	--brand-light: #8fb0d4;

	--bs-primary: var(--brand);
	--bs-primary-rgb: var(--brand-rgb);
	--bs-link-color: var(--brand);
	--bs-link-color-rgb: var(--brand-rgb);
	--bs-link-hover-color: var(--brand-dark);
	--bs-link-hover-color-rgb: 30, 51, 72;
}

/* Bootstrap 5 unterstreicht Links per Default — nur beim Hover unterstreichen */
a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.btn-primary {
	--bs-btn-bg: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand-dark);
	--bs-btn-hover-border-color: var(--brand-dark);
	--bs-btn-active-bg: var(--brand-dark);
	--bs-btn-active-border-color: var(--brand-dark);
	--bs-btn-disabled-bg: var(--brand);
	--bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-primary {
	--bs-btn-color: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand);
	--bs-btn-hover-border-color: var(--brand);
	--bs-btn-active-bg: var(--brand);
	--bs-btn-active-border-color: var(--brand);
}

.pagination {
	--bs-pagination-color: var(--brand);
	--bs-pagination-hover-color: var(--brand-dark);
	--bs-pagination-focus-color: var(--brand-dark);
	--bs-pagination-active-bg: var(--brand);
	--bs-pagination-active-border-color: var(--brand);
}

.form-control:focus,
.form-select:focus {
	border-color: rgba(var(--brand-rgb), .5);
	box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

.form-check-input:checked {
	background-color: var(--brand);
	border-color: var(--brand);
}

/* ---- Grundoptik ---- */

h1 {
	margin-bottom: 1.25rem;
}

.card {
	border: 0;
	box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .12);
}

.card .btn-primary {
	border-radius: .375rem;
}

.table {
	--bs-table-hover-bg: rgba(var(--brand-rgb), .04);
}

/* Breiter, linksbündiger Info-Tooltip in Firmenfarbe (Raumkarten) */
.tooltip-inner {
	max-width: 550px;
	width: 450px;
	text-align: left;
	/* Feste Farben, damit der Tooltip in Hell und Dunkel gleich lesbar bleibt */
	--bs-tooltip-bg: var(--brand);
	--bs-tooltip-color: #fff;
	background-color: var(--brand);
	color: #fff;
}

.tooltip.show {
	opacity: .96;
}

/* Info-Icon auf den Raumkarten in Firmenfarbe */
.info-icon {
	color: var(--brand);
	cursor: pointer;
}

/* ---- Dark Mode ---- */

[data-bs-theme="dark"] {
	--bs-link-color: var(--brand-light);
	--bs-link-color-rgb: 143, 176, 212;
	--bs-link-hover-color: #b3cbe6;
	--bs-link-hover-color-rgb: 179, 203, 230;
}

[data-bs-theme="dark"] .card {
	background-color: var(--bs-secondary-bg);
	box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .6);
}

/* Hinweisboxen (bg-light) im Dark Mode abdunkeln, sonst hell auf hell */
[data-bs-theme="dark"] .bg-light {
	background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .pagination {
	--bs-pagination-color: var(--brand-light);
	--bs-pagination-hover-color: #b3cbe6;
	--bs-pagination-focus-color: #b3cbe6;
}

/* Auf dunklen Karten ist das dunkle Firmenblau kaum sichtbar -> hellere Variante */
[data-bs-theme="dark"] .info-icon {
	color: var(--brand-light);
}

/*
 * FullCalendar (Classic Theme) und der jQuery-UI-Dialog bringen eigenes,
 * helles CSS mit. Der Kalender wird im Dark Mode als helle Insel gerendert,
 * damit er lesbar bleibt.
 */
[data-bs-theme="dark"] #calendar {
	background-color: #fff;
	color: #212529;
	padding: .5rem;
	border-radius: .5rem;
}

/* ---- FullCalendar v7: Toolbar-Buttons (Heute/Zurück/Vor) in Firmenfarbe ----
   Das Classic-Theme wird über eigene CSS-Variablen eingefärbt. */
#calendar {
	--fc-classic-button: var(--brand);
	--fc-classic-button-border: var(--brand);
	--fc-classic-button-strong: var(--brand-dark);
	--fc-classic-button-strong-border: var(--brand-dark);
	--fc-classic-button-foreground: #fff;
	--fc-classic-primary: var(--brand);
	--fc-classic-primary-foreground: #fff;
}

/* ---- Buchungsdialog (jQuery UI) an das CI angleichen ---- */
.ui-dialog {
	border: 0;
	border-radius: .5rem;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
	padding: 0;
	overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
	background: var(--brand);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: .6rem 1rem;
	position: relative;
}

.ui-dialog .ui-dialog-title {
	font-weight: 600;
}

.ui-dialog .ui-dialog-content {
	padding: 1rem;
}

/* Schließen-Button: sichtbares "×" statt des fehlenden Icon-Sprites */
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.75rem;
	height: 1.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: .25rem;
	cursor: pointer;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
	display: none;
}

.ui-dialog .ui-dialog-titlebar-close::before {
	content: "\00d7";
	display: block;
	font-size: 1.4rem;
	line-height: 1.75rem;
	text-align: center;
	color: #fff;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
	background: rgba(255, 255, 255, .2);
}

/* Dialog-Buttons wie Bootstrap-Buttons (abgerundet, Firmenfarbe) */
.ui-dialog .ui-dialog-buttonpane {
	border: 0;
	background: transparent;
	margin: 0;
	padding: .25rem 1rem 1rem;
}

/* jQuery UI wendet hier kein Button-Widget an -> die Buttons sind schlichte
   <button>-Elemente ohne .ui-button-Klasse; daher direkt das Element ansprechen.
   appearance:none nötig, sonst behalten native <button> ihr graues Aussehen. */
.ui-dialog .ui-dialog-buttonpane button {
	-webkit-appearance: none;
	appearance: none;
	border-radius: .375rem;
	padding: .375rem 1rem;
	margin-left: .5rem;
	font-weight: 400;
	/* Standard = Primäraktion (auswählen) in Firmenfarbe */
	background: var(--brand);
	border: 1px solid var(--brand);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: #fff;
}

/* "abbrechen" (zweiter Button) = zurückhaltend (Outline) */
.ui-dialog .ui-dialog-buttonpane button:last-child {
	background: transparent;
	border: 1px solid #6c757d;
	color: #6c757d;
}

.ui-dialog .ui-dialog-buttonpane button:last-child:hover {
	background: #6c757d;
	border-color: #6c757d;
	color: #fff;
}