/* ═══════════════════════════════════════════════════════════════════════════
   Szata panelu Nasza Sfora — barwy strony naszasfora.pl i aplikacji (dział
   behawiorystyki RMDN: szałwia, lawenda; NaszaSforaMAUI\Resources\Styles\Colors.xaml).

   Ładowany przez ThemeSwitcher → CustomUrls (appsettings.json) razem z motywem
   Fluent, którego akcent (#6E9C7C) barwi przyciski główne, zaznaczenia i linki.

   UWAGA NA KOLEJNOŚĆ: XAF dokłada swój styles.css PO tym pliku — selektory zaczynają
   się od body.dxbl-theme-fluent (wyższa szczegółowość). Klasy z drzewa strony XAF
   26.1.5: .header, .btn-header, .xaf-sidebar, .xaf-navmenu, .main-toolbar,
   .logon-template-header, .logon-template-body. Wzór: NaszePrzepisy przepisy.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ns-szalwia: #6E9C7C;          /* pasek, akcent (ciemna szałwia — kontrast z bielą) */
  --ns-szalwia-ciemna: #4A6B52;   /* tekst aktywnej pozycji menu */
  --ns-szalwia-jasna: #DCEDE2;
  --ns-lawenda: #6E6EAD;          /* „Nowy” — akcent aplikacji */
  --ns-lawenda-ciemna: #5B5B96;
  --ns-lawenda-jasna: #EDEDF8;
  --ns-tlo: #F7F8FB;
  --ns-linia: #E3E5EE;
}

/* ── Tło aplikacji jak strona; karty i siatki zostają białe ──────────────── */
body.dxbl-theme-fluent,
body.dxbl-theme-fluent .app {
  background-color: var(--ns-tlo);
}

/* ── Pasek górny w szałwii, białe ikony (maski w kolorze tekstu) ─────────── */
body.dxbl-theme-fluent .app > .header {
  background-color: var(--ns-szalwia);
  color: #fff;
  border-bottom: 0;
}
body.dxbl-theme-fluent .app > .header .btn-header,
body.dxbl-theme-fluent .app > .header .xaf-view-caption-lg,
body.dxbl-theme-fluent .app > .header .header-logo {
  color: #fff;
}
body.dxbl-theme-fluent .app > .header .btn-header:hover,
body.dxbl-theme-fluent .app > .header .btn-header:focus-visible {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
body.dxbl-theme-fluent .app > .header .xaf-caption-icon-container {
  background-color: #fff;
  border-radius: 5px;
}

/* ── Menu boczne ─────────────────────────────────────────────────────────── */
body.dxbl-theme-fluent .app .xaf-sidebar {
  background-color: var(--ns-tlo);
  border-right: 1px solid var(--ns-linia);
}
body.dxbl-theme-fluent .xaf-navmenu .dxbl-treeview-item-container:hover {
  background-color: rgba(110, 156, 124, 0.10);
}
body.dxbl-theme-fluent .xaf-navmenu .dxbl-treeview-item-container.dxbl-active {
  background-color: var(--ns-szalwia-jasna);
  color: var(--ns-szalwia-ciemna);
  font-weight: 600;
}

/* ── „Nowy” w lawendzie, ikona przemalowana na biało ─────────────────────── */
body.dxbl-theme-fluent .main-toolbar [data-action-name="Nowy"],
body.dxbl-theme-fluent .dxbl-popup [data-action-name="Nowy"] {
  background-color: var(--ns-lawenda);
  border-color: var(--ns-lawenda);
  color: #fff;
}
body.dxbl-theme-fluent .main-toolbar [data-action-name="Nowy"]:hover,
body.dxbl-theme-fluent .dxbl-popup [data-action-name="Nowy"]:hover {
  background-color: var(--ns-lawenda-ciemna);
  border-color: var(--ns-lawenda-ciemna);
  color: #fff;
}
body.dxbl-theme-fluent .main-toolbar [data-action-name="Nowy"] img,
body.dxbl-theme-fluent .main-toolbar [data-action-name="Nowy"] svg,
body.dxbl-theme-fluent .dxbl-popup [data-action-name="Nowy"] img,
body.dxbl-theme-fluent .dxbl-popup [data-action-name="Nowy"] svg {
  filter: brightness(0) invert(1);
}

/* ── Ekran logowania jak powitanie na stronie ────────────────────────────── */
body.dxbl-theme-fluent:has(.logon-template-body) {
  background:
    radial-gradient(760px 380px at 12% -10%, var(--ns-szalwia-jasna) 0%, rgba(220, 237, 226, 0) 62%),
    radial-gradient(620px 320px at 92% 0%, var(--ns-lawenda-jasna) 0%, rgba(237, 237, 248, 0) 60%),
    var(--ns-tlo);
}
body.dxbl-theme-fluent:has(.logon-template-body) .app {
  background: transparent;
}
/* !important: tło .card-header nadaje arkusz XAF ładowany po tym pliku (sprawdzone
   w Naszych Przepisach — bez tego pasek zostaje biały, a biały znak znika). */
body.dxbl-theme-fluent .app > .logon-template-header {
  background: var(--ns-szalwia) !important;
  color: #fff;
  border: 0;
  border-radius: 0;
  min-height: 50px;
  justify-content: center;
}
body.dxbl-theme-fluent .app > .logon-template-header .header-logo {
  color: #fff;
}
body.dxbl-theme-fluent .logon-template-body .card {
  border: 1px solid var(--ns-linia);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(46, 49, 64, 0.10);
}
@media (max-width: 576px) {
  body.dxbl-theme-fluent .logon-template-body .card {
    width: calc(100% - 32px);
    margin-inline: auto;
  }
}