/* bitflinx – Erscheinungsbild für Desk, Login und Webseiten.
   Wird nach den Frappe-Stilen geladen und überschreibt deren CSS-Variablen.
   Hausfarben: Blau #009fe3, Anthrazit #424e53. */

:root {
	--bf-blau: #009fe3;
	--bf-blau-dunkel: #0083bb;
	--bf-blau-hell: #e5f5fc;
	--bf-anthrazit: #424e53;
	--bf-anthrazit-hell: #6b777c;
	--bf-grau: #c6c5c0;
}

/* ---------------------------------------------------------------- hell */

/* nicht :root allein -- das gilt auch im Dunkelmodus und wuerde dessen Schriftfarben ueberschreiben */
:root:not([data-theme="dark"]) {
	/* Blau: alles, was man anklicken kann */
	--primary: var(--bf-blau);
	--primary-color: var(--bf-blau);
	--brand-color: var(--bf-blau);
	--btn-primary: var(--bf-blau);
	--border-primary: var(--bf-blau);
	--checkbox-color: var(--bf-blau);
	--sidebar-select-color: var(--bf-blau-hell);

	/* Anthrazit: Schrift und Überschriften */
	--heading-color: var(--bf-anthrazit);
	--text-color: var(--bf-anthrazit);
	--ink-gray-9: var(--bf-anthrazit);
	--ink-gray-8: var(--bf-anthrazit);
	--text-muted: var(--bf-anthrazit-hell);
}

/* ---------------------------------------------------------------- dunkel */

[data-theme="dark"] {
	--primary: var(--bf-blau);
	--primary-color: var(--bf-blau);
	--brand-color: var(--bf-blau);
	--btn-primary: var(--bf-blau);
	--border-primary: var(--bf-blau);
	--checkbox-color: var(--bf-blau);
	--sidebar-select-color: #0b3346;
}

/* ---------------------------------------------------------------- Knöpfe und Links */

/* Primärknöpfe: weiße Schrift auch im Dunkelmodus, dunkleres Blau beim Überfahren */
.btn.btn-primary {
	color: #fff;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
	background-color: var(--bf-blau-dunkel);
	color: #fff;
}
.btn.btn-primary:active {
	background-color: var(--bf-blau-dunkel) !important;
	color: #fff !important;
}

/* Links im Inhalt */
.frappe-control a:not(.btn),
.ql-editor a,
.form-dashboard a:not(.btn) {
	color: var(--bf-blau-dunkel);
}

/* ---------------------------------------------------------------- Seitenleiste */

/* Gewählter Eintrag: blaue Schrift auf hellblauem Grund */
.body-sidebar .active-sidebar,
.body-sidebar .active-sidebar .sidebar-item-label,
.body-sidebar .active-sidebar .icon {
	color: var(--bf-blau-dunkel);
	--icon-stroke: var(--bf-blau-dunkel);
}
.body-sidebar .active-sidebar {
	background-color: var(--bf-blau-hell);
}
[data-theme="dark"] .body-sidebar .active-sidebar,
[data-theme="dark"] .body-sidebar .active-sidebar .sidebar-item-label,
[data-theme="dark"] .body-sidebar .active-sidebar .icon {
	color: #fff;
	--icon-stroke: #fff;
}
[data-theme="dark"] .body-sidebar .active-sidebar {
	background-color: #0b3346;
}

/* ---------------------------------------------------------------- Startbildschirm (/desk) */

/* Oben links: ganzes Logo statt Frappe-Symbol (Frappe liest es sonst aus den Navbar Settings) */
#brand-logo {
	content: url("logo.png");
	width: auto;
	height: 28px;
	max-width: 200px;
}

/* Groß über den Kacheln (Frappe legt den Container als Zeile an, hier untereinander).
   Mit Elternklasse, weil Frappe desktop.css erst nach dieser Datei nachlaedt. */
.desktop-wrapper .desktop-container {
	flex-direction: column;
}
.desktop-container::before {
	content: "";
	display: block;
	flex: none;
	width: min(420px, 80vw);
	height: 72px;
	margin: 40px auto 0;
	background: url("logo.png") center / contain no-repeat;
}
.desktop-wrapper .desktop-container > .icons-container {
	margin-top: 24px;
}

/* Dunkelmodus: das Logo hat anthrazitfarbene Schrift, deshalb auf hellem Grund */
[data-theme="dark"] #brand-logo {
	background: #fff;
	border-radius: 6px;
	padding: 3px 6px;
	height: 34px;
}
[data-theme="dark"] .desktop-container::before {
	background-color: #fff;
	background-origin: content-box;
	padding: 12px 20px;
	border-radius: 12px;
	box-sizing: content-box;
}

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

/* Anmeldeknopf in der Hausfarbe (Frappe setzt ihn fest auf Schwarz) */
body .page-card .page-card-actions .btn.btn-login {
	background-color: var(--bf-blau);
	border-color: var(--bf-blau);
	color: #fff;
}
body .page-card .page-card-actions .btn.btn-login:hover,
body .page-card .page-card-actions .btn.btn-login:focus {
	background-color: var(--bf-blau-dunkel);
	border-color: var(--bf-blau-dunkel);
	color: #fff;
}

/* Breites Logo statt quadratischem Symbol, Überschrift in Anthrazit */
.page-card-head .app-logo,
.for-login .app-logo {
	width: auto;
	max-width: 240px;
	height: auto;
	max-height: 48px;
}
.page-card-head h4,
.page-card-head .page-card-title {
	color: var(--bf-anthrazit);
}