@layer components {
  /* Topbar + login-hero logo. The server renders the theme-matching src
     via appTenantLogoUrl($theme) / appAuthLogoUrl() — no CSS swap needed. */
  .app-tenant-logo {
    max-width: 160px;
    height: 32px;
    width: auto;
    object-fit: contain;
  }

  .login-logo .app-tenant-logo {
    max-width: 320px;
    height: auto;
    max-height: 96px;
  }

  .app-topbar-brand .app-tenant-logo {
    max-height: calc(var(--app-topbar-height) - 1rem);
  }

  /* Tenant-edit "Tenant logos" slots — two Pico .grid columns. */
  .tenant-logo-slot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .tenant-logo-slot-label {
    font-size: var(--text-sm);
    color: var(--app-muted-color);
    margin: 0;
  }

  .tenant-logo-actions {
    display: flex;
    justify-content: flex-end;
  }

  .tenant-logo-actions button {
    margin: 0;
  }

  .tenant-logo-readonly-preview {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
  }
}