/* Markenauftritt Autoservice.Krienelke GmbH
 *
 * Farben aus dem Logo gemessen (logo.png, Pixelanalyse):
 *   Orange #E94A14 - Akzent, Schaltflaechen, Verweise
 *   Grau   #727170 - Wortmarke "AUTOSERVICE."
 *
 * Paperless 3.2.1 bietet fuer die Akzentfarbe weder ein Feld in der
 * Anwendungskonfiguration noch eines in der Oberflaeche; die benutzerbezogene
 * Einstellung greift nicht zuverlaessig und gaelte ohnehin nur je Konto.
 * Deshalb global ueber den Proxy eingebunden - wirkt fuer alle Konten,
 * auch fuer kuenftige.
 *
 * Die Kopfleiste ist hell, weil das Logo fuer hellen Grund gezeichnet ist.
 * Gemessen auf dunkelgrauem Grund erreicht die graue Wortmarke nur 2,37:1
 * und das Orange 2,99:1 - beides zu schwach. Auf Weiss sind es 4,87:1
 * und 3,85:1. Den Markenakzent traegt stattdessen eine orangefarbene
 * Leiste unter der Kopfzeile sowie alle Schaltflaechen und Verweise.
 *
 * Im Dunkelmodus bleibt die Kopfzeile dunkel; das Logo wird dort per
 * Helligkeitsfilter aufgehellt, damit die Wortmarke lesbar bleibt und
 * das Orange leuchtet.
 */

:root,
:root[data-bs-theme='light'],
:root[data-bs-theme='dark'] {
  --pngx-primary: 15.2, 84.2%;
  --pngx-primary-lightness: 49.6%;

  --krienelke-orange: #e94a14;
  --krienelke-orange-dunkel: #c73d10;
  --krienelke-grau: #727170;
  --krienelke-kopfleiste: #3a3938;

  --bs-primary: var(--krienelke-orange);
  --bs-primary-rgb: 233, 74, 20;
  --bs-link-color: var(--krienelke-orange-dunkel);
  --bs-link-hover-color: var(--krienelke-orange);
  --bs-link-color-rgb: 199, 61, 16;
}

/* Kopfleiste hell - dafuer ist das Logo gezeichnet.
   Der orangefarbene Abschluss unten setzt den Markenakzent. */
.navbar,
nav.navbar,
.navbar.sticky-top {
  background-color: #ffffff !important;
  border-bottom: 3px solid var(--krienelke-orange) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.navbar .navbar-brand,
.navbar .navbar-brand small {
  color: var(--krienelke-grau) !important;
}

.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .btn-link {
  color: #4a4948 !important;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
  color: var(--krienelke-orange) !important;
}

/* Suchfeld an die helle Leiste anpassen */
.navbar .form-control,
.navbar .input-group .form-control {
  background-color: #f3f2f1 !important;
  border-color: #dedcda !important;
  color: #2f2e2d !important;
}
.navbar .form-control::placeholder { color: #8a8887 !important; }
.navbar .form-control:focus {
  background-color: #fff !important;
  border-color: var(--krienelke-orange) !important;
}
.navbar .input-group .btn {
  border-color: #dedcda !important;
  color: #4a4948 !important;
}

/* Dunkelmodus: Leiste dunkel, Logo aufgehellt damit es traegt.
   Paperless setzt data-bs-theme auf "auto", wenn es der Systemeinstellung
   folgt - dieser Fall braucht zusaetzlich eine Medienabfrage, sonst
   greift die Regel genau dann nicht, wenn sie gebraucht wird. */
@media (prefers-color-scheme: dark) {
  :root[data-bs-theme='auto'] .navbar,
  :root[data-bs-theme='auto'] nav.navbar {
    background-color: var(--krienelke-kopfleiste) !important;
    border-bottom-color: var(--krienelke-orange) !important;
  }
  :root[data-bs-theme='auto'] .navbar .navbar-brand,
  :root[data-bs-theme='auto'] .navbar .navbar-brand small,
  :root[data-bs-theme='auto'] .navbar .nav-link,
  :root[data-bs-theme='auto'] .navbar .dropdown-toggle {
    color: #f6f6f6 !important;
  }
  :root[data-bs-theme='auto'] .navbar .navbar-brand img {
    filter: brightness(1.65);
  }
  :root[data-bs-theme='auto'] .navbar .form-control {
    background-color: #2b2a29 !important;
    border-color: #4a4948 !important;
    color: #f1f0ef !important;
  }
  :root[data-bs-theme='auto'] main a:not(.btn):not(.sidebaritem),
  :root[data-bs-theme='auto'] .card-body a:not(.btn) { color: #ff7a4d; }
}

:root[data-bs-theme='dark'] .navbar,
:root[data-bs-theme='dark'] nav.navbar {
  background-color: var(--krienelke-kopfleiste) !important;
  border-bottom-color: var(--krienelke-orange) !important;
}
:root[data-bs-theme='dark'] .navbar .navbar-brand,
:root[data-bs-theme='dark'] .navbar .navbar-brand small,
:root[data-bs-theme='dark'] .navbar .nav-link,
:root[data-bs-theme='dark'] .navbar .dropdown-toggle {
  color: #f6f6f6 !important;
}
:root[data-bs-theme='dark'] .navbar .navbar-brand img {
  filter: brightness(1.65);
}
:root[data-bs-theme='dark'] .navbar .form-control {
  background-color: #2b2a29 !important;
  border-color: #4a4948 !important;
  color: #f1f0ef !important;
}

/* Logo etwas groesser, damit die Wortmarke lesbar bleibt */
.navbar .navbar-brand img {
  max-height: 2.4rem;
  width: auto;
}

/* Schaltflaechen in Markenorange */
.btn-primary {
  --bs-btn-bg: var(--krienelke-orange);
  --bs-btn-border-color: var(--krienelke-orange);
  --bs-btn-hover-bg: var(--krienelke-orange-dunkel);
  --bs-btn-hover-border-color: var(--krienelke-orange-dunkel);
  --bs-btn-active-bg: var(--krienelke-orange-dunkel);
  --bs-btn-active-border-color: var(--krienelke-orange-dunkel);
  --bs-btn-disabled-bg: var(--krienelke-orange);
  --bs-btn-disabled-border-color: var(--krienelke-orange);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--krienelke-orange-dunkel);
  --bs-btn-border-color: var(--krienelke-orange);
  --bs-btn-hover-bg: var(--krienelke-orange);
  --bs-btn-hover-border-color: var(--krienelke-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--krienelke-orange-dunkel);
  --bs-btn-active-border-color: var(--krienelke-orange-dunkel);
}

/* Ausgewaehlte Eintraege in der Seitenleiste */
.sidebaritem.active,
.list-group-item.active,
.nav-pills .nav-link.active {
  background-color: rgba(233, 74, 20, 0.12) !important;
  color: var(--krienelke-orange-dunkel) !important;
  border-color: rgba(233, 74, 20, 0.35) !important;
}

.sidebaritem.active .sidebaricon,
.nav-pills .nav-link.active .sidebaricon {
  color: var(--krienelke-orange) !important;
}

/* Fortschritt, Auswahl, Fokus */
.progress-bar { background-color: var(--krienelke-orange) !important; }
.form-check-input:checked {
  background-color: var(--krienelke-orange);
  border-color: var(--krienelke-orange);
}
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: var(--krienelke-orange);
  box-shadow: 0 0 0 0.2rem rgba(233, 74, 20, 0.25);
}
/* Verweise nur im Inhaltsbereich einfaerben. Eine pauschale a-Regel traf
   auch die Seitenleiste und faerbte im Dunkelmodus die komplette Navigation
   orange, weil sie dort Paperless' eigene Regel ueberholt. */
main a:not(.btn):not(.nav-link):not(.sidebaritem),
.main-content a:not(.btn):not(.nav-link):not(.sidebaritem),
.card-body a:not(.btn) {
  color: var(--krienelke-orange-dunkel);
}
main a:not(.btn):hover,
.main-content a:not(.btn):hover,
.card-body a:not(.btn):hover {
  color: var(--krienelke-orange);
}

/* Seitenleiste bleibt neutral - nur der aktive Eintrag traegt die Marke */
.sidebaritem,
.sidebaritem .sidebaricon,
nav .list-group-item:not(.active) {
  color: inherit;
}

/* Dunkelmodus: Verweise heller, damit sie lesbar bleiben */
:root[data-bs-theme='dark'] main a:not(.btn):not(.sidebaritem),
:root[data-bs-theme='dark'] .card-body a:not(.btn) { color: #ff7a4d; }
:root[data-bs-theme='dark'] main a:not(.btn):hover { color: var(--krienelke-orange); }
:root[data-bs-theme='dark'] .sidebaritem.active,
:root[data-bs-theme='dark'] .list-group-item.active {
  background-color: rgba(233, 74, 20, 0.22) !important;
  color: #ffb199 !important;
}