/* RMACUMASSAGE header correction: a stable logo file inside a forest-green tile.
 * Never set a white-background, hard-coded image here: replacing logo-header.svg
 * must be enough to change artwork later (preserve its horizontal proportions).
 * Brand green/gold deliberately do NOT override the portal's configurable accent.
 */
.app-topbar { min-height: 76px; }
.app-topbar-brand-group { gap: 12px; flex: 0 1 auto; min-width: 0; }
.app-brand.portal-brand-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  width: 278px;
  min-width: 0;
  min-height: 62px;
  padding: 5px 13px;
  background: #002D12;
  border: 1px solid #17472B;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255,215,91,.08);
  text-decoration: none;
}
.app-brand.portal-brand-tile:hover { background: #002D12; text-decoration: none; }
.app-brand.portal-brand-tile:focus-visible {
  outline: 3px solid var(--accent, #28758a);
  outline-offset: 3px;
}
.portal-header-brand-img {
  display: block;
  width: 100%;
  height: 51px;
  object-fit: contain;
  object-position: center;
}
.portal-login-brand-img { display: block; width: min(164px, 100%); aspect-ratio: 1; object-fit: contain; margin: -14px auto 12px; border-radius: 10px; }
.portal-reset-brand-img { display: block; width: 136px; max-width: 70%; aspect-ratio: 1; object-fit: contain; margin: 0 0 14px; border-radius: 8px; }
.settings-brand-preview-logo img { display: block; max-width: 100%; max-height: 90px; object-fit: contain; }
@media (max-width: 760px) {
  .app-topbar { min-height: 70px; }
  .app-topbar-brand-group { gap: 9px; }
  .app-brand.portal-brand-tile { width: clamp(145px, 36vw, 222px); min-height: 54px; padding: 5px 9px; border-radius: 9px; }
  .portal-header-brand-img { height: 42px; }
}
@media (max-width: 460px) {
  .app-topbar-brand-group { gap: 7px; }
  .app-brand.portal-brand-tile { width: clamp(118px, 37vw, 158px); min-height: 48px; padding: 4px 6px; }
  .portal-header-brand-img { height: 37px; }
}