/* ═══════════════════════════════════════════════════════════════════════════
   Szata panelu Schronisko — barwy strony schroniska (RMDN.Web\wwwroot\css\strona.css,
   źródło: www\wzorzec-nowodwor\SKAN-Wzorzec.md): niebieski #14A6FA/#1996DD, granat
   #244F68, tło #F5F8FA, linia #E6EBF0. Decyzja Roberta 2026-10-02.

   Ładowany przez ThemeSwitcher → CustomUrls (appsettings.json) razem z motywem
   Fluent, którego akcent (#1996DD) 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 {
  --sch-granat: #244F68;          /* pasek górny i ekran logowania */
  --sch-niebieski: #1996DD;       /* akcent, „Nowy” */
  --sch-niebieski-ciemny: #1680BE;
  --sch-niebieski-jasny: #E3F3FE;
  --sch-tlo: #F5F8FA;
  --sch-linia: #E6EBF0;
}

/* ── Tło aplikacji jak strona; karty i siatki zostają białe ──────────────── */
/* Schronisko ma układ ze wstęgą (.app.main-ribbon-template) — jego szare tło #F4F4F3
   nadaje XAF regułą na tej klasie, stąd drugi selektor (sprawdzone zrzutem 2026-10-02). */
body.dxbl-theme-fluent,
body.dxbl-theme-fluent .app,
body.dxbl-theme-fluent .app.main-ribbon-template {
  background-color: var(--sch-tlo);
}

/* ── Pasek górny w granacie, białe ikony (maski w kolorze tekstu) ────────── */
body.dxbl-theme-fluent .app > .header {
  background-color: var(--sch-granat);
  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.16);
  color: #fff;
}
body.dxbl-theme-fluent .app > .header .xaf-caption-icon-container {
  background-color: #fff;
  border-radius: 5px;
}
/* W układzie ze wstęgą ikona konta ma stały szary kolor zamiast koloru tekstu;
   reguła XAF wygrywała nawet z wyższą szczegółowością (zrzut 2026-10-02) — stąd !important. */
body.dxbl-theme-fluent .app > .header .btn-header .xaf-image {
  background-color: #fff !important;
}

/* ── Menu boczne ─────────────────────────────────────────────────────────── */
body.dxbl-theme-fluent .app .xaf-sidebar {
  background-color: var(--sch-tlo);
  border-right: 1px solid var(--sch-linia);
}
body.dxbl-theme-fluent .xaf-navmenu .dxbl-treeview-item-container:hover {
  background-color: rgba(25, 150, 221, 0.08);
}
body.dxbl-theme-fluent .xaf-navmenu .dxbl-treeview-item-container.dxbl-active {
  background-color: var(--sch-niebieski-jasny);
  color: var(--sch-granat);
  font-weight: 600;
}
/* Menu w układzie ze wstęgą to akordeon, nie drzewo. Tło zaznaczenia nadaje arkusz
   akordeonu DevExpress — bez !important zostawało szare (zrzut 2026-10-02). */
body.dxbl-theme-fluent .xaf-sidebar .dxbl-accordion-item-content:hover {
  background-color: rgba(25, 150, 221, 0.08) !important;
}
body.dxbl-theme-fluent .xaf-sidebar .dxbl-accordion-item-content.dxbl-active {
  background-color: var(--sch-niebieski-jasny) !important;
  color: var(--sch-granat);
  font-weight: 600;
}

/* ── „Nowy” wypełniony niebieskim strony, ikona przemalowana na biało ────── */
/* .xaf-ribbon — w układzie ze wstęgą akcje widoku są we wstędze, nie w .main-toolbar. */
body.dxbl-theme-fluent .main-toolbar [data-action-name="Nowy"],
body.dxbl-theme-fluent .xaf-ribbon [data-action-name="Nowy"],
body.dxbl-theme-fluent .dxbl-popup [data-action-name="Nowy"] {
  background-color: var(--sch-niebieski);
  border-color: var(--sch-niebieski);
  color: #fff;
}
body.dxbl-theme-fluent .main-toolbar [data-action-name="Nowy"]:hover,
body.dxbl-theme-fluent .xaf-ribbon [data-action-name="Nowy"]:hover,
body.dxbl-theme-fluent .dxbl-popup [data-action-name="Nowy"]:hover {
  background-color: var(--sch-niebieski-ciemny);
  border-color: var(--sch-niebieski-ciemny);
  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 .xaf-ribbon [data-action-name="Nowy"] img,
body.dxbl-theme-fluent .xaf-ribbon [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 ─────────────────────────────────────────────────────── */
body.dxbl-theme-fluent:has(.logon-template-body) {
  background: linear-gradient(180deg, var(--sch-niebieski-jasny) 0, var(--sch-tlo) 60%) fixed;
}
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(--sch-granat) !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(--sch-linia);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(36, 79, 104, 0.12);
}
@media (max-width: 576px) {
  body.dxbl-theme-fluent .logon-template-body .card {
    width: calc(100% - 32px);
    margin-inline: auto;
  }
}