/* =====================================================================
   Bachgau.Social-Design für Friendica/frio – helles Schema
   Nur aktiv bei frio-Schema „Benutzerdefiniert“.
   Grundidee wie auf bachgau.social: Tinte auf Papier, Orange nur sparsam
   (Wortmarke, Haupt-Buttons, Unterstreichung von Links in Beiträgen).
   Grundfarben kommen aus den frio-Einstellungen:
   Navigation #FFFFFF, Icons #17191C, Links #17191C, Hintergrund #F5F4F1
   ===================================================================== */

/* ---------- Text ---------- */
body {
	color: #17191C;
}
.text-muted,
.time,
.wall-item-ago,
.media time.notif-when {
	color: #5F646C;
}

/* ---------- Navigationsleiste: weiß mit feiner Linie statt Farbband ---------- */
#topbar-first,
nav.navbar {
	border-bottom: 1px solid #E4E2DD;
	box-shadow: none;
}
#topbar-first .nav > li > a:hover,
#topbar-first .nav > li > a:focus,
#topbar-first .nav > li > button:not(#main-menu):hover,
#topbar-first .nav > li > button:not(#main-menu):focus,
nav.navbar .nav > li > a:hover,
nav.navbar .nav > li > a:focus,
nav.navbar .nav > li > button:hover,
nav.navbar .nav > li > button:focus {
	background-color: #F5F4F1;
}

/* Wortmarke in Tinte, „.Social“ in Bachgau-Orange */
header #banner a::before,
#navbrand-container #navbar-brand-text::before {
	color: #17191C;
}
header #banner a::after,
#navbrand-container #navbar-brand-text::after {
	color: #C2410C;
}

/* ---------- Karten: Linie statt Schatten, wie die Kästen im Blog ---------- */
.panel,
aside .widget,
.nav-container .widget {
	box-shadow: none;
	-webkit-box-shadow: none;
	border: 1px solid #E4E2DD;
	border-radius: 6px;
}
aside .widget li:hover,
aside .widget li.selected,
.nav-container .widget li:hover {
	background-color: #F5F4F1;
}
aside .widget li.selected a {
	font-weight: 700;
}
hr {
	border-top-color: #E4E2DD;
}

/* ---------- Buttons: Haupt-Button orange wie „Newsletter abonnieren“ ---------- */
.btn.btn-primary,
.btn-primary.active,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary {
	background: #C2410C;
	color: #FFFFFF;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary:active:hover,
.btn-primary:active:focus {
	background: #9A3412;
	color: #FFFFFF;
}
.btn-default {
	background: #ECEAE5;
	color: #17191C;
}
.btn-default:hover,
.btn-default:focus {
	background: #E4E2DD;
	color: #17191C;
}

/* ---------- Ausklappmenüs (Konto, Reiter, Kontakt): Hover lesbar ----------
   frio setzt beim Drüberfahren weiße Schrift auf die abgedunkelte Navfarbe.
   Bei weißer Navigation ergibt das Weiß auf Hellgrau. */
.nav-pills .dropdown-menu li > a:hover,
.nav-pills .dropdown-menu li > button:hover,
.nav-tabs .dropdown-menu li > a:hover,
.account .dropdown-menu li > a:hover,
.contact-photo-wrapper .dropdown-menu li > a:hover,
.nav-pills .dropdown-menu li.selected a,
.nav-tabs .dropdown-menu li.selected a,
.account .dropdown-menu li.selected a,
#fc-header .dropdown-menu li button:hover,
#fc-header .dropdown-menu li button:focus,
.contact-photo-wrapper .dropdown-menu li.selected a {
	color: #17191C;
	background: #F5F4F1;
	border-left-color: #C2410C;
}
.nav-pills .dropdown-menu,
.nav-tabs .dropdown-menu,
.account .dropdown-menu,
.contact-photo-wrapper .dropdown-menu {
	border: 1px solid #E4E2DD;
	box-shadow: 0 6px 18px rgba(23, 25, 28, 0.08);
}
.nav-pills .dropdown-menu li.divider,
.nav-tabs .dropdown-menu li.divider,
.account .dropdown-menu li.divider,
.contact-photo-wrapper .dropdown-menu li.divider {
	background-color: #E4E2DD;
}

/* Upload-Button (Fotos, Profilbild) wie Haupt-Button */
.qq-upload-button {
	background: #C2410C !important;
	color: #FFFFFF !important;
}
.qq-upload-button:hover {
	background: #9A3412 !important;
}

/* ---------- Hashtags, Erwähnungen, Kategorien unter Beiträgen ----------
   frio: bunte Bootstrap-Labels (Info-Blau, Warn-Gelb) mit Graufilter.
   Hier: ruhige Papier-Chips in Tinte, Orange erst beim Drüberfahren. */
.wall-item-bottom .wall-item-tags span.label,
.wall-item-container .wall-item-bottom .wall-item-tags span.label,
.wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 0 4px 4px 0;
	padding: 3px 8px;
	background: #F5F4F1;
	border: 1px solid #E4E2DD;
	border-radius: 4px;
	color: #5F646C;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	filter: none;
	opacity: 1;
	text-shadow: none;
	box-shadow: none;
}
.wall-item-bottom .wall-item-tags span.label a,
.wall-item-container:hover .wall-item-bottom .wall-item-tags span.label a {
	color: #17191C;
	text-decoration: none;
}
/* Blitz-Symbol bei Hashtags weg, Personen-Symbol bei Erwähnungen dezent */
.wall-item-tags span.tag.label i.fa-bolt {
	display: none;
}
.wall-item-tags span.mention.label i {
	font-size: 10px;
	color: #7A7E85;
}
.wall-item-bottom .wall-item-tags span.label:hover {
	border-color: #C2410C;
	background: #FFFFFF;
}
.wall-item-bottom .wall-item-tags span.label:hover a {
	color: #C2410C;
}
/* Eigene Ablageordner bleiben erkennbar, aber ohne Signalrot */
.wall-item-bottom .wall-item-tags span.folder.label {
	border-style: dashed;
}

/* ---------- Links in Beiträgen: Tinte mit feiner oranger Unterstreichung ---------- */
html body .wall-item-content .wall-item-body a,
html body .desktop-view .wall-item-container .wall-item-content .wall-item-body a,
html body .wall-item-container:hover .wall-item-content .wall-item-body a,
html body .toplevel_item:hover .wall-item-content .wall-item-body a {
	color: #17191C;
	text-decoration: underline;
	text-decoration-color: rgba(194, 65, 12, 0.55);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
html body .wall-item-content .wall-item-body a:hover,
html body .wall-item-content .wall-item-body a:focus {
	color: #C2410C;
	text-decoration-color: #C2410C;
}

/* ---------- Eingabefelder ---------- */
.form-control {
	border-color: #E4E2DD;
	box-shadow: none;
}
.form-control:focus {
	border-color: #17191C;
	box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.2);
}

/* ---------- Textauswahl ---------- */
::selection {
	background: #FED7AA;
	color: #17191C;
}