/* ═══════════════════════════════════════════════════════════════════════════
   Szata panelu Strażnica OSP — barwy straży: czerwień, granat, złoto dystynkcji.

   Ładowany przez ThemeSwitcher → CustomUrls (appsettings.json) razem z motywem
   Fluent, którego akcent (#C8102E) barwi przyciski główne, zaznaczenia i linki.
   Tu jest reszta: czerwony pasek jak w aplikacji, jasne tło, granat na „Nowy”,
   ekran logowania. Wzorzec i klasy XAF 26.1.5: Nasze Przepisy (przepisy.css).

   KOLEJNOŚĆ: XAF dokłada swój styles.css PO tym pliku — selektory zaczynają się
   od body.dxbl-theme-fluent (wyższa szczegółowość), nie gołą klasą.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --so-czerwien: #C8102E;
  --so-czerwien-ciemna: #9E0B22;
  --so-czerwien-jasna: #FBE3E6;
  --so-granat: #1F2A44;
  --so-granat-ciemny: #141C30;
  --so-zloto: #C9A227;
  --so-tlo: #F7F5F0;
  --so-linia: #E6E1D6;
}

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

/* ── Pasek górny: czerwień straży ────────────────────────────────────────── */
body.dxbl-theme-fluent .app > .header {
  background-color: var(--so-czerwien);
  color: #fff;
  border-bottom: 3px solid var(--so-zloto);
}
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;
}

/* ── Menu boczne ─────────────────────────────────────────────────────────── */
body.dxbl-theme-fluent .app .xaf-sidebar {
  background-color: var(--so-tlo);
  border-right: 1px solid var(--so-linia);
}
body.dxbl-theme-fluent .xaf-navmenu .dxbl-treeview-item-container:hover {
  background-color: rgba(200, 16, 46, 0.08);
}
body.dxbl-theme-fluent .xaf-navmenu .dxbl-treeview-item-container.dxbl-active {
  background-color: var(--so-czerwien-jasna);
  color: var(--so-czerwien-ciemna);
  font-weight: 600;
}

/* ── „Nowy” w granacie — odróżnia się od czerwonego akcentu zapisu ───────── */
body.dxbl-theme-fluent .main-toolbar [data-action-name="Nowy"],
body.dxbl-theme-fluent .dxbl-popup [data-action-name="Nowy"] {
  background-color: var(--so-granat);
  border-color: var(--so-granat);
  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(--so-granat-ciemny);
  border-color: var(--so-granat-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 .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(--so-czerwien-jasna) 0, var(--so-tlo) 60%) fixed;
}
body.dxbl-theme-fluent:has(.logon-template-body) .app {
  background: transparent;
}
body.dxbl-theme-fluent .app > .logon-template-header {
  background: var(--so-czerwien) !important;
  color: #fff;
  border: 0;
  border-bottom: 3px solid var(--so-zloto);
  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(--so-linia);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(31, 42, 68, 0.14);
}
@media (max-width: 576px) {
  body.dxbl-theme-fluent .logon-template-body .card {
    width: calc(100% - 32px);
    margin-inline: auto;
  }
}