/* ─── App logo slots — reads the skin's --p-logo-* properties ──────────────────
   Lives in skin/css/ on purpose: a url() inside a custom property resolves
   against the stylesheet that USES it, and the skin (and every client override)
   writes its logo paths relative to css/. Our bundled CSS lives elsewhere, so
   the slots that consume those URLs must sit here. Mirrors .p-logo in the
   skin's component layer. No colour, no size policy beyond the slot itself. */
.brand-logo {
  display: block;
  height: 32px;
  width: 180px;
  max-width: 100%;
  background: var(--p-logo-on-light) no-repeat left center / contain;
}
[dir="rtl"] .brand-logo { background-image: var(--p-logo-on-light-ar); background-position: right center; }

.brand-logo--dark { background-image: var(--p-logo-on-dark); }
[dir="rtl"] .brand-logo--dark { background-image: var(--p-logo-on-dark-ar); }

.brand-logo--brand { background-image: var(--p-logo-on-brand); }
[dir="rtl"] .brand-logo--brand { background-image: var(--p-logo-on-brand-ar); }

.brand-logo--center { background-position: center; }
[dir="rtl"] .brand-logo--center { background-position: center; }

/* The mark alone (collapsed side menu) and the large watermark */
.brand-mark { display: block; width: 32px; height: 32px; background: var(--p-mark-watermark, none) no-repeat center / contain; }
.brand-watermark { background: var(--p-mark-watermark, none) no-repeat center / contain; }